Snackbar

Instructions

Snackbar is directly called by JavaScript, no need to write HTML layout.

There are two ways to call Snackbar:

mdui.snackbar(message, params)
mdui.snackbar(params)

The return values of both methods are instances of Snackbar.

Parameters required to create Snackbar:

parameter name	Types of	Defaults	Description
`message`	`string`		Snackbar text. When called by `mdui.snackbar(params)`, this parameter cannot be empty.
`timeout`	`int`	`4000`	How long to hide automatically when the user does not operate, unit (milliseconds). When it is 0, it means that it will not be closed automatically.
`position`	`string`	`bottom`	Snackbar's location. `bottom`: Below `top`: Above `left-top`: Upper left corner `left-bottom`: Bottom left corner `right-top`: Upper right corner `right-bottom`: Bottom right corner
`buttonText`	`string`		The text of the button.
`buttonColor`	`string`	`#90CAF9`	The text color of the button, which can be a color name or a color value, such as `red`、`#ffffff`、`rgba(255, 255, 255, 0.3)` Wait.
`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 the area outside the Snackbar.
`onClick`	`function`		Callback function for clicking on Snackbar.
`onButtonClick`	`function`		The callback function when the button on the Snackbar is clicked.
`onOpen`	`function`		The callback function when Snackbar starts to open.
`onOpened`	`function`		The callback function after Snackbar is opened.
`onClose`	`function`		The callback function when Snackbar starts to close.
`onClosed`	`function`		The callback function after Snackbar is closed.

Methods owned by the Snackbar instance:

Method name	description
`close`	Close the Snackbar, the Snackbar will be destroyed after closing.

Example

Normal Snackbar

Example

mdui.snackbar({
  message: 'Message sent'
});

Snackbar with callback

Example

mdui.snackbar({
  message: 'Archived',
  buttonText: 'undo',
  onClick: function(){
    mdui.alert('Clicked Sanckbar');
  },
  onButtonClick: function(){
    mdui.alert('Button clicked');
  },
  onClose: function(){
    mdui.alert('closed');
  }
});

Snackbar in different locations

Example

Call method

Related Reading

Instructions

Example

Normal Snackbar

Snackbar with callback

Snackbar in different locations