Сегментированный контрол

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

Кит рисует состояние, но не выдумывает его. Без ролей aria-checked невалиден, а с клавиатуры до контрола не добраться.

<div class="inst-segmented" role="radiogroup" aria-label="Плотность">
  <button type="button" role="radio" aria-checked="true"  tabindex="0">Плотно</button>
  <button type="button" role="radio" aria-checked="false" tabindex="-1">Обычно</button>
</div>

Когда использовать

Варианты со своим адресом

Значение, у которого есть адрес, не перестаёт быть значением. Окно истории переживает перезагрузку, ложится в закладку и передаётся другому человеку целиком — ссылкой; выбором одного из равных оно от этого быть не перестало. Носитель состояния тогда aria-current="page", а не aria-checked.

<nav class="inst-segmented" aria-label="Окно истории">
  <a href="?window=day" aria-current="page">24 часа</a>
  <a href="?window=week">7 дней</a>
  <a href="?window=month">30 дней</a>
</nav>

Отличать от вкладок просто: вкладки меняют раздел (другое содержимое страницы), сегментированный — параметр того же содержимого. Одиннадцать мониторов остаются теми же одиннадцатью, меняется только окно, за которое их показывают.

Состояния

<div class="inst-segmented" role="radiogroup" aria-label="Выбрано первое">
  <button type="button" role="radio" aria-checked="true">Выбрано</button>
  <button type="button" role="radio" aria-checked="false">Обычное</button>
  <button type="button" role="radio" aria-checked="false" disabled>Недоступно</button>
</div>

Выбранный несёт три признака: поверхность, начертание и рамку. Один тон различать не требуется.

JS

Подключите модуль один раз на страницу — инициализировать компоненты по отдельности не нужно, кит работает делегированием и видит узлы, пришедшие позже.

<script type="module" src="src/kit.js"></script>

Что делает кит

Примеры на этой странице живые: войдите в контрол Tab, дальше ← и →. Мышью — тоже.

Контрол объявлен как role="radiogroup", и кит выполняет обещание: ← и → между вариантами, Home и End, один Tab на всю группу. Отметка aria-checked следует за фокусом и переносится щелчком — сразу на всю группу, потому что два отмеченных варианта это состояние, из которого разметка уже не выйдет.

События

inst:select всплывает с выбранного варианта.

group.addEventListener('inst:select', (e) => {
  document.documentElement.dataset.density = e.detail.value;
});

Опции

<div class="inst-segmented" role="radiogroup" aria-label="Плотность">
  <button type="button" role="radio" aria-checked="true"  data-value="sm" tabindex="0">Плотно</button>
  <button type="button" role="radio" aria-checked="false" data-value="md" tabindex="-1">Обычно</button>
</div>

Композиции

В шапке экрана

<div class="inst-page-header">
  <div class="inst-page-header-main">
    <h2 class="inst-page-title">Прогоны</h2>
  </div>
  <div class="inst-page-actions">
    <div class="inst-segmented" role="radiogroup" aria-label="Период">
      <button type="button" role="radio" aria-checked="false">День</button>
      <button type="button" role="radio" aria-checked="true">Неделя</button>
      <button type="button" role="radio" aria-checked="false">Месяц</button>
    </div>
  </div>
</div>

Правила

Доступность

API

Связанное

Группа кнопок Кнопка Вкладки Селект Плотность