snackbar

Функция snackbar является обёрткой для компонента <mdui-snackbar>. С её помощью вы можете открыть снэкбар без необходимости писать HTML-код.

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

Импортируйте функцию по мере необходимости:

import { snackbar } from 'mdui/functions/snackbar.js';

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

open

<mdui-button class="example-button">open</mdui-button>

<script type="module">
  import { snackbar } from "mdui/functions/snackbar.js";

  const button = document.querySelector(".example-button");

  button.addEventListener("click", () => {
    snackbar({
      message: "Photo archived",
      action: "Undo",
      onActionClick: () => console.log("click action button")
    });
  });
</script>

API

snackbar(options: Options): Snackbar

Функция принимает объект Options в качестве параметра; возвращает экземпляр компонента <mdui-snackbar>.

Options

Имя свойства	Тип	Значение по умолчанию
`message`	`string`	-
Текстовое сообщение в снэкбаре.
`placement`	`'top' \| 'top-start' \| 'top-end' \| 'bottom' \| 'bottom-start' \| 'bottom-end'`	`bottom`
Расположение снэкбара. По умолчанию `bottom`. Допустимые значения: `top`: вверху, по центру `top-start`: вверху, слева `top-end`: вверху, справа `bottom`: внизу, по центру `bottom-start`: внизу, слева `bottom-end`: внизу, справа
`action`	`string`	-
Текст кнопки действия.
`closeable`	`boolean`	`false`
Показывать ли кнопку закрытия справа.
`messageLine`	`1 \| 2`	-
Максимальное количество строк для сообщения. По умолчанию не ограничено. Варианты: `1`: не более одной строки `2`: не более двух строк
`autoCloseDelay`	`number`	`5000`
Время в миллисекундах, через которое снэкбар автоматически закроется. При 0 не закрывается автоматически. По умолчанию 5000 мс.
`closeOnOutsideClick`	`boolean`	`false`
Закрывать ли снэкбар при клике вне его области.
`queue`	`string`	-
Имя очереди. По умолчанию очередь не используется; при многократном вызове функции снэкбары будут отображаться одновременно. Вы можете передать имя очереди в этом параметре. Снэкбары с одинаковым именем очереди будут открывать следующий только после закрытия предыдущего.
`onClick`	`(snackbar: Snackbar) => void`	-
Функция обратного вызова при клике на снэкбар. Параметр функции — экземпляр снэкбара, `this` также указывает на экземпляр снэкбара.
`onActionClick`	`(snackbar: Snackbar) => void \| boolean \| Promise<void>`	-
Функция обратного вызова при клике на кнопку действия. Параметр функции — экземпляр снэкбара, `this` также указывает на экземпляр снэкбара. По умолчанию после клика снэкбар закрывается; если возвращается `false`, не закрывается; если возвращается promise, закроется после его разрешения (resolve).
`onOpen`	`(snackbar: Snackbar) => void`	-
Функция обратного вызова при начале показа снэкбара. Параметр функции — экземпляр снэкбара, `this` также указывает на экземпляр снэкбара.
`onOpened`	`(snackbar: Snackbar) => void`	-
Функция обратного вызова по завершении анимации показа снэкбара. Параметр функции — экземпляр снэкбара, `this` также указывает на экземпляр снэкбара.
`onClose`	`(snackbar: Snackbar) => void`	-
Функция обратного вызова при начале скрытия снэкбара. Параметр функции — экземпляр снэкбара, `this` также указывает на экземпляр снэкбара.
`onClosed`	`(snackbar: Snackbar) => void`	-
Функция обратного вызова по завершении анимации скрытия снэкбара. Параметр функции — экземпляр снэкбара, `this` также указывает на экземпляр снэкбара.

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

prompt

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

getTheme