Snackbar
<msc-snackbar />
provide brief messages about app processes at the bottom of the screen. It's a web component and applied Material Design - Snackbars's spec.
Try to tap the following buttons and see what can <msc-snackbar />
do ?
Basic Usage
<msc-snackbar />
is a web component. All we need to do is put the required script into your HTML document. Then follow <msc-snackbar />
's html structure and everything will be all set.
Required Script
Structure
Put <msc-snacker />
into HTML document. It will have different functions and looks with attribute mutation.
JavaScript Instantiation
<msc-snackbar />
could also use JavaScript to create DOM element. Here comes some examples.
Style Customization
Developers could apply styles to decorate <msc-snackbar />
margin distance.
Otherwise, apply class - msc-snackbar--leading
to make <msc-snackbar />
align flex-start.
Attributes
<msc-snackbar />
supports some attributes to let it become more convenience & useful.
active
Set active for <msc-snackbar />
. It will show up once set true. Default is false (not set).
stack
Set stacke for <msc-snackbar />
to display stacked view. Default is false (not set).
label
Set label for <msc-snackbar />
.
action
Set action for <msc-snackbar />
. It should be JSON string. Developers could set content、hidden and extra params here.(hidden
must be boolean to make action display or not, default is true).
dismiss
Set dismiss for <msc-snackbar />
. It should be JSON string. Developers could set auto、hidden and duration (ms) here.
hidden
is for dismiss button display or not (default is true). auto
(default is true) and duration
(default is 5000) are for auto dismiss behavior.
Property
Property Name | Type | Description |
---|---|---|
active
|
Boolean | Getter / Setter for active. It will make <msc-snackbar /> show up or not. |
stack
|
Boolean | Getter / Setter for stack. This will set stacked view once set true. Default is false. |
label
|
String | Getter / Setter for label. Developers could set message through this property. |
action
|
Object | Getter / Setter for action. Developers could set content、hidden and extra params here.(hidden must be boolean to make action display or not, default is true). |
dismiss
|
Object | Getter / Setter for dismiss. Developers could set auto、hidden and duration (ms) here.hidden is for dismiss button display or not (default is true). auto (default is true) and duration (default is 5000) are for auto dismiss behavior. |
Event
Event Signature | Description |
---|---|
msc-snackbar-action-click
|
Fired when <msc-snackbar /> 's action has been clicked. Developers could get params through event.detail. |
msc-snackbar-dissmiss
|
Fired when <msc-snackbar /> dismiss behavior occured. |