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

QFab (Floating Action Button) — компонент библиотеки Quasar, реализующий плавающую кнопку действий с возможностью раскрытия дополнительных опций. Используется для акцентирования ключевых пользовательских действий в интерфейсе и часто располагается поверх контента.

Основная идея — предоставить компактную точку входа для группы связанных действий без перегрузки интерфейса.

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

Минимальная реализация включает контейнер q-fab и вложенные элементы q-fab-action:

<q-fab
  color="primary"
  icon="menu"
  direction="up"
>
  <q-fab-action color="secondary" icon="mail" />
  <q-fab-action color="secondary" icon="alarm" />
</q-fab>

Ключевые параметры:

  • icon — иконка основной кнопки
  • direction — направление раскрытия (up, down, left, right)
  • color — цвет кнопки
  • q-fab-action — дочерние элементы действий

Направление раскрытия

Компонент поддерживает четыре направления:

  • up — вверх (по умолчанию)
  • down — вниз
  • left — влево
  • right — вправо
<q-fab direction="left" icon="add">
  <q-fab-action icon="edit" />
  <q-fab-action icon="delete" />
</q-fab>

Выбор направления зависит от расположения FAB на экране и доступного пространства.

Управление состоянием (v-model)

QFab может контролироваться программно через v-model:

<q-fab v-model="opened" icon="menu">
  <q-fab-action icon="mail" />
</q-fab>
export default {
  data () {
    return {
      opened: false
    }
  }
}

Поведение:

  • true — раскрыт
  • false — свернут

Это позволяет синхронизировать состояние с логикой приложения.

Обработка событий

Компонент поддерживает события:

  • @show — при раскрытии
  • @hide — при закрытии
<q-fab @show="onOpen" @hide="onClose">
  <q-fab-action icon="mail" />
</q-fab>

Кастомизация внешнего вида

Размер

<q-fab size="lg" icon="add">
  <q-fab-action size="sm" icon="edit" />
</q-fab>

Возможные значения:

  • xs, sm, md, lg, xl

Цвета

<q-fab color="accent" text-color="white">
  <q-fab-action color="orange" icon="star" />
</q-fab>

Плоский и контурный стиль

<q-fab flat icon="add">
  <q-fab-action outline icon="edit" />
</q-fab>

Анимации и поведение

Плавное раскрытие

Quasar автоматически применяет анимации, но их можно контролировать:

<q-fab
  transition-show="scale"
  transition-hide="scale"
>

Другие варианты:

  • jump-down
  • fade
  • slide-up

Автоматическое закрытие после выбора

<q-fab persistent>

По умолчанию:

  • после клика по q-fab-action меню закрывается

С persistent:

  • остается открытым

Подписи (labels)

Каждому действию можно добавить текстовую подпись:

<q-fab icon="menu">
  <q-fab-action icon="mail" label="Почта" />
  <q-fab-action icon="alarm" label="Будильник" />
</q-fab>

Позиция подписи

<q-fab label-position="left">

Иконки и переключение состояния

Можно изменять иконку при раскрытии:

<q-fab
  icon="menu"
  active-icon="close"
>

Позиционирование на экране

Обычно QFab размещается с помощью класса позиционирования:

<div class="fixed-bottom-right q-pa-md">
  <q-fab icon="add">
    <q-fab-action icon="edit" />
  </q-fab>
</div>

Популярные позиции:

  • fixed-bottom-right
  • fixed-bottom-left
  • fixed-top-right
  • fixed-top-left

Интеграция с layout

В рамках QLayout FAB часто размещается поверх страниц:

<q-page>
  <div class="fixed-bottom-right q-pa-md">
    <q-fab icon="add">
      <q-fab-action icon="edit" />
    </q-fab>
  </div>
</q-page>

Расширенные сценарии

Условное отображение действий

<q-fab icon="menu">
  <q-fab-action v-if="isAdmin" icon="settings" />
  <q-fab-action icon="help" />
</q-fab>

Динамическое создание действий

<q-fab icon="menu">
  <q-fab-action
    v-for="item in actions"
    :key="item.icon"
    :icon="item.icon"
    :label="item.label"
  />
</q-fab>

Вложенные FAB (иерархия действий)

<q-fab icon="menu">
  <q-fab-action icon="folder">
    <q-fab>
      <q-fab-action icon="file" />
    </q-fab>
  </q-fab-action>
</q-fab>

Доступность (Accessibility)

  • Использование aria-label для кнопок
  • Подписи (label) улучшают понимание
  • Контраст цветов должен соответствовать стандартам
<q-fab icon="add" aria-label="Добавить элемент">

Работа с мобильными интерфейсами

QFab особенно эффективен в мобильных интерфейсах:

  • занимает минимум места
  • доступен большим пальцем
  • соответствует Material Design

Часто используется для:

  • создания нового элемента
  • открытия меню действий
  • быстрого доступа к ключевым функциям

Производительность и UX

Рекомендации:

  • не перегружать большим количеством q-fab-action
  • использовать до 5–6 действий
  • избегать вложенности без необходимости
  • размещать в логически ожидаемом месте

Сравнение с альтернативами

Компонент Назначение
QFab Группа быстрых действий
QBtn Одиночное действие
QMenu Контекстное меню
QSpeedDial (аналог) Похожая концепция в других UI

Частые ошибки

1. Перекрытие важного контента

  • FAB не должен закрывать критические элементы

2. Слишком много действий

  • снижает удобство

3. Отсутствие подписей

  • ухудшает UX

4. Неправильное направление

  • действия выходят за пределы экрана

Практический пример

<template>
  <div class="fixed-bottom-right q-pa-md">
    <q-fab
      v-model="fab"
      icon="add"
      active-icon="close"
      color="primary"
      direction="up"
    >
      <q-fab-action
        color="secondary"
        icon="edit"
        label="Редактировать"
        @click="editItem"
      />

      <q-fab-action
        color="secondary"
        icon="delete"
        label="Удалить"
        @click="deleteItem"
      />

      <q-fab-action
        color="secondary"
        icon="share"
        label="Поделиться"
        @click="shareItem"
      />
    </q-fab>
  </div>
</template>

<script>
export default {
  data () {
    return {
      fab: false
    }
  },
  methods: {
    editItem () {},
    deleteItem () {},
    shareItem () {}
  }
}
</script>

Поведенческие паттерны

  • Основная кнопка — всегда самое важное действие
  • Дополнительные — второстепенные
  • Раскрытие должно быть предсказуемым
  • Закрытие — быстрым и очевидным

Гибкость и расширяемость

QFab легко адаптируется под:

  • админ-панели
  • мобильные приложения
  • SPA-интерфейсы
  • dashboards

Благодаря тесной интеграции с Vue и системой компонентов Quasar, его можно комбинировать с любыми реактивными данными и состояниями.

Оглавление