@maggioli-design-system/mds-toast
v3.7.2
Published
mds-toast is a web-component from Magma Design System, 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.
Downloads
1,104
Readme
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