4.10.5 • Published 21 days ago
@maggioli-design-system/mds-modal v4.10.5
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 JavaScirpt framework you are using.
Properties
Property | Attribute | Description | Type | Default |
---|---|---|---|---|
opened | opened | Specifies if the modal is opened or not | boolean | false |
position | position | Specifies the animation position of the modal window | "bottom" \| "center" \| "left" \| "right" \| "top" \| undefined | 'center' |
Events
Event | Description | Type |
---|---|---|
mdsModalClose | Emits when a modal is closed | CustomEvent<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 |
---|---|
"window" |
CSS Custom Properties
Name | Description |
---|---|
--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-window-background | Set the background color of the window |
--mds-modal-window-overflow | Set the overflow 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
Depends on
Graph
graph TD;
mds-modal --> mds-button
mds-button --> mds-spinner
mds-button --> mds-icon
mds-button --> mds-text
mds-header --> mds-modal
style mds-modal fill:#f9f,stroke:#333,stroke-width:4px
Built with love @ Gruppo Maggioli from R&D Department
4.10.5
21 days ago
4.10.4
3 months ago
4.10.3
3 months ago
4.10.2
3 months ago
4.10.1
3 months ago
4.10.0
3 months ago
4.9.0
3 months ago
4.8.0
3 months ago
4.7.3
4 months ago
4.7.2
5 months ago
4.7.1
6 months ago
4.4.1
8 months ago
4.4.0
8 months ago
4.7.0
6 months ago
4.6.0
6 months ago
4.4.2
7 months ago
4.3.0
8 months ago
3.6.0
1 year ago
4.1.0
1 year ago
4.0.0
1 year ago
4.2.0
1 year ago
3.5.0
1 year ago
3.4.0
1 year ago
3.3.0
1 year ago
3.2.1
1 year ago
3.1.0
2 years ago
3.0.0
2 years ago
2.0.0
2 years ago
1.3.1
2 years ago
1.3.0
2 years ago
1.2.0
2 years ago
1.1.1
2 years ago
1.1.0
2 years ago
1.0.2
2 years ago
1.0.1
2 years ago
1.0.0
2 years ago