Вкладки

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

<nav class="inst-tabs" aria-label="Разделы прогонов">
  <a class="inst-tab" href="/runs/active" aria-current="page">Активные</a>
  <a class="inst-tab" href="/runs/history">История</a>
</nav>

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

Варианты

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

Оформление ловит оба: селектор кита реагирует и на [aria-current]:not([aria-current="false"]), и на [aria-selected="true"]. Поэтому вопрос «какой класс поставить» не возникает — возникает вопрос «какая разметка правдива».

Настоящие вкладки

role="tablist" ставится только если вкладки настоящие. Роль обещает скринридеру стрелочную навигацию и связь с панелью; необеспеченное обещание хуже отсутствующего.

<div class="inst-tabs" role="tablist" aria-label="Свойства объекта">
  <button class="inst-tab" type="button" role="tab" id="t-geom"
          aria-selected="true" aria-controls="p-geom" tabindex="0">Геометрия</button>
  <button class="inst-tab" type="button" role="tab" id="t-mat"
          aria-selected="false" aria-controls="p-mat" tabindex="-1">Материал</button>
  <button class="inst-tab" type="button" role="tab" id="t-phys"
          aria-selected="false" aria-controls="p-phys" tabindex="-1">Физика</button>
</div>
<div id="p-geom" role="tabpanel" aria-labelledby="t-geom" tabindex="0">Вершин 12 480, полигонов 6 240.</div>
<div id="p-mat" role="tabpanel" aria-labelledby="t-mat" tabindex="0" hidden>Стандартный PBR, две текстуры.</div>
<div id="p-phys" role="tabpanel" aria-labelledby="t-phys" tabindex="0" hidden>Выпуклая оболочка, масса 4,2 кг.</div>

Пример живой: войдите Tab и нажмите ← или →. Отметка переносится вместе с фокусом, Home и End работают, перебор идёт по кругу.

Стрелки, Home, End и бегущий tabindex выполняет kit.js. Показать нужную панель — приложение: какая панель за какой вкладкой, кит не знает.

Состояния

<nav class="inst-tabs" aria-label="Пример активной вкладки">
  <a class="inst-tab" href="#" aria-current="page">Активная</a>
  <a class="inst-tab" href="#">Обычная</a>
  <a class="inst-tab" href="#">Ещё одна</a>
</nav>

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

JS

Подключите модуль один раз на страницу.

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

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

Пример в разделе «Настоящие вкладки» живой: ←, →, Home, End, перебор по кругу.

Полосу объявляет role="tablist", и кит выполняет контракт этой роли: ← и → между вкладками, Home, End, перебор по кругу, один Tab на всю полосу. aria-selected переносится и стрелкой, и щелчком.

События

inst:select всплывает с выбранной вкладки, detail — { value }: data-value, если он есть, иначе подпись.

tabs.addEventListener('inst:select', (e) => {
  for (const panel of panels) {
    panel.hidden = panel.id !== e.detail.value;
  }
});

Что остаётся приложению

Показать нужную панель и спрятать остальные. Какая панель за какой вкладкой, знает только приложение — кит видит разметку, а не смысл.

Композиции

С иконкой и счётчиком

<nav class="inst-tabs" aria-label="Пример со счётчиком">
  <a class="inst-tab" href="#" aria-current="page">
    <svg class="inst-icon" aria-hidden="true"><use href="#i-list"/></svg>Очередь
    <span class="inst-badge">7</span></a>
  <a class="inst-tab" href="#">История</a>
</nav>

Зазор внутри вкладки — --space-3, между вкладками — --space-6: расстояние между соседями обязано быть заметно больше, чем внутри одной, иначе иконка следующей читается как часть предыдущей.

Правила

Доступность

API

Связанное

Навигация Крошки Сегментированный контрол Шапка экрана Секция