@maggioli-design-system/mds-toast NPM

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 JavaScript 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	`"ai" \\| "dark" \\| "error" \\| "info" \\| "light" \\| "primary" \\| "success" \\| "warning" \\| 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

mds-text

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

@maggioli-design-system/styles @stencil/core clsx

@infinitebrahmanuniverse/nolb-_mag @everything-registry/sub-chunk-571 @zalastax/nolb-_mag

6 months ago

1 year ago

7 months ago

9 months ago

10 months ago

12 months ago

9 months ago

9 months ago

8 months ago

8 months ago

1 year ago

1 year ago

1 year ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

4 years ago