SwitchButton

Кнопка-перемикач з активним і неактивним станами — ідеальна для фільтрів і перемикання режимів перегляду.

Живе демо

Стани:
Перемикач: Неактивний
Вигляд: Список
Архів: Приховано

Стани

Використання

Базове

<template>
  <orio-switch-button v-model="isEnabled">
    Enable Feature
  </orio-switch-button>
</template>

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

const isEnabled = ref(false)
</script>

Кнопки-фільтри

<template>
  <div class="filters">
    <orio-switch-button v-model="showCompleted">
      Completed
    </orio-switch-button>
    <orio-switch-button v-model="showPending">
      Pending
    </orio-switch-button>
    <orio-switch-button v-model="showCancelled">
      Cancelled
    </orio-switch-button>
  </div>
</template>

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

const showCompleted = ref(true)
const showPending = ref(true)
const showCancelled = ref(false)
</script>

Вимкнений стан

<orio-switch-button v-model="option" :disabled="true">
  Locked Option
</orio-switch-button>

Пропси

Проп	Тип	За замовчуванням	Опис
modelValue	boolean	false	Активний стан (v-model)
disabled	boolean	false	Вимикає взаємодію з кнопкою

Події

Подія	Дані	Опис
update:modelValue	boolean	Генерується під час перемикання кнопки

Слоти

Слот	Опис
default	Текст/вміст підпису кнопки

Підтримка клавіатури

• Space або Enter — перемкнути стан кнопки
• Tab — перехід між кнопками-перемикачами

Доступність

Внутрішня <button> має aria-pressed, що віддзеркалює modelValue, тож скрінрідери озвучують стан перемикача. Передавайте aria-pressed самі лише тоді, коли треба сказати те, чого не виразити булевим значенням (aria-pressed="mixed"); це перекриває значення за замовчуванням.

Дайте кнопці доступну назву: видимий label, текст у слоті за замовчуванням або aria-label, коли в слоті лише іконка.

Стилізація

Кнопка-перемикач використовує такі CSS-змінні:

--color-surface         /* Inactive background */
--color-muted           /* Inactive text color */
--color-border          /* Default border */
--color-accent          /* Active text and border */
--color-accent-soft     /* Active background */
--border-radius-md      /* Border radius */

Сценарії використання

• Фільтри: перемикання видимості окремих категорій вмісту
• Режими перегляду: перемикання між макетами (сітка/список, компактний/детальний)
• Опції: увімкнення/вимкнення функцій чи налаштувань
• Множинний вибір: дозволяє користувачам вибрати кілька незалежних опцій