QBtnGroup группировка кнопок

QBtnGroup — компонент библиотеки Quasar, предназначенный для логической и визуальной группировки кнопок. Он объединяет несколько элементов QBtn в единый интерфейсный блок, обеспечивая согласованное поведение, единый стиль и компактное размещение.

Группировка используется в случаях, когда кнопки выполняют взаимосвязанные действия:

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

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

Простейший пример группировки:

<template>
  <q-btn-group>
    <q-btn label="Лево" />
    <q-btn label="Центр" />
    <q-btn label="Право" />
  </q-btn-group>
</template>

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

  • кнопки автоматически «склеиваются» в единый блок
  • убираются промежутки между элементами
  • крайние кнопки получают скругление, внутренние — нет

Управление стилями группы

QBtnGroup передаёт часть визуальных параметров всем вложенным кнопкам.

Цвет (color)

<q-btn-group color="primary">
  <q-btn label="A" />
  <q-btn label="B" />
  <q-btn label="C" />
</q-btn-group>

Все кнопки наследуют цвет, если у них не указан собственный.

Текстовый цвет (text-color)

<q-btn-group color="dark" text-color="white">
  <q-btn label="Темный" />
  <q-btn label="Светлый" />
</q-btn-group>

Режимы отображения

  • unelevated — без тени
  • outline — контурный стиль
  • flat — плоские кнопки
<q-btn-group outline>
  <q-btn label="1" />
  <q-btn label="2" />
</q-btn-group>

Размеры

Размер задаётся для всей группы:

<q-btn-group size="lg">
  <q-btn label="Большая" />
  <q-btn label="Кнопка" />
</q-btn-group>

Поддерживаемые значения:

  • sm
  • md
  • lg
  • xl

Вертикальная группировка

По умолчанию кнопки располагаются горизонтально. Для вертикального расположения используется свойство vertical:

<q-btn-group vertical>
  <q-btn label="Вверх" />
  <q-btn label="Середина" />
  <q-btn label="Вниз" />
</q-btn-group>

Применяется для:

  • боковых панелей
  • меню инструментов
  • мобильных интерфейсов

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

QBtnGroup часто используется вместе с состоянием выбора.

Пример с одним выбранным элементом:

<template>
  <q-btn-group>
    <q-btn
      v-for="option in options"
      :key="option.value"
      :label="option.label"
      :outline="model !== option.value"
      :color="model === option.value ? 'primary' : 'grey'"
      @click="model = option.value"
    />
  </q-btn-group>
</template>

<script setup>
import { ref } from 'vue'

const model = ref('left')

const options = [
  { label: 'Лево', value: 'left' },
  { label: 'Центр', value: 'center' },
  { label: 'Право', value: 'right' }
]
</script>

Суть:

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

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

Для более декларативного подхода применяется компонент QBtnToggle, который internally использует группировку:

<q-btn-toggle
  v-model="model"
  :options="[
    { label: 'Лево', value: 'left' },
    { label: 'Центр', value: 'center' },
    { label: 'Право', value: 'right' }
  ]"
/>

QBtnGroup в этом случае служит базовым строительным блоком.

Добавление иконок

<q-btn-group>
  <q-btn icon="format_align_left" />
  <q-btn icon="format_align_center" />
  <q-btn icon="format_align_right" />
</q-btn-group>

Комбинация текста и иконок:

<q-btn-group>
  <q-btn icon="save" label="Сохранить" />
  <q-btn icon="delete" label="Удалить" />
</q-btn-group>

Разделение логики и визуала

Несмотря на визуальную связку, каждая кнопка остаётся самостоятельным компонентом:

  • имеет собственные обработчики событий
  • может быть отключена (disable)
  • может иметь индивидуальные стили
<q-btn-group>
  <q-btn label="Активна" />
  <q-btn label="Отключена" disable />
</q-btn-group>

Вложенность и комбинирование

Допускается комбинирование с другими компонентами:

<q-btn-group>
  <q-btn label="Файл" />
  <q-btn-dropdown label="Опции">
    <q-list>
      <q-item clickable>Настройки</q-item>
      <q-item clickable>Выход</q-item>
    </q-list>
  </q-btn-dropdown>
</q-btn-group>

Поведение границ и скругления

QBtnGroup автоматически управляет:

  • скруглением крайних кнопок
  • удалением внутренних границ
  • объединением теней

При необходимости можно переопределить стили:

<q-btn-group class="custom-group">
  <q-btn label="1" />
  <q-btn label="2" />
</q-btn-group>
.custom-group .q-btn {
  border-radius: 0;
}

Кнопки внутри группы могут выступать как ссылки:

<q-btn-group>
  <q-btn to="/home" label="Главная" />
  <q-btn to="/about" label="О нас" />
</q-btn-group>

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

Группа автоматически адаптируется:

  • поддерживает flex-layout
  • может растягиваться на ширину контейнера
<q-btn-group spread>
  <q-btn label="1" />
  <q-btn label="2" />
  <q-btn label="3" />
</q-btn-group>

spread — равномерно распределяет кнопки по ширине.

Практические сценарии применения

1. Панель инструментов

<q-btn-group>
  <q-btn icon="undo" />
  <q-btn icon="redo" />
  <q-btn icon="save" />
</q-btn-group>

2. Переключение режимов

<q-btn-group>
  <q-btn label="Список" />
  <q-btn label="Сетка" />
</q-btn-group>

3. Фильтры

<q-btn-group>
  <q-btn label="Все" />
  <q-btn label="Активные" />
  <q-btn label="Завершённые" />
</q-btn-group>

Ограничения и особенности

  • QBtnGroup не реализует бизнес-логику выбора

  • не хранит состояние

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

  • для сложных сценариев рекомендуется сочетание с:

    • v-model
    • QBtnToggle
    • Vue state management

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

Компонент лёгкий:

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

Расширенные приёмы

Динамическое создание кнопок:

<q-btn-group>
  <q-btn
    v-for="item in items"
    :key="item.id"
    :label="item.label"
  />
</q-btn-group>

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

<q-btn-group v-if="isVisible">
  <q-btn label="Да" />
  <q-btn label="Нет" />
</q-btn-group>

Смешанные стили:

<q-btn-group>
  <q-btn flat label="Flat" />
  <q-btn outline label="Outline" />
  <q-btn unelevated label="Unelevated" />
</q-btn-group>

Роль в экосистеме Quasar

QBtnGroup является:

  • базовым строительным элементом интерфейса
  • частью композиции более сложных компонентов
  • инструментом унификации UI

Использование группировки повышает:

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