Группы кнопок v-btn-group

v-btn-group — это компонент библиотеки Vuetify, предназначенный для объединения кнопок (v-btn) в логические группы. Он обеспечивает единообразное расположение, выравнивание и визуальную связность кнопок, что особенно важно при создании панелей инструментов, фильтров или переключателей.

Базовая структура выглядит следующим образом:

<v-btn-group>
  <v-btn color="primary">Кнопка 1</v-btn>
  <v-btn color="primary">Кнопка 2</v-btn>
  <v-btn color="primary">Кнопка 3</v-btn>
</v-btn-group>

Здесь все кнопки объединены в одну визуальную группу, что позволяет избежать разрыва между ними и применить единый стиль оформления.

Свойства v-btn-group

1. color Устанавливает основной цвет всех кнопок внутри группы. Если у кнопок внутри группы задан собственный цвет, он имеет приоритет.

<v-btn-group color="secondary">
  <v-btn>Да</v-btn>
  <v-btn>Нет</v-btn>
</v-btn-group>

2. outlined и text Эти булевы свойства позволяют менять стиль кнопок:

  • outlined — кнопки с контуром;
  • text — кнопки без фона, только текст.
<v-btn-group outlined>
  <v-btn>Влево</v-btn>
  <v-btn>Вправо</v-btn>
</v-btn-group>

3. rounded Управляет скруглением углов кнопок внутри группы. Можно использовать значения: rounded="lg", rounded="sm" или просто rounded для стандартного скругления.

<v-btn-group rounded="lg">
  <v-btn>Опция 1</v-btn>
  <v-btn>Опция 2</v-btn>
</v-btn-group>

4. vertical Вертикальное расположение кнопок вместо горизонтального. Очень полезно для боковых панелей или фильтров.

<v-btn-group vertical>
  <v-btn>Фильтр 1</v-btn>
  <v-btn>Фильтр 2</v-btn>
</v-btn-group>

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

v-btn-group можно использовать для создания взаимозависимых переключателей. Через v-model реализуется выбор одной активной кнопки из группы:

<v-btn-group v-model="selectedOption">
  <v-btn value="a">A</v-btn>
  <v-btn value="b">B</v-btn>
  <v-btn value="c">C</v-btn>
</v-btn-group>
export default {
  data() {
    return {
      selectedOption: 'a'
    }
  }
}

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

  • Кнопка с value соответствует значению v-model;
  • Изменение состояния кнопки автоматически обновляет selectedOption;
  • Для многовыборного режима используется массив и атрибут multiple.
<v-btn-group v-model="selectedOptions" multiple>
  <v-btn value="x">X</v-btn>
  <v-btn value="y">Y</v-btn>
  <v-btn value="z">Z</v-btn>
</v-btn-group>
export default {
  data() {
    return {
      selectedOptions: ['x']
    }
  }
}

Интеграция с иконками

В v-btn-group можно использовать кнопки с иконками для компактных панелей инструментов:

<v-btn-group>
  <v-btn icon>
    <v-icon>mdi-format-bold</v-icon>
  </v-btn>
  <v-btn icon>
    <v-icon>mdi-format-italic</v-icon>
  </v-btn>
  <v-btn icon>
    <v-icon>mdi-format-underline</v-icon>
  </v-btn>
</v-btn-group>

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

  • Использование icon делает кнопки квадратными и компактными;
  • Можно комбинировать с v-model для выбора активного состояния;
  • Поддерживается комбинация иконки и текста внутри одной кнопки.

Стилизация и кастомизация

v-btn-group позволяет применять классы и стили как к группе целиком, так и к отдельным кнопкам:

<v-btn-group class="my-btn-group" style="border: 1px solid #ccc;">
  <v-btn class="btn-left" color="primary">Левая</v-btn>
  <v-btn class="btn-middle" color="success">Средняя</v-btn>
  <v-btn class="btn-right" color="error">Правая</v-btn>
</v-btn-group>
  • Можно задавать отступы между кнопками через style или кастомные классы;
  • Визуальная согласованность сохраняется даже при различных цветах и размерах кнопок;
  • Для сложных панелей инструментов v-btn-group можно вкладывать в v-toolbar или v-card.

Советы по использованию

  • Использовать v-btn-group для визуального объединения кнопок, которые логически связаны;
  • Для мобильных интерфейсов предпочтительнее вертикальные группы;
  • Не смешивать сильно разные стили кнопок внутри одной группы — это нарушает единый визуальный стиль;
  • В сложных интерфейсах можно комбинировать несколько групп с разными цветовыми схемами.

v-btn-group обеспечивает не только эстетичное оформление кнопок, но и удобство управления состоянием через v-model, возможность вертикальной и горизонтальной компоновки, а также лёгкую интеграцию с иконками и текстовыми элементами.

Оглавление