Переключаемые кнопки v-btn-toggle

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

<v-btn-toggle v-model="selected">
  <v-btn value="left">Лево</v-btn>
  <v-btn value="center">Центр</v-btn>
  <v-btn value="right">Право</v-btn>
</v-btn-toggle>

В этом примере v-model связывает выбранную кнопку с переменной selected. Значение кнопки определяется через атрибут value. При выборе кнопки переменная автоматически обновляется.

Одно- и многовыборные режимы

Одновыборный режим (по умолчанию) По умолчанию v-btn-toggle работает как радио-кнопки — можно выбрать только одну кнопку из группы.

<v-btn-toggle v-model="alignment">
  <v-btn value="left">Лево</v-btn>
  <v-btn value="center">Центр</v-btn>
  <v-btn value="right">Право</v-btn>
</v-btn-toggle>

Если необходимо разрешить множественный выбор, используется атрибут multiple. В этом случае v-model должен быть массивом:

<v-btn-toggle v-model="options" multiple>
  <v-btn value="bold">Жирный</v-btn>
  <v-btn value="italic">Курсив</v-btn>
  <v-btn value="underline">Подчеркнутый</v-btn>
</v-btn-toggle>

Теперь можно выбрать сразу несколько стилей текста, и переменная options будет содержать массив выбранных значений.

Стилизация и внешние свойства

v-btn-toggle поддерживает основные свойства Vuetify кнопок и дополнительные настройки:

  • mandatory — обязательный выбор. При включенном свойстве нельзя снять выбор полностью, всегда будет выбрана одна кнопка.
  • mandatory + multiple — не имеет смысла, так как множественный выбор позволяет оставить массив пустым.
  • rounded — скругленные углы кнопок.
  • density — управляет размером и плотностью кнопок (default, comfortable, compact).
  • variant — применяет один из стилей outlined, text, elevated, tonal к группе кнопок.

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

<v-btn-toggle v-model="alignment" variant="outlined" density="compact" rounded>
  <v-btn value="left">Лево</v-btn>
  <v-btn value="center">Центр</v-btn>
  <v-btn value="right">Право</v-btn>
</v-btn-toggle>

Горизонтальная и вертикальная ориентация

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

<v-btn-toggle v-model="alignment" direction="vertical">
  <v-btn value="top">Вверх</v-btn>
  <v-btn value="middle">Центр</v-btn>
  <v-btn value="bottom">Вниз</v-btn>
</v-btn-toggle>

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

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

v-btn-toggle полностью интегрируется с v-model, что позволяет управлять выбором через переменные в компоненте.

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

const alignment = ref('center')

// Программная смена выбора
function selectLeft() {
  alignment.value = 'left'
}
</script>

<v-btn @click="selectLeft">Выбрать Лево</v-btn>
<v-btn-toggle v-model="alignment">
  <v-btn value="left">Лево</v-btn>
  <v-btn value="center">Центр</v-btn>
  <v-btn value="right">Право</v-btn>
</v-btn-toggle>

После клика на внешнюю кнопку состояние переключателя обновится автоматически, что удобно для реактивного интерфейса.

Работа с динамическими кнопками

v-btn-toggle позволяет создавать кнопки из массивов данных через v-for, сохраняя полную функциональность выбора:

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

const options = ref(['Лево', 'Центр', 'Право'])
const selected = ref('Центр')
</script>

<v-btn-toggle v-model="selected">
  <v-btn v-for="option in options" :key="option" :value="option">
    {{ option }}
  </v-btn>
</v-btn-toggle>

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

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

v-btn-toggle может использоваться внутри v-form как интерактивный элемент для выбора значения. Атрибуты rules позволяют проверять состояние:

<v-form ref="form" v-model="valid">
  <v-btn-toggle v-model="alignment" :mandatory="true" :rules="[v => !!v || 'Выберите вариант']">
    <v-btn value="left">Лево</v-btn>
    <v-btn value="center">Центр</v-btn>
    <v-btn value="right">Право</v-btn>
  </v-btn-toggle>
</v-form>

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

События и реактивность

v-btn-toggle поддерживает стандартные события Vue:

  • @update:model-value — срабатывает при изменении выбранного значения.
  • @change — альтернатива для отслеживания изменений.
<v-btn-toggle v-model="alignment" @update:model-value="onChange">
  <v-btn value="left">Лево</v-btn>
  <v-btn value="center">Центр</v-btn>
  <v-btn value="right">Право</v-btn>
</v-btn-toggle>

<script setup>
function onChange(value) {
  console.log('Выбрано:', value)
}
</script>

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

Поддержка темизации и кастомного оформления

v-btn-toggle наследует тему Vuetify и поддерживает цветовые схемы через свойства color и theme.

<v-btn-toggle v-model="alignment" color="primary" variant="tonal">
  <v-btn value="left">Лево</v-btn>
  <v-btn value="center">Центр</v-btn>
  <v-btn value="right">Право</v-btn>
</v-btn-toggle>

Цвет применяется ко всей группе и отдельным кнопкам, обеспечивая единый стиль интерфейса без дополнительной кастомизации CSS.

Совмещение с иконками и текстом

v-btn-toggle поддерживает кнопки с иконками, что особенно полезно для панелей инструментов:

<v-btn-toggle v-model="selectedIcon">
  <v-btn value="bold">
    <v-icon>mdi-format-bold</v-icon>
  </v-btn>
  <v-btn value="italic">
    <v-icon>mdi-format-italic</v-icon>
  </v-btn>
  <v-btn value="underline">
    <v-icon>mdi-format-underline</v-icon>
  </v-btn>
</v-btn-toggle>

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

Эти возможности делают v-btn-toggle гибким инструментом для создания интерактивных, реактивных и визуально согласованных элементов управления в приложениях на Vuetify.

Оглавление