<msc-snackbar /> provide brief messages about app processes at the bottom of the screen. It's a web component and applied Material Design - Snackbar's spec.
npm install msc-snackbar 
<msc-snackbar /> provide brief messages about app processes at the bottom of the screen. It's a web component and applied Material Design - Snackbar's spec.
<msc-snackbar /> is a web component. All we need to do is put the required script into your HTML document. Then follow
- Required Script
``html`
src="https://unpkg.com/msc-snackbar/mjs/wc-msc-snackbar.js">
- Structure
Put <msc-snacker /> into HTML document. It will have different functions and looks with attribute mutation.
`html`
Otherwise, developers could also choose remoteconfig to fetch config for <msc-snackbar />.
`html`
>
<msc-snackbar /> could also use JavaScript to create DOM element. Here comes some examples.
`html`
Developers could apply styles to decorate <msc-snackbar /> margin distance.
`html`
Otherwise, developers could set data attribute to change layout direction and button display.
`html`
data-hide-action-button
data-hide-dismiss-button
>
...
<msc-snackbar /> supports some attributes to let it become more convenience & useful.
- duration
Set auto dismiss duration for <msc-snackbar />. Default is 99999 (seconds).
`html`
>
...
- actioncontent
Set action button's content. Default is "Action".
`html``
>
...
| Property Name | Type | Description |
| ----------- | ----------- | ----------- |
| duration | Number | Getter / Setter for duration (seconds) to auto dismiss. |
| actioncontent | String | Getter / Setter for action button's content. |
| open | Boolean | Getter for <msc-snackbar />'s open state. |
| Event Signature | Description |
| ----------- | ----------- |
| msc-snackbar-action-click | Fired when <msc-snackbar />'s action has been clicked. |
| msc-snackbar-dismiss | Fired when <msc-snackbar /> dismiss behavior occured. |