Material Design Lite. Snackbar

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

Класс MDL	Эффект	Примечание
mdl-snackbar	Определяет контейнер для Snackbar	Обязательно для внешнего контейнера
mdl-snackbar__text	Задаёт элемент, содержащий текст Snackbar	Обязательный
mdl-snackbar__action	Задаёт элемент, реагирующий на кнопку действия	Обязательный
mdl-snackbar--active	Помечает Snackbar активным	Обязательный, когда активный. Контролируется через JavaScript

Метод showSnackbar использует следующие свойства.

• message - текстовое сообщение для показа. Обязательно. Тип String
• timeout - время в миллисекундах для показа сообщения. Не обязательно, по умолчанию 2750. Тип Integer
• actionHandler - функция, которая выполняется при нажатии на кнопку действия. Необязательно. Тип function
• actionText - Текст для кнопки действия

Как создать компонент

Создайдте контейнер div с классами mdl-js-snackbar и mdl-snackbar. Также используйте атрибуты aria.

Внутри созданного контейнера создайте новый контейнер для сообщения с классом mdl-snackbar__text. Оставьте этот контейнер пустым (обязательно). Текс добавляется при показе сообщения.

Добавьте элемент button с классом mdl-snackbar__action. Оставьте текс пустым (обязательно).

Далее подключается JavaScript для вызова метода showSnackbar.

Минимальная разметка.

<div aria-live="assertive" aria-atomic="true" aria-relevant="text" class="mdl-snackbar mdl-js-snackbar">
    <div class="mdl-snackbar__text"></div>
    <button type="button" class="mdl-snackbar__action"></button>
</div>

Компонент готов к использованию.

Примеры

Snackbar с кнопкой действия

Snackbar при нажатии на кнопку. Кнопка меняет цвет. Кнопка отмены возвращает первоначальный цвет.

Показать Snackbar

<button id="demo-show-snackbar" class="mdl-button mdl-js-button mdl-button--raised" type="button">Показать Snackbar</button>
<div id="demo-snackbar-example" class="mdl-js-snackbar mdl-snackbar">
  <div class="mdl-snackbar__text"></div>
  <button class="mdl-snackbar__action" type="button"></button>
</div>
<script>
(function() {
  'use strict';
  var snackbarContainer = document.querySelector('#demo-snackbar-example');
  var showSnackbarButton = document.querySelector('#demo-show-snackbar');
  var handler = function(event) {
    showSnackbarButton.style.backgroundColor = '';
  };
  showSnackbarButton.addEventListener('click', function() {
    'use strict';
    showSnackbarButton.style.backgroundColor = '#' +
        Math.floor(Math.random() * 0xFFFFFF).toString(16);
    var data = {
      message: 'Цвет кнопки был изменён.',
      timeout: 2000,
      actionHandler: handler,
      actionText: 'Отмена'
    };
    snackbarContainer.MaterialSnackbar.showSnackbar(data);
  });
}());
</script>

Toast

Всплывающее сообщение без кнопки действия и с подсчётом нажатий.

Показать Toast

<button id="demo-show-toast" class="mdl-button mdl-js-button mdl-button--raised" type="button">Show Toast</button>
<div id="demo-toast-example" class="mdl-js-snackbar mdl-snackbar">
  <div class="mdl-snackbar__text"></div>
  <button class="mdl-snackbar__action" type="button"></button>
</div>
<script>
(function() {
  'use strict';
  window['counter'] = 0;
  var snackbarContainer = document.querySelector('#demo-toast-example');
  var showToastButton = document.querySelector('#demo-show-toast');
  showToastButton.addEventListener('click', function() {
    'use strict';
    var data = {message: 'Example Message # ' + ++counter};
    snackbarContainer.MaterialSnackbar.showSnackbar(data);
  });
}());
</script>

Вернуться на общую страницу Material Design Lite

Реклама