SnackbarСнэкбар

Снэкбар используется для отображения краткой информации о процессе выполнения приложения на странице.

Помимо прямого использования этого компонента, mdui предоставляет функцию mdui.snackbar для упрощения работы с компонентом Snackbar.

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

При необходимости импортируйте компонент:

import 'mdui/components/snackbar.js';

При необходимости импортируйте типы TypeScript:

import type { Snackbar } from 'mdui/components/snackbar.js';

Пример использования:

Photo archived

Открыть Snackbar

<mdui-snackbar class="example-snackbar">Photo archived</mdui-snackbar>

<mdui-button>Открыть Snackbar</mdui-button>

<script>
  const snackbar = document.querySelector(".example-snackbar");
  const openButton = snackbar.nextElementSibling;

  openButton.addEventListener("click", () => snackbar.open = true);
</script>

Используйте атрибут action для добавления кнопки действия справа от снэкбара, указав текст кнопки. Нажатие на кнопку действия вызывает событие action-click. Чтобы отобразить кнопку действия в состоянии загрузки, добавьте атрибут action-loading.

Photo archived

Открыть Snackbar

<mdui-snackbar action="Undo" class="example-action">Photo archived</mdui-snackbar>

<mdui-button>Открыть Snackbar</mdui-button>

<script>
  const snackbar = document.querySelector(".example-action");
  const openButton = snackbar.nextElementSibling;

  snackbar.addEventListener("action-click", () => {
    snackbar.actionLoading = true;
    setTimeout(() => snackbar.actionLoading = false, 2000);
  });

  openButton.addEventListener("click", () => snackbar.open = true);
</script>

Исходный код

Также можно добавить пользовательский элемент справа с помощью слота action.

Photo archived Undo

Открыть Snackbar

<mdui-snackbar class="example-action-slot">
  Photo archived
  <mdui-button slot="action" variant="text">Undo</mdui-button>
</mdui-snackbar>

<mdui-button>Открыть Snackbar</mdui-button>

<script>
  const snackbar = document.querySelector(".example-action-slot");
  const openButton = snackbar.nextElementSibling;

  openButton.addEventListener("click", () => snackbar.open = true);
</script>

Исходный код

Возможность закрытия

Добавьте атрибут closeable, чтобы справа от снэкбара появилась кнопка закрытия. Нажатие на эту кнопку закрывает снэкбар и вызывает событие close.

Photo archived

Открыть Snackbar

<mdui-snackbar closeable class="example-closeable">Photo archived</mdui-snackbar>

<mdui-button>Открыть Snackbar</mdui-button>

<script>
  const snackbar = document.querySelector(".example-closeable");
  const openButton = snackbar.nextElementSibling;

  openButton.addEventListener("click", () => snackbar.open = true);
</script>

Исходный код

Можно настроить элемент кнопки закрытия с помощью слота close-button.

Photo archived

Открыть Snackbar

<mdui-snackbar closeable class="example-close-button-slot">
  Photo archived
  <mdui-avatar slot="close-button" icon="people_alt"></mdui-avatar>
</mdui-snackbar>

<mdui-button>Открыть Snackbar</mdui-button>

<script>
  const snackbar = document.querySelector(".example-close-button-slot");
  const openButton = snackbar.nextElementSibling;

  openButton.addEventListener("click", () => snackbar.open = true);
</script>

Исходный код

С помощью атрибута close-icon можно изменить иконку Material Icons на кнопке закрытия. Также можно использовать слот close-icon для настройки иконки.

Photo archived

Открыть Snackbar

<mdui-snackbar
  closeable
  close-icon="delete"
  class="example-close-icon"
>Photo archived</mdui-snackbar>

<mdui-button>Открыть Snackbar</mdui-button>

<script>
  const snackbar = document.querySelector(".example-close-icon");
  const openButton = snackbar.nextElementSibling;

  openButton.addEventListener("click", () => snackbar.open = true);
</script>

Исходный код

Количество строк текста

По умолчанию текст сообщения не имеет ограничений по количеству строк. Вы можете ограничить количество строк с помощью атрибута message-line (максимум 2 строки).

The item already has the label "travel". You can add a new label. You can add a new label.

Открыть Snackbar

<mdui-snackbar message-line="1" class="example-line">The item already has the label "travel". You can add a new label. You can add a new label.</mdui-snackbar>

<mdui-button>Открыть Snackbar</mdui-button>

<script>
  const snackbar = document.querySelector(".example-line");
  const openButton = snackbar.nextElementSibling;

  openButton.addEventListener("click", () => snackbar.open = true);
</script>

Исходный код

Задержка автоматического закрытия

Используйте атрибут auto-close-delay для установки задержки автоматического закрытия в миллисекундах. Значение по умолчанию — 5000 мс.

Photo archived

Открыть Snackbar

<mdui-snackbar auto-close-delay="2000" class="example-close-delay">Photo archived</mdui-snackbar>

<mdui-button>Открыть Snackbar</mdui-button>

<script>
  const snackbar = document.querySelector(".example-close-delay");
  const openButton = snackbar.nextElementSibling;

  openButton.addEventListener("click", () => snackbar.open = true);
</script>

Исходный код

Закрытие по клику вне области

Добавьте атрибут close-on-outside-click, чтобы снэкбар закрывался при клике на область вне него.

Photo archived

Открыть Snackbar

<mdui-snackbar close-on-outside-click class="example-outside">Photo archived</mdui-snackbar>

<mdui-button>Открыть Snackbar</mdui-button>

<script>
  const snackbar = document.querySelector(".example-outside");
  const openButton = snackbar.nextElementSibling;

  openButton.addEventListener("click", () => snackbar.open = true);
</script>

Исходный код

API

Свойства

Атрибут	Свойство	Тип	По умолчанию
`open`	`open`	`boolean`	`false`
Определяет, отображать ли снэкбар.
`placement`	`placement`	`'top' \| 'top-start' \| 'top-end' \| 'bottom' \| 'bottom-start' \| 'bottom-end'`	`'bottom'`
Положение снэкбара. По умолчанию `bottom`. Возможные значения: `top` — сверху по центру `top-start` — сверху слева `top-end` — сверху справа `bottom` — снизу по центру `bottom-start` — снизу слева `bottom-end` — снизу справа
`action`	`action`	`string`	-
Текст кнопки действия. Можно задать через слот `action`.
`action-loading`	`actionLoading`	`boolean`	`false`
Определяет, находится ли кнопка действия в состоянии загрузки.
`closeable`	`closeable`	`boolean`	`false`
Определяет, отображать ли кнопку закрытия справа.
`close-icon`	`closeIcon`	`string`	-
Имя иконки Material Icons для кнопки закрытия. Можно задать через `slot="close-icon"`.
`message-line`	`messageLine`	`1 \| 2`	-
Максимальное количество строк сообщения. По умолчанию без ограничений. Возможные значения: `1` — максимум одна строка `2` — максимум две строки
`auto-close-delay`	`autoCloseDelay`	`number`	`5000`
Задержка автоматического закрытия (в миллисекундах). При значении `0` автоматическое закрытие отключается. По умолчанию 5000 мс.
`close-on-outside-click`	`closeOnOutsideClick`	`boolean`	`false`
Определяет, нужно ли закрывать снэкбар при клике или касании вне его.

События

Название
`open`
Срабатывает в начале показа снэкбара. Можно отменить показ, вызвав `event.preventDefault()`.
`opened`
Срабатывает после завершения анимации показа снэкбара.
`close`
Срабатывает в начале скрытия снэкбара. Можно отменить скрытие, вызвав `event.preventDefault()`.
`closed`
Срабатывает после завершения анимации скрытия снэкбара.
`action-click`
Срабатывает при клике на кнопку действия.

Slots

Название
(по умолчанию)
Текстовое содержимое сообщения снэкбара.
`action`
Кнопка действия справа.
`close-button`
Кнопка закрытия справа. Отображается только при `closeable=true`.
`close-icon`
Иконка внутри кнопки закрытия.

CSS Parts

Название
`message`
Текст сообщения.
`action`
Кнопка действия.
`close-button`
Кнопка закрытия.
`close-icon`
Иконка внутри кнопки закрытия.

Пользовательские CSS-свойства

Название
`--shape-corner`
Размер скругления углов компонента. Можно указать конкретное значение в пикселях, но рекомендуется использовать дизайн-токены.
`--z-index`
Значение CSS `z-index` компонента.

Предыдущая глава

Slider Слайдер

Следующая глава

Switch Переключатель