Modal - Semantic UI

element Modal <ui-modal> {

// A modal displays content that temporarily blocks interactions with the main view of a site

// export Modal

types { // 1 { … }

glass : boolean // can appear as glass

}

variations { // 2 { … }

aligned : "top-aligned" // adjust its alignment

"top-aligned" — appear aligned to top of browser

size : "tiny" | "small" | "medium" | "large" | "big" // vary in size

"tiny" — appear very small

"small" — appear small

"medium" — appear normal sized

"large" — appear larger than normal

"big" — appear much larger than normal

}

settings { // 1 { … }

closeable : boolean = true // can allow the modal to be dismissed by clicking on the backdrop.

}

import {
  SIZE_VARIATION,
  filterVariationOptions,
} from '@semantic-ui/specs';

export default {
  uiType: 'element',
  name: 'Modal',
  description: 'A modal displays content that temporarily blocks interactions with the main view of a site',
  tagName: 'ui-modal',
  exportName: 'Modal',
  content: [],
  types: [
    {
      name: 'Glass',
      attribute: 'glass',
      description: 'can appear as glass',
      usageLevel: 3,
    },
  ],
  variations: [
    {
      name: 'Aligned',
      attribute: 'aligned',
      description: 'adjust its alignment',
      usageLevel: 1,
      options: [
        {
          name: 'Top Aligned',
          value: ['top-aligned'],
          description: 'appear aligned to top of browser',
          exampleCode: `<ui-modal top-aligned>Modal Content</ui-modal>`,
        },
      ],
    },
    filterVariationOptions(SIZE_VARIATION, ['tiny', 'small', 'medium', 'large', 'big']),
  ],
  events: [
    {
      eventName: 'show',
      description: 'occurs after the modal starts to show',
    },
    {
      eventName: 'visible',
      description: 'occurs after the modal is visible',
    },
    {
      eventName: 'hide',
      description: 'occurs when the modal begins to hide',
    },
    {
      eventName: 'hidden',
      description: 'occurs after the modal is hidden',
    },
  ],
  settings: [
    {
      name: 'Closeable',
      type: 'boolean',
      defaultValue: true,
      attribute: 'closeable',
      description: 'can allow the modal to be dismissed by clicking on the backdrop.',
    },
  ],
};

{ "uiType": "element", "name": "Modal", "description": "A modal displays content that temporarily blocks interactions with the main view of a site", "tagName": "ui-modal", "exportName": "Modal", "content": [], "types": [ { "name": "Glass", "attribute": "glass", "description": "can appear as glass", "usageLevel": 3 } ], "variations": [ { "name": "Aligned", "attribute": "aligned", "description": "adjust its alignment", "usageLevel": 1, "options": [ { "name": "Top Aligned", "value": [ "top-aligned" ], "description": "appear aligned to top of browser", "exampleCode": "<ui-modal top-aligned>Modal Content</ui-modal>" } ] }, { "name": "Size", "attribute": "size", "usageLevel": 1, "description": "vary in size", "options": [ { "name": "Tiny", "value": "tiny", "description": "appear very small" }, { "name": "Small", "value": "small", "description": "appear small" }, { "name": "Medium", "value": "medium", "description": "appear normal sized" }, { "name": "Large", "value": "large", "description": "appear larger than normal" }, { "name": "Big", "value": "big", "description": "appear much larger than normal" } ] } ], "events": [ { "eventName": "show", "description": "occurs after the modal starts to show" }, { "eventName": "visible", "description": "occurs after the modal is visible" }, { "eventName": "hide", "description": "occurs when the modal begins to hide" }, { "eventName": "hidden", "description": "occurs after the modal is hidden" } ], "settings": [ { "name": "Closeable", "type": "boolean", "defaultValue": true, "attribute": "closeable", "description": "can allow the modal to be dismissed by clicking on the backdrop." } ] }