mds-modal

This is a web-component from Maggioli Design System Magma, built with StencilJS, TypeScript, Storybook. It's based on the web-component standard and it's designed to be agnostic from the JavaScript framework you are using.

Properties

| Property | Attribute | Description | Type | Default | | ------------- | ------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------- | ----------- | | animating | animating | Specifies if the component is animating itself or not | "intro" \| "none" \| "outro" \| undefined | 'none' | | animation | animation | Specifies if the component is animating itself or not | "3d" \| "custom" \| "slide" \| undefined | 'slide' | | backdrop | backdrop | Specifies if the modal shows the backdrop | boolean \| undefined | true | | interaction | interaction | Specifies if the component can be closed with close button, or also if the backdrop background is cliccked. If strict is selected only the close button can dismiss the component via UI. If relaxed is selected the component can be dismissed also by cliccking the backdrop area. | "relaxed" \| "strict" | 'relaxed' | | opened | opened | Specifies if the modal is opened or not | boolean \| undefined | false | | overflow | overflow | Specifies if the component prevents the body from scrolling when modal window is opened | "auto" \| "manual" | 'auto' | | position | position | Specifies the animation position of the modal window | "bottom" \| "bottom-left" \| "bottom-right" \| "center" \| "left" \| "right" \| "top" \| "top-left" \| "top-right" \| undefined | 'center' |

Events

| Event | Description | Type | | --------------- | --------------------------------------------------------------------------------------------------------------- | ------------------- | | mdsModalClose | Emits when a modal is closed | CustomEvent<void> | | mdsModalHide | Emits when a modal is totally invisible, can be useful to detach the component when it's hidden and gain memory | CustomEvent<void> | | mdsModalOpen | Emits when a modal is closed | CustomEvent<void> | | mdsModalShow | Emits when a modal is totally visible, when the modal intro animation is finished | CustomEvent<void> |

Methods

close() => Promise<void>

Returns

Type: Promise<void>

Slots

| Slot | Description | | ----------- | -------------------------------------------------------------------------------------------------------------------------- | | "bottom" | Contents that will be placed on bottom of the window. Add text string, HTML elements or components to this slot. | | "default" | Contents that will be placed in the center of the window. Add text string, HTML elements or components to this slot. | | "top" | Contents that will be placed on top of the window. Add text string, HTML elements or components to this slot. | | "window" | Use directly a window component if you need it. Add text string, HTML elements or components to this slot. |

Shadow Parts

| Part | Description | | ---------------- | ---------------------------------------------------------- | | "action-close" | Selects the close button of the modal. | | "window" | Selects the default window element of the modal when used. |

CSS Custom Properties

| Name | Description | | ---------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------- | | --mds-modal-custom-closed-transform | Sets the transform position of the custom window when it's outside the viewport, to it's default position | | --mds-modal-custom-window-distance | Set the distance between the slotted modal window and the screen bounds | | --mds-modal-overlay-color | Set the overlay color of the background when the component is opened, this property can be inherited from globals.css in styles^8.0.0. | | --mds-modal-overlay-opacity | Set the overlay color opacity of the background when the component is opened, this property can be inherited from globals.css in styles^8.0.0. | | --mds-modal-transition-duration | Sets the transition-duration of the modal elements | | --mds-modal-transition-timing-funciton | Sets the transition-timing-funciton of the modal elements | | --mds-modal-window-background | Set the background color of the window | | --mds-modal-window-distance | Set the distance between the modal window and the screen bounds | | --mds-modal-window-max-width | If the viewport is greather than mobile, max-width will be considered with this value; | | --mds-modal-window-min-width | If the viewport is greather than mobile, min-width will be considered with this value; | | --mds-modal-window-overflow | Set the overflow of the window | | --mds-modal-window-radius | Set the border radius of the window | | --mds-modal-window-shadow | Set the box shadow of the window | | --mds-modal-z-index | Set the z-index of the window when the component is opened |

Dependencies

Used by

• mds-header
• mds-status-bar

Depends on

• mds-button

Graph

graph TD;
  mds-modal --> mds-button
  mds-button --> mds-spinner
  mds-button --> mds-icon
  mds-button --> mds-text
  mds-header --> mds-modal
  mds-status-bar --> mds-modal
  style mds-modal fill:#f9f,stroke:#333,stroke-width:4px

Built with love @ Gruppo Maggioli from R&D Department