near_me
Getting Started
keyboard_arrow_downlayers
Style
keyboard_arrow_downwidgets
Components
keyboard_arrow_downlocal_mall
Resources
keyboard_arrow_downThe new mdui 2 based on Material Design 3 and Web Components is now available. Check out the mdui 2 documentation.
Snackbar
Snackbar displays a small pop-up box at the bottom of the window, which can disappear automatically after a timeout or after the user clicks or touches elsewhere on the screen.
Only one Snackbar can be displayed on a screen at a time. If the next Snackbar is opened before the current one is closed, the next Snackbar will be added to the queue and opened after the current one is closed.
Usage
Call the method mdui.snackbar(params).
Related Reading
Usage
Snackbar is called directly by JavaScript, no HTML layout is needed.
There are two ways to call Snackbar:
mdui.snackbar(message, params)mdui.snackbar(params)
The return values for both methods are instances of Snackbar.
Parameters supported by Snackbar:
| Param Name | Type | Default | Description |
|---|---|---|---|
message | string | The text of the Snackbar. When calling via mdui.snackbar(params), this parameter cannot be empty. | |
timeout | int | 4000 | The delay time for Snackbar to automatically hide, in milliseconds. Set to 0 to keep it open. |
position | string | bottom | The position of the Snackbar.
|
buttonText | string | The text of the button. | |
buttonColor | string | #90CAF9 | The text color of the button, which can be a color name or color value, such as red, #ffffff, rgba(255, 255, 255, 0.3), etc. |
closeOnButtonClick | boolean | true | Whether to close the Snackbar when the button is clicked. |
closeOnOutsideClick | boolean | true | Whether to close the Snackbar when clicking or touching an area outside the Snackbar. |
onClick | function | Callback function when the Snackbar is clicked. | |
onButtonClick | function | Callback function when the button on the Snackbar is clicked. | |
onOpen | function | Callback function when the Snackbar starts opening. | |
onOpened | function | Callback function after the Snackbar is opened. | |
onClose | function | Callback function when the Snackbar starts closing. | |
onClosed | function | Callback function after the Snackbar is closed. |
Methods of the Snackbar instance:
| Method Name | Description |
|---|---|
close | Close the Snackbar. After closing, the Snackbar will be destroyed. |
Snackbar with callbacks
Example
mdui.snackbar({
message: 'Archived',
buttonText: 'undo',
onClick: function(){
mdui.alert('Snackbar clicked');
},
onButtonClick: function(){
mdui.alert('Button clicked');
},
onClose: function(){
mdui.alert('Closed');
}
});Snackbar in different positions
Example
mdui.snackbar({
message: 'bottom',
position: 'bottom',
});
mdui.snackbar({
message: 'top',
position: 'top',
});
mdui.snackbar({
message: 'left-top',
position: 'left-top',
});
mdui.snackbar({
message: 'left-bottom',
position: 'left-bottom',
});
mdui.snackbar({
message: 'right-top',
position: 'right-top',
});
mdui.snackbar({
message: 'right-bottom',
position: 'right-bottom',
});