Элементы

Переключатель вида

Ряд кнопок с общей границей для выбора одного из видов, например «Витрина» и «Каталог». Активная — чёрная.

toggle-group с версии 0.1.0 со скриптом

Примеры

Витрина и каталог

<div class="toggle-group" role="group" aria-label="Вид">
  <button class="toggle-group__item is-active" type="button" data-value="grid" aria-pressed="true">Витрина</button>
  <button class="toggle-group__item" type="button" data-value="list" aria-pressed="false">Каталог</button>
</div>

Три положения

<div class="toggle-group" role="group" aria-label="Период">
  <button class="toggle-group__item" type="button" data-value="day" aria-pressed="false">Сутки</button>
  <button class="toggle-group__item is-active" type="button" data-value="week" aria-pressed="true">Неделя</button>
  <button class="toggle-group__item" type="button" data-value="month" aria-pressed="false">Месяц</button>
</div>

Установка

bukatchuk-ui add toggle-group

Вместе с компонентом установятся: tokens, fonts, base, core.

Файлы

Файл	Назначение
`toggle-group.css`	стили
`toggle-group.js`	скрипт
`example.html`	образец разметки, в проект не копируется

Клавиши

Клавиша	Действие
`Enter / пробел`	выбрать вид