3.7.2 • Published 21 days ago
@maggioli-design-system/mds-toast v3.7.2
mds-toast
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 |
---|---|---|---|---|
duration | duration | If set, specifies the visibility duration in milliseconds of the element inside the viewport, when the time is up the visible property will be set to false. If the duration is set to 0 the component will still visible until intentionally closed by user. | number \| undefined | 5000 |
position | position | Sets position of toast | "bottom-center" \| "bottom-left" \| "bottom-right" \| "top-center" \| "top-left" \| "top-right" | 'bottom-center' |
tone | tone | Sets the tone of the color variant | "strong" \| "weak" \| undefined | 'strong' |
variant | variant | Sets the theme variant colours | "dark" \| "light" \| undefined | 'light' |
visible | visible | Specifies if toast is visible at the bottom or not | boolean \| undefined | undefined |
Events
Event | Description | Type |
---|---|---|
mdsToastClose | Emits when the accordion is opened | CustomEvent<void> |
Slots
Slot | Description |
---|---|
"action" | Add HTML elements or components , it is recommended to use mds-button element. |
"default" | Add text string to this slot, avoid to add HTML elements or components here. |
"icon" | Insert an icon image, it can be HTML elements or components , it is recommended to add mds-icon element. |
CSS Custom Properties
Name | Description |
---|---|
--mds-toast-background | Sets the background-color of the component |
--mds-toast-color | Sets the text color of the component |
--mds-toast-duration | Sets the animation duration of the component, used also by component's logic |
--mds-toast-icon-color | Sets the text color of the component |
--mds-toast-shadow | Sets the box-shadow of the component |
Dependencies
Depends on
Graph
graph TD;
mds-toast --> mds-text
style mds-toast fill:#f9f,stroke:#333,stroke-width:4px
Built with love @ Gruppo Maggioli from R&D Department
3.7.2
21 days ago
3.7.1
3 months ago
3.7.0
3 months ago
3.6.3
4 months ago
3.6.2
5 months ago
3.4.0
8 months ago
3.6.1
6 months ago
3.6.0
6 months ago
3.4.2
7 months ago
3.5.0
6 months ago
3.4.1
8 months ago
3.3.0
11 months ago
3.2.1
12 months ago
3.2.0
12 months ago
3.1.0
1 year ago
3.0.0
1 year ago
2.0.2
1 year ago
2.1.0
1 year ago
2.0.1
2 years ago
2.0.0
2 years ago
1.0.1
2 years ago
1.0.0
2 years ago