QBtnDropdown выпадающие меню

QBtnDropdown — это компонент из Quasar Framework, объединяющий кнопку (QBtn) и выпадающее меню (QMenu) в единую сущность. Он используется для реализации компактных интерфейсных решений, где действия сгруппированы и доступны по клику.

Компонент особенно полезен в ситуациях:

  • когда необходимо скрыть второстепенные действия
  • при создании панелей инструментов
  • для реализации контекстных меню
  • в адаптивных интерфейсах (mobile-first)

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

Минимальная реализация включает кнопку с выпадающим списком:

<q-btn-dropdown label="Опции">
  <q-list>
    <q-item clickable v-close-popup>
      <q-item-section>Действие 1</q-item-section>
    </q-item>
    <q-item clickable v-close-popup>
      <q-item-section>Действие 2</q-item-section>
    </q-item>
  </q-list>
</q-btn-dropdown>

Ключевые моменты:

  • label — текст кнопки
  • q-list — контейнер элементов меню
  • q-item — отдельный пункт
  • v-close-popup — директива для автоматического закрытия меню

Управление состоянием

Компонент поддерживает как внутреннее, так и внешнее управление состоянием.

Через v-model

<q-btn-dropdown v-model="opened" label="Меню">
  ...
</q-btn-dropdown>
export default {
  data() {
    return {
      opened: false
    }
  }
}

Особенности:

  • true — меню открыто
  • false — меню закрыто
  • удобно для синхронизации с другими элементами интерфейса

Кастомизация кнопки

QBtnDropdown наследует свойства QBtn.

Основные параметры:

<q-btn-dropdown
  label="Настройки"
  color="primary"
  icon="settings"
  flat
  rounded
/>

Варианты оформления:

  • flat, outline, unelevated
  • rounded, dense
  • color, text-color

Иконки и слот кнопки

Можно полностью переопределить содержимое кнопки через слот label:

<q-btn-dropdown>
  <template v-slot:label>
    <q-icon name="menu" />
    Меню
  </template>

  <q-list>
    ...
  </q-list>
</q-btn-dropdown>

Позиционирование меню

Меню (QMenu внутри) поддерживает гибкое позиционирование.

Основные параметры:

<q-btn-dropdown
  label="Меню"
  anchor="bottom right"
  self="top right"
/>

Объяснение:

  • anchor — точка привязки к кнопке
  • self — точка меню

Разделители и группировка

<q-list>
  <q-item clickable>
    <q-item-section>Профиль</q-item-section>
  </q-item>

  <q-separator />

  <q-item clickable>
    <q-item-section>Выход</q-item-section>
  </q-item>
</q-list>

Возможности:

  • q-separator — визуальное разделение
  • вложенные группы через дополнительные q-list

Иконки внутри пунктов

<q-item clickable>
  <q-item-section avatar>
    <q-icon name="person" />
  </q-item-section>
  <q-item-section>Профиль</q-item-section>
</q-item>

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

Событие открытия/закрытия:

<q-btn-dropdown @show="onShow" @hide="onHide">
methods: {
  onShow() {
    console.log('Открыто')
  },
  onHide() {
    console.log('Закрыто')
  }
}

Ленивый рендеринг

Меню создаётся только при открытии:

<q-btn-dropdown lazy>

Преимущества:

  • уменьшение нагрузки
  • ускорение первоначального рендера

Использование с роутингом

<q-item clickable to="/profile">
  <q-item-section>Профиль</q-item-section>
</q-item>

Работает через интеграцию с Vue Router.

Асинхронные действия

<q-item clickable @click="loadData">
  <q-item-section>Загрузить</q-item-section>
</q-item>
methods: {
  async loadData() {
    await fetchData()
  }
}

Отключение и блокировка

<q-btn-dropdown disable label="Недоступно" />

или

<q-item clickable disable>
  <q-item-section>Недоступный пункт</q-item-section>
</q-item>

Вложенные меню

<q-item clickable>
  <q-item-section>Дополнительно</q-item-section>

  <q-menu>
    <q-list>
      <q-item clickable>
        <q-item-section>Подпункт</q-item-section>
      </q-item>
    </q-list>
  </q-menu>
</q-item>

Кастомный контент

Меню может содержать любые компоненты:

<q-btn-dropdown label="Фильтр">
  <div class="q-pa-md">
    <q-input label="Поиск" />
    <q-btn label="Применить" />
  </div>
</q-btn-dropdown>

Поведение при клике

Автозакрытие:

  • v-close-popup — стандартное решение
  • можно управлять вручную через v-model

Использование в таблицах и тулбарах

<q-toolbar>
  <q-btn-dropdown icon="more_vert" flat>
    <q-list>
      <q-item clickable>
        <q-item-section>Экспорт</q-item-section>
      </q-item>
    </q-list>
  </q-btn-dropdown>
</q-toolbar>

Адаптивность

Компонент корректно работает на мобильных устройствах:

  • поддержка тач-событий
  • автоматическая корректировка позиции
  • интеграция с QMenu адаптивным поведением

Оптимизация и производительность

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

  • использовать lazy
  • избегать тяжёлых компонентов внутри меню
  • минимизировать количество реактивных зависимостей

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

Отсутствие v-close-popup:

  • меню не закрывается после выбора

Сложная вложенность:

  • ухудшение UX

Использование без q-list:

  • теряется единый стиль

Практические сценарии

Меню пользователя

<q-btn-dropdown icon="account_circle" flat>
  <q-list>
    <q-item clickable>
      <q-item-section>Профиль</q-item-section>
    </q-item>
    <q-item clickable>
      <q-item-section>Выход</q-item-section>
    </q-item>
  </q-list>
</q-btn-dropdown>

Контекстное меню действий

<q-btn-dropdown label="Действия" color="secondary">
  <q-list>
    <q-item clickable>
      <q-item-section>Редактировать</q-item-section>
    </q-item>
    <q-item clickable>
      <q-item-section>Удалить</q-item-section>
    </q-item>
  </q-list>
</q-btn-dropdown>

Расширенные возможности

  • интеграция с QTooltip
  • кастомные анимации через transition-show / transition-hide
  • управление через refs:
this.$refs.dropdown.show()
this.$refs.dropdown.hide()

Архитектурные особенности

QBtnDropdown — это обёртка над:

  • QBtn
  • QMenu

Это означает:

  • полная совместимость с API обоих компонентов
  • возможность тонкой настройки поведения
  • повторное использование логики меню

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

Компонент Назначение
QBtnDropdown Кнопка + меню
QMenu Универсальное меню
QSelect Выбор значения

Рекомендации по использованию

  • использовать для вторичных действий
  • не перегружать большим количеством пунктов
  • соблюдать визуальную иерархию
  • применять иконки для ускорения восприятия

Взаимодействие с другими компонентами

Часто используется совместно с:

  • QToolbar
  • QTable
  • QCard
  • QLayout

Это позволяет создавать гибкие и масштабируемые интерфейсы.

Оглавление