Снэкбары

Снэкбар отображает небольшое всплывающее окно в нижней части экрана, которое может автоматически исчезнуть через некоторое время или после того, как пользователь нажмет на экран в другом месте.

На экране может одновременно отображаться только один снэкбар. Если открыть следующий снэкбар, пока текущий еще не закрыт, он будет помещен в очередь и откроется после закрытия текущего.

Использование

Просто вызовите метод mdui.snackbar(params).

Связанное чтение

Использование

Снэкбар вызывается напрямую через JavaScript, поэтому HTML-разметка не требуется.

Существует два способа вызова снэкбара:

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

Оба способа возвращают экземпляр снэкбара.

Параметры, поддерживаемые снэкбаром:

Имя параметра	Тип	По умолчанию	Описание
`message`	`string`		Текст снэкбара. При вызове через `mdui.snackbar(params)` этот параметр не может быть пустым.
`timeout`	`int`	`4000`	Задержка автоматического скрытия снэкбара в миллисекундах. Если установлено значение 0, он не будет закрываться автоматически.
`position`	`string`	`bottom`	Положение снэкбара. `bottom`: Снизу `top`: Сверху `left-top`: Левый верхний угол `left-bottom`: Левый нижний угол `right-top`: Правый верхний угол `right-bottom`: Правый нижний угол
`buttonText`	`string`		Текст кнопки.
`buttonColor`	`string`	`#90CAF9`	Цвет текста кнопки. Это может быть название цвета или его значение, например, `red`, `#ffffff`, `rgba(255, 255, 255, 0.3)` и т. д.
`closeOnButtonClick`	`boolean`	`true`	Закрывать ли снэкбар при нажатии на кнопку.
`closeOnOutsideClick`	`boolean`	`true`	Закрывать ли снэкбар при нажатии или касании области вне снэкбара.
`onClick`	`function`		Функция обратного вызова при нажатии на снэкбар.
`onButtonClick`	`function`		Функция обратного вызова при нажатии на кнопку в снэкбаре.
`onOpen`	`function`		Функция обратного вызова при начале открытия снэкбара.
`onOpened`	`function`		Функция обратного вызова после открытия снэкбара.
`onClose`	`function`		Функция обратного вызова при начале закрытия снэкбара.
`onClosed`	`function`		Функция обратного вызова после закрытия снэкбара.

Методы экземпляра снэкбара:

Имя метода	Описание
`close`	Закрыть снэкбар. После закрытия экземпляр будет уничтожен.

Пример

Обычный снэкбар

Пример

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

Снэкбар с обратным вызовом

Пример

mdui.snackbar({
  message: 'Archived',
  buttonText: 'undo',
  onClick: function(){
    mdui.alert('Нажатие на снэкбар');
  },
  onButtonClick: function(){
    mdui.alert('Нажатие на кнопку');
  },
  onClose: function(){
    mdui.alert('Закрыто');
  }
});

Снэкбары в разных положениях

Пример

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',
});

Тултипы

Таблицы