Плавающая кнопка (FAB)

Плавающая кнопка действия — это круглая иконка, парящая над интерфейсом, которая может иметь динамические эффекты, такие как всплывающие подменю, а также анимации появления и скрытия.

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

Вызов через атрибуты
Вызов через JavaScript

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

Стиль

Плавающая кнопка действия

Добавьте класс .mdui-fab к элементу, чтобы сделать его плавающей кнопкой действия.

Пример

<button class="mdui-fab mdui-ripple">
          <i class="mdui-icon material-icons">add</i>
        </button>
        <button class="mdui-fab mdui-color-theme-accent mdui-ripple">
          <i class="mdui-icon material-icons">add</i></button
        >

Добавьте класс .mdui-fab-mini, чтобы сделать её миниатюрной плавающей кнопкой действия.

Пример

<button class="mdui-fab mdui-fab-mini mdui-ripple">
          <i class="mdui-icon material-icons">add</i>
        </button>
        <button
          class="mdui-fab mdui-fab-mini mdui-color-theme-accent mdui-ripple"
        >
          <i class="mdui-icon material-icons">add</i></button
        >

Анимация скрытия/показа

Добавление класса .mdui-fab-hide к кнопке скроет её с анимацией, а удаление этого класса покажет её с анимацией.

Пример

<button
          class="mdui-fab mdui-color-theme-accent mdui-ripple"
          id="fab-animation"
        >
          <i class="mdui-icon material-icons">add</i>
        </button>

        <button class="mdui-btn" id="fab-animation-show">show</button>
        <button class="mdui-btn" id="fab-animation-hide">hide</button>

        <script>
          var fab = document.getElementById('fab-animation');
          document
            .getElementById('fab-animation-show')
            .addEventListener('click', function () {
              fab.classList.remove('mdui-fab-hide');
            });
          document
            .getElementById('fab-animation-hide')
            .addEventListener('click', function () {
              fab.classList.add('mdui-fab-hide');
            });
        </script>

Фиксация в нижнем правом углу

Добавление класса .mdui-fab-fixed зафиксирует кнопку в нижнем правом углу окна.

<button class="mdui-fab mdui-fab-fixed mdui-ripple">
  <i class="mdui-icon material-icons">add</i>
</button>

Запуск

Меню быстрого набора

Структура HTML

Эта кнопка всегда зафиксирована в нижнем правом углу окна. При наведении курсора или клике вверх всплывает меню быстрого набора.

<div class="mdui-fab-wrapper" id="exampleFab">
  <button class="mdui-fab mdui-ripple mdui-color-theme-accent">
    <!-- Иконка, отображаемая по умолчанию -->
    <i class="mdui-icon material-icons">add</i>

    <!-- При начале открытия меню быстрого набора происходит плавное переключение на эту иконку. Если переключение иконок не требуется, этот элемент можно опустить. -->
    <i class="mdui-icon mdui-fab-opened material-icons">add</i>
  </button>
  <div class="mdui-fab-dial">
    <button class="mdui-fab mdui-fab-mini mdui-ripple mdui-color-pink">
      <i class="mdui-icon material-icons">backup</i>
    </button>
    <button class="mdui-fab mdui-fab-mini mdui-ripple mdui-color-red">
      <i class="mdui-icon material-icons">bookmark</i>
    </button>
    <button class="mdui-fab mdui-fab-mini mdui-ripple mdui-color-orange">
      <i class="mdui-icon material-icons">access_alarms</i>
    </button>
    <button class="mdui-fab mdui-fab-mini mdui-ripple mdui-color-blue">
      <i class="mdui-icon material-icons">touch_app</i>
    </button>
  </div>
</div>

Вызов через атрибуты

При таком способе не требуется написание JavaScript-кода. Достаточно добавить атрибут mdui-fab="options" к элементу с классом .mdui-fab-wrapper, чтобы активировать этот плагин.

<div class="mdui-fab-wrapper" mdui-fab="{trigger: 'hover'}">
  ......
</div>

Вызов через JavaScript

Инициализация компонента:

// selector — это CSS-селектор, DOM-элемент или HTML-строка
// options — это параметры плагина, см. список параметров ниже
var inst = new mdui.Fab(selector, options);

Запуск

Параметр

Имя параметра	Тип	По умолчанию	Описание
`trigger`	`string`	`hover`	Способ триггера. `hover`: активация при наведении курсора. `click`: активация при клике.

Метод

Имя метода	Описание
`open()`	Открыть меню быстрого набора.
`close()`	Закрыть меню быстрого набора.
`toggle()`	Переключить состояние открытия меню быстрого набора.
`show()`	Показать плавающую кнопку действия с анимацией.
`hide()`	Скрыть плавающую кнопку действия с анимацией.
`getState()`	Возвращает текущее состояние открытия меню быстрого набора. Всего существует четыре состояния (`opening`, `opened`, `closing`, `closed`).

Событие

Имя события	Описание	Цель	Параметры
`open.mdui.fab`	Событие срабатывает, когда меню быстрого набора начинает анимацию открытия.	`<div class="mdui-fab-wrapper"></div>`	`event._detail.inst`: экземпляр
`opened.mdui.fab`	Событие срабатывает, когда меню быстрого набора завершает анимацию открытия.
`close.mdui.fab`	Событие срабатывает, когда меню быстрого набора начинает анимацию закрытия.
`closed.mdui.fab`	Событие срабатывает, когда меню быстрого набора завершает анимацию закрытия.

Список CSS-классов

Имя класса	Описание
`.mdui-fab`	Определяет плавающую кнопку действия.
`.mdui-fab-mini`	Определяет миниатюрную плавающую кнопку действия.
`.mdui-fab-hide`	Скрывает плавающую кнопку действия с анимацией.
`.mdui-fab-fixed`	Фиксирует плавающую кнопку действия в нижнем правом углу.
`.mdui-fab-wrapper`	Внешний элемент плавающей кнопки действия с меню быстрого набора.
`.mdui-fab-opened`	Иконка, на которую переключается плавающая кнопка действия после открытия меню быстрого набора.
`.mdui-fab-dial`	Внешний элемент меню плавающей кнопки действия с меню быстрого набора.

Кнопки

Выпадающий список