FAB кнопки

FAB (Floating Action Button) — это плавающая кнопка действия, которая используется для выделения основного действия на странице. В Vuetify FAB реализуются с помощью компонента <v-btn> с атрибутом fab. Эти кнопки могут быть круглыми, иметь иконки, а также расширяться в Speed Dial для нескольких действий.

Основная структура FAB

<v-btn fab color="primary">
  <v-icon>mdi-plus</v-icon>
</v-btn>

Разбор:

  • fab — задаёт форму кнопки как круг.
  • color — определяет основной цвет кнопки.
  • <v-icon> — внутри кнопки отображается иконка (в Vuetify используется библиотека Material Design Icons).

Размеры FAB

Vuetify поддерживает несколько размеров FAB через пропсы small, medium, large:

<v-btn fab small color="secondary">
  <v-icon>mdi-pencil</v-icon>
</v-btn>

<v-btn fab color="success">
  <v-icon>mdi-check</v-icon>
</v-btn>

<v-btn fab large color="error">
  <v-icon>mdi-close</v-icon>
</v-btn>

Особенности размеров:

  • small — компактная версия, подходит для панелей инструментов.
  • medium — стандартная кнопка.
  • large — привлекает внимание, используется для основных действий.

Позиционирование FAB

Для плавающей кнопки часто нужно закрепление в углу экрана. Vuetify предоставляет классы утилиты:

<v-btn fab color="pink" class="ma-4" fixed bottom right>
  <v-icon>mdi-message</v-icon>
</v-btn>

Пояснения:

  • fixed — фиксирует кнопку относительно окна браузера.
  • bottom / top, left / right — определяют расположение.
  • ma-4 — задаёт внешний отступ (margin).

FAB с расширением — Speed Dial

Speed Dial позволяет раскрывать несколько действий из одной FAB. Компонент <v-speed-dial> объединяет основную кнопку и дополнительные действия.

<v-speed-dial v-model="fab" bottom right direction="up" open-on-hover>
  <template #activator>
    <v-btn fab color="deep-purple" dark>
      <v-icon>{{ fab ? 'mdi-close' : 'mdi-plus' }}</v-icon>
    </v-btn>
  </template>

  <v-btn fab small color="red">
    <v-icon>mdi-pencil</v-icon>
  </v-btn>

  <v-btn fab small color="green">
    <v-icon>mdi-check</v-icon>
  </v-btn>

  <v-btn fab small color="blue">
    <v-icon>mdi-email</v-icon>
  </v-btn>
</v-speed-dial>

Разбор ключевых моментов:

  • v-model="fab" — управляет состоянием открытия/закрытия.
  • direction="up" — определяет направление раскрытия кнопок.
  • open-on-hover — раскрытие при наведении.
  • Активатор задаётся через слот #activator, что позволяет полностью кастомизировать основную кнопку.

Использование FAB с текстом

Иногда FAB включает текст или лейбл. Для этого используется комбинация v-btn fab с v-tooltip:

<v-tooltip bottom>
  <template #activator="{ props }">
    <v-btn fab color="orange" v-bind="props">
      <v-icon>mdi-plus</v-icon>
    </v-btn>
  </template>
  <span>Добавить новый элемент</span>
</v-tooltip>

Пояснения:

  • v-tooltip создаёт подсказку при наведении.
  • props из слота activator обязательно передаются на кнопку для корректной работы.

Стилизация FAB

Vuetify позволяет настраивать FAB через стандартные пропсы и CSS классы:

  • dark / light — изменяет тему кнопки.
  • elevation — задаёт тень кнопки (elevation="12").
  • outlined — делает кнопку с обводкой.
  • rounded — позволяет менять форму от стандартного круга до более мягкого овала.
<v-btn fab color="cyan" dark elevation="12">
  <v-icon>mdi-star</v-icon>
</v-btn>

FAB и анимации

Vuetify поддерживает анимацию при изменении состояния FAB. Например, при раскрытии Speed Dial кнопки можно анимировать через transition:

<v-btn fab color="purple" v-bind:transition="fade-transition">
  <v-icon>mdi-menu</v-icon>
</v-btn>
  • transition — можно использовать встроенные Vuetify переходы: fade-transition, scale-transition, slide-x-transition, slide-y-transition.

Использование FAB в приложениях

  • Основная задача FAB — выделить ключевое действие на странице.
  • Обычно используется в мобильных и PWA-интерфейсах.
  • Чаще всего располагается в правом нижнем углу экрана для удобного доступа пальцем.
  • Может сочетаться с Speed Dial для набора второстепенных действий.

FAB в Vuetify — это мощный инструмент интерфейса, который сочетает компактность, наглядность и гибкость кастомизации. Через комбинацию размеров, цветов, и расширений можно создавать как минималистичные кнопки, так и интерактивные панели действий для сложных интерфейсов.

Оглавление