QToggle переключатели

QToggle — это компонент Quasar Framework, предназначенный для реализации двоичных переключателей состояния «включено/выключено». Он широко используется в интерфейсах для управления настройками, опциями и функционалом, требующим простого выбора между двумя состояниями.

Основные свойства QToggle

v-model Связывает состояние переключателя с переменной в компоненте Vue. Тип значения — Boolean.
```
<q-toggle v-model="isActive" label="Активен"></q-toggle>
```
В этом примере переменная isActive автоматически обновляется при изменении состояния переключателя.
label Текстовая метка, отображаемая рядом с переключателем. Поддерживает строки и шаблонные литералы.
```
<q-toggle label="Включить уведомления" v-model="notificationsEnabled" />
```
color Позволяет задать основной цвет переключателя. Используется любая цветовая палитра Quasar.
```
<q-toggle color="primary" v-model="darkMode" label="Темная тема" />
```
disable / readonly
- disable полностью блокирует компонент, не позволяя взаимодействовать.
- readonly позволяет видеть текущее состояние, но запрещает изменять его пользователю.
```
<q-toggle v-model="option" label="Опция заблокирована" disable />
```
dense Уменьшает высоту компонента, что полезно для компактного интерфейса.
```
<q-toggle dense label="Компактный режим" v-model="compact" />
```

Работа с событиями

QToggle поддерживает стандартные события Vue, а также специфические для Quasar:

@input Срабатывает при изменении состояния переключателя. Возвращает новое значение true/false.

<q-toggle v-model="soundEnabled" @input="onToggleSound" label="Звук" />

methods: {
  onToggleSound(value) {
    console.log('Состояние звука:', value);
  }
}

@update:model-value Более современный способ отслеживания изменений через v-model.
```
<q-toggle :model-value="autoSave" @update:model-value="val => autoSave = val" label="Автосохранение" />
```

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

QToggle можно настраивать визуально с помощью свойств Quasar:

track-color и thumb-color Позволяют задать цвета трека и ползунка отдельно.
```
<q-toggle v-model="wifi" label="Wi-Fi" track-color="grey-3" thumb-color="green" />
```
dense, outlined, square Модификаторы для компактного, контурного или квадратного стиля переключателя.
```
<q-toggle dense outlined square label="Стильный" v-model="styleOption" />
```
label-position Определяет расположение текста: left или right. По умолчанию текст справа.
```
<q-toggle label="Влево" label-position="left" v-model="leftLabel" />
```

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

QToggle полностью совместим с компонентами формы Quasar. Он корректно работает с QForm и валидацией.

<q-form @submit="submitForm">
  <q-toggle v-model="termsAccepted" label="Принять условия" :rules="[val => val || 'Необходимо принять условия']" />
  <q-btn type="submit" label="Отправить" />
</q-form>

При использовании rules QToggle проверяет условие, а форма не отправляется до выполнения требования.

Примеры сложного использования

1. Динамическое изменение цвета и текста в зависимости от состояния:

<q-toggle 
  v-model="notifications" 
  :label="notifications ? 'Уведомления включены' : 'Уведомления отключены'" 
  :color="notifications ? 'green' : 'red'" 
/>

2. Группировка переключателей: Можно комбинировать несколько QToggle для управления несколькими параметрами:

<div>
  <q-toggle v-model="settings.sound" label="Звук" />
  <q-toggle v-model="settings.vibration" label="Вибрация" />
  <q-toggle v-model="settings.darkMode" label="Темная тема" />
</div>

При необходимости все изменения можно обрабатывать в одной функции.

Производительность и рекомендации

Использовать dense и outlined для интерфейсов с большим количеством опций.
Применять disable или readonly при асинхронной загрузке данных.
Для больших форм лучше применять v-model с объектом состояния вместо множества отдельных переменных, чтобы управлять всеми переключателями централизованно.

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