К содержанию

Навигация

Главное

Содержание

Вкладка (совместимость)

sf-tab переключает секции содержимого по списку пунктов ul, у каждого из которых два представления — обычное и активное. Компонент нужен для сохранения такой разметки; в новом интерфейсе берите вкладки: у них готовые виды и размеры.

Пример

Разметка

Минимальную разметку показывает пример выше. Части вложены так: sf-tab → <nav> → <ul> → пункты <li>, и рядом с <nav> — контейнер sf-tab-content с секциями <section>.

  • <nav>, <ul> и <li> стоят прямыми потомками: CSS и скрипт находят их по пути .sf-tab > nav > ul > li. Пункт связывается с секцией по порядку, так что пунктов и секций поровну.
  • Пункт <li> — единственный интерактивный элемент вкладки и получает aria-label с её названием. Внутри — два представления: sf-tab-inactive и sf-tab-active с aria-hidden="true". CSS показывает одно из них по классу active на пункте; кнопок и ссылок внутри не ставьте.
  • Компонент не задаёт цветов: оба представления оформляют утилиты, как в примере.

Состояния

Активна

Активную вкладку при загрузке задаёт атрибут data-active на корне — номер пункта с нуля — или класс active на пункте либо секции. Без них открыта первая вкладка. Скрипт держит data-active равным открытой вкладке, а смена атрибута переключает её.

Недоступна

aria-disabled="true" или класс disabled на пункте запрещают его выбирать: клик и клавиатура его пропускают, а если на него указывает data-active, открывается первая доступная вкладка. Приглушает такой пункт автор, например утилитой opacity-5.

Фокус

Пункт в фокусе получает кольцо внутри своих границ по :focus-visible. В примере фокус показан классом focus-visible, который CSS компонента читает наравне с псевдоклассом.

Доступность

Скрипт расставляет роли и связи сам:

  • <ul> получает role="tablist" и aria-orientation="horizontal", а aria-label или aria-labelledby переносит с <nav> — задайте его там;
  • пункты получают role="tab", aria-selected и aria-controls, секции — role="tabpanel", aria-labelledby и hidden, если они закрыты;
  • в порядке Tab остаётся только открытая вкладка.

Клавиши: стрелки влево и вправо переходят к соседней доступной вкладке и сразу открывают её (при письме справа налево — зеркально), Home и End — к первой и последней, Enter и пробел открывают вкладку в фокусе.

JavaScript

Скрипт подключается сам и обслуживает каждый .sf-tab, в том числе добавленный позже; при добавлении пунктов и секций или смене aria-disabled он пересчитывает связи.

При переключении пользователем корень отправляет всплывающее событие sf:tab-change; в detail — index, tab (пункт <li>) и panel (секция или null).

SF.Tab.activate(root, index) открывает вкладку по номеру и тоже отправляет sf:tab-change; третий аргумент false переключает без события. SF.Tab.init(target) подключает корни внутри target. Компонент регистрирует конструктор sfTab: SF.Loader появляется к событию sf-loader-init на window, а SF.Loader.ready('sfTab', callback) вызывает callback, когда скрипт загружен.

JavaScript
const whenLoader = (run) => (window.SF?.Loader ? run() : window.addEventListener('sf-loader-init', run, {once: true}));

whenLoader(() => SF.Loader.ready('sfTab', () => {
  const root = document.querySelector('#order-tabs');
  root.addEventListener('sf:tab-change', (event) => console.log(event.detail.index));
  SF.Tab.activate(root, 2);
}));

Классы

Что Классы
Блок sf-tab
Части sf-tab-active, sf-tab-content, sf-tab-inactive

Классы и переменные собраны из CSS выпуска и обновляются вместе с ним.

См. также

Поиск по документации

Введите минимум 2 символа

    Настройки

    Тема
    Размер шрифта
    Ширина страницы