Вкладки

Вкладки показывают один из нескольких связанных разделов на месте, без перехода на другую страницу. Пункты короткие и относятся к одному объекту; для этапов процесса с порядком берите шаги.

Пример

HTML

<div class="sf-tabs sf-tabs--underline flex flex-col">
  <div class="sf-tabs-top-container flex">
    <nav class="sf-tabs-top flex" aria-label="Параметры проекта">
      <button type="button" class="sf-button sf-button--default sf-button--primary sf-button--size-1 selected"><span class="sf-button-text-container">Обзор</span></button>
      <button type="button" class="sf-button sf-button--default sf-button--primary sf-button--size-1"><span class="sf-button-text-container">Команда</span></button>
      <button type="button" class="sf-button sf-button--default sf-button--primary sf-button--size-1"><span class="sf-button-text-container">История</span></button>
    </nav>
  </div>
  <div class="sf-tabs-main-container">
    <section class="sf-tabs-main-tab selected">Раздел «Обзор».</section>
    <section class="sf-tabs-main-tab">Раздел «Команда».</section>
    <section class="sf-tabs-main-tab">Раздел «История».</section>
  </div>
</div>

Разметка

Минимальную разметку показывает пример выше. Части вложены так: sf-tabs → sf-tabs-top-container → список sf-tabs-top с пунктами, и рядом — sf-tabs-main-container с панелями sf-tabs-main-tab.

Корень sf-tabs с видом sf-tabs--{вид} и утилитами flex flex-col.
sf-tabs-top-container (утилита flex) рисует нижнюю линию под пунктами.
sf-tabs-top с утилитой flex и aria-label — список пунктов; пункты стоят прямо в нём.
Пункт — кнопка sf-button (или sf-icon-button) с видом, схемой и размером кнопки, обычно sf-button--default sf-button--primary sf-button--size-1; подпись — в sf-button-text-container. Вид вкладок перекрашивает кнопки сам.
Панели sf-tabs-main-tab в sf-tabs-main-container связываются с пунктами по порядку: пунктов и панелей поровну.
Строка пунктов не переносится: если пункты не помещаются, она прокручивается по горизонтали.

Варианты

Вид

Без модификатора пункты — залитые кнопки, выбранный темнее остальных. sf-tabs--underline — текстовые пункты с линией под выбранным; основной вид для разделов страницы и карточки. sf-tabs--pills — округлые кнопки, подходят фильтрам и переключению периода. sf-tabs--full — сегменты в общей рамке на всю ширину; списку sf-tabs-top добавьте утилиту flex-1.

HTML

<div class="flex flex-col gap-4">
  <div class="flex flex-col gap-1">
    <div class="sf-tabs flex flex-col">
      <div class="sf-tabs-top-container flex">
        <nav class="sf-tabs-top flex" aria-label="Вид: без модификатора">
          <button type="button" class="sf-button sf-button--default sf-button--primary sf-button--size-1 selected"><span class="sf-button-text-container">Неделя</span></button>
          <button type="button" class="sf-button sf-button--default sf-button--primary sf-button--size-1"><span class="sf-button-text-container">Месяц</span></button>
          <button type="button" class="sf-button sf-button--default sf-button--primary sf-button--size-1"><span class="sf-button-text-container">Год</span></button>
        </nav>
      </div>
      <div class="sf-tabs-main-container">
        <section class="sf-tabs-main-tab selected">Раздел «Неделя».</section>
        <section class="sf-tabs-main-tab">Раздел «Месяц».</section>
        <section class="sf-tabs-main-tab">Раздел «Год».</section>
      </div>
    </div>
    <code class="text-1/2 color-on-surface-variant">без модификатора</code>
  </div>
  <div class="flex flex-col gap-1">
    <div class="sf-tabs sf-tabs--underline flex flex-col">
      <div class="sf-tabs-top-container flex">
        <nav class="sf-tabs-top flex" aria-label="Вид: sf-tabs--underline">
          <button type="button" class="sf-button sf-button--default sf-button--primary sf-button--size-1 selected"><span class="sf-button-text-container">Неделя</span></button>
          <button type="button" class="sf-button sf-button--default sf-button--primary sf-button--size-1"><span class="sf-button-text-container">Месяц</span></button>
          <button type="button" class="sf-button sf-button--default sf-button--primary sf-button--size-1"><span class="sf-button-text-container">Год</span></button>
        </nav>
      </div>
      <div class="sf-tabs-main-container">
        <section class="sf-tabs-main-tab selected">Раздел «Неделя».</section>
        <section class="sf-tabs-main-tab">Раздел «Месяц».</section>
        <section class="sf-tabs-main-tab">Раздел «Год».</section>
      </div>
    </div>
    <code class="text-1/2 color-on-surface-variant">sf-tabs--underline</code>
  </div>
  <div class="flex flex-col gap-1">
    <div class="sf-tabs sf-tabs--pills flex flex-col">
      <div class="sf-tabs-top-container flex">
        <nav class="sf-tabs-top flex" aria-label="Вид: sf-tabs--pills">
          <button type="button" class="sf-button sf-button--default sf-button--primary sf-button--size-1 selected"><span class="sf-button-text-container">Неделя</span></button>
          <button type="button" class="sf-button sf-button--default sf-button--primary sf-button--size-1"><span class="sf-button-text-container">Месяц</span></button>
          <button type="button" class="sf-button sf-button--default sf-button--primary sf-button--size-1"><span class="sf-button-text-container">Год</span></button>
        </nav>
      </div>
      <div class="sf-tabs-main-container">
        <section class="sf-tabs-main-tab selected">Раздел «Неделя».</section>
        <section class="sf-tabs-main-tab">Раздел «Месяц».</section>
        <section class="sf-tabs-main-tab">Раздел «Год».</section>
      </div>
    </div>
    <code class="text-1/2 color-on-surface-variant">sf-tabs--pills</code>
  </div>
  <div class="flex flex-col gap-1">
    <div class="sf-tabs sf-tabs--full flex flex-col">
      <div class="sf-tabs-top-container flex">
        <nav class="sf-tabs-top flex flex-1" aria-label="Вид: sf-tabs--full">
          <button type="button" class="sf-button sf-button--default sf-button--primary sf-button--size-1 selected"><span class="sf-button-text-container">Неделя</span></button>
          <button type="button" class="sf-button sf-button--default sf-button--primary sf-button--size-1"><span class="sf-button-text-container">Месяц</span></button>
          <button type="button" class="sf-button sf-button--default sf-button--primary sf-button--size-1"><span class="sf-button-text-container">Год</span></button>
        </nav>
      </div>
      <div class="sf-tabs-main-container">
        <section class="sf-tabs-main-tab selected">Раздел «Неделя».</section>
        <section class="sf-tabs-main-tab">Раздел «Месяц».</section>
        <section class="sf-tabs-main-tab">Раздел «Год».</section>
      </div>
    </div>
    <code class="text-1/2 color-on-surface-variant">sf-tabs--full</code>
  </div>
</div>

Расположение

По умолчанию пункты стоят строкой над панелями. sf-tabs--vertical ставит их столбцом рядом с панелью — для настроек с длинным списком разделов. Корню дайте утилиты flex flex-row, списку — flex flex-col; стрелки клавиатуры тогда работают вверх и вниз.

HTML

<div class="flex flex-col gap-4">
  <div class="flex flex-col gap-1">
    <div class="sf-tabs sf-tabs--underline flex flex-col">
      <div class="sf-tabs-top-container flex">
        <nav class="sf-tabs-top flex" aria-label="Настройки, горизонтально">
          <button type="button" class="sf-button sf-button--default sf-button--primary sf-button--size-1 selected"><span class="sf-button-text-container">Профиль</span></button>
          <button type="button" class="sf-button sf-button--default sf-button--primary sf-button--size-1"><span class="sf-button-text-container">Безопасность</span></button>
        </nav>
      </div>
      <div class="sf-tabs-main-container">
        <section class="sf-tabs-main-tab selected">Раздел «Профиль».</section>
        <section class="sf-tabs-main-tab">Раздел «Безопасность».</section>
      </div>
    </div>
    <code class="text-1/2 color-on-surface-variant">без sf-tabs--vertical</code>
  </div>
  <div class="flex flex-col gap-1">
    <div class="sf-tabs sf-tabs--vertical flex flex-row">
      <div class="sf-tabs-top-container flex">
        <nav class="sf-tabs-top flex flex-col" aria-label="Настройки, вертикально">
          <button type="button" class="sf-button sf-button--default sf-button--primary sf-button--size-1 selected"><span class="sf-button-text-container">Профиль</span></button>
          <button type="button" class="sf-button sf-button--default sf-button--primary sf-button--size-1"><span class="sf-button-text-container">Безопасность</span></button>
        </nav>
      </div>
      <div class="sf-tabs-main-container">
        <section class="sf-tabs-main-tab selected">Раздел «Профиль».</section>
        <section class="sf-tabs-main-tab">Раздел «Безопасность».</section>
      </div>
    </div>
    <code class="text-1/2 color-on-surface-variant">sf-tabs--vertical</code>
  </div>
</div>

Только иконки

Пункт может быть кнопкой-иконкой sf-icon-button — для компактной панели инструментов. У каждой обязателен aria-label, иконка скрыта через aria-hidden="true".

HTML

<div class="sf-tabs flex flex-col">
  <div class="sf-tabs-top-container">
    <nav class="sf-tabs-top flex" aria-label="Материалы проекта">
      <button type="button" aria-label="Обзор" class="sf-icon-button sf-icon-button--default sf-icon-button--primary sf-icon-button--icon sf-icon-button--size-1 selected"><i class="sf-icon" aria-hidden="true">home</i></button>
      <button type="button" aria-label="История" class="sf-icon-button sf-icon-button--default sf-icon-button--primary sf-icon-button--icon sf-icon-button--size-1"><i class="sf-icon" aria-hidden="true">history</i></button>
    </nav>
  </div>
  <div class="sf-tabs-main-container">
    <section class="sf-tabs-main-tab selected">Обзор материалов.</section>
    <section class="sf-tabs-main-tab">История материалов.</section>
  </div>
</div>

Состояния

Выбрана

Выбранный пункт и его панель получают класс selected, остальные панели — hidden. Начальную вкладку задаёт атрибут data-active-index на корне — номер с нуля — или класс selected на пункте; без них открыта первая. Скрипт держит data-active-index равным открытой вкладке, а смена атрибута переключает её.

HTML

<div class="sf-tabs sf-tabs--underline flex flex-col" data-active-index="1">
  <div class="sf-tabs-top-container flex">
    <nav class="sf-tabs-top flex" aria-label="Отчёты">
      <button type="button" class="sf-button sf-button--default sf-button--primary sf-button--size-1 selected"><span class="sf-button-text-container">Неделя</span></button>
      <button type="button" class="sf-button sf-button--default sf-button--primary sf-button--size-1"><span class="sf-button-text-container">Месяц</span></button>
      <button type="button" class="sf-button sf-button--default sf-button--primary sf-button--size-1"><span class="sf-button-text-container">Год</span></button>
    </nav>
  </div>
  <div class="sf-tabs-main-container">
    <section class="sf-tabs-main-tab selected">Раздел «Неделя».</section>
    <section class="sf-tabs-main-tab">Раздел «Месяц».</section>
    <section class="sf-tabs-main-tab">Раздел «Год».</section>
  </div>
</div>

Недоступна

Атрибут disabled на кнопке (или класс disabled, или aria-disabled="true") запрещает выбирать пункт: клик и стрелки его пропускают.

HTML

<div class="sf-tabs sf-tabs--underline flex flex-col">
  <div class="sf-tabs-top-container">
    <nav class="sf-tabs-top flex" aria-label="Разделы проекта">
      <button type="button" class="sf-button sf-button--default sf-button--primary sf-button--size-1 selected"><span class="sf-button-text-container">Обзор</span></button>
      <button type="button" disabled class="sf-button sf-button--default sf-button--primary sf-button--size-1"><span class="sf-button-text-container">Отчёты</span></button>
      <button type="button" class="sf-button sf-button--default sf-button--primary sf-button--size-1"><span class="sf-button-text-container">История</span></button>
    </nav>
  </div>
  <div class="sf-tabs-main-container">
    <section class="sf-tabs-main-tab selected">Основная информация о проекте.</section>
    <section class="sf-tabs-main-tab">Отчёты пока недоступны.</section>
    <section class="sf-tabs-main-tab">Последние изменения проекта.</section>
  </div>
</div>

Фокус

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

HTML

<div class="sf-tabs sf-tabs--underline flex flex-col">
  <div class="sf-tabs-top-container flex">
    <nav class="sf-tabs-top flex" aria-label="Вкладка в фокусе">
      <button type="button" class="sf-button sf-button--default sf-button--primary sf-button--size-1 selected"><span class="sf-button-text-container">Неделя</span></button>
      <button type="button" class="sf-button sf-button--default sf-button--primary sf-button--size-1 focus-visible"><span class="sf-button-text-container">Месяц</span></button>
    </nav>
  </div>
  <div class="sf-tabs-main-container">
    <section class="sf-tabs-main-tab selected">Раздел «Неделя».</section>
    <section class="sf-tabs-main-tab">Раздел «Месяц».</section>
  </div>
</div>

Доступность

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

sf-tabs-top получает role="tablist" и aria-orientation (vertical у sf-tabs--vertical); aria-label с корня переносится на список, если у списка его нет;
пункты получают role="tab", aria-selected, aria-controls и имя из подписи, панели — role="tabpanel", aria-labelledby и tabindex="0";
в порядке Tab остаётся только выбранный пункт.

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

JavaScript

Скрипт подключается сам и обслуживает каждый .sf-tabs, в том числе добавленный позже. Он следит за пунктами и панелями: новые пары можно добавлять без повторной инициализации. Корни, которые отрисовал Smart-компонент <sf-tabs>, он пропускает. Событий переключения скрипт не отправляет; событие sf-tab-change даёт Smart-компонент.

HTML

<div class="grid gap-4">
  <div class="sf-tabs flex flex-col">
    <div class="sf-tabs-top-container">
      <nav class="sf-tabs-top flex flex-wrap" aria-label="Рабочие разделы">
        <button type="button" class="sf-button sf-button--default sf-button--primary sf-button--size-1 selected"><span class="sf-button-text-container">Первый</span></button>
      </nav>
    </div>
    <div class="sf-tabs-main-container"><section class="sf-tabs-main-tab selected">Первый рабочий раздел.</section></div>
  </div>
  <button type="button" class="sf-button sf-button--outline sf-button--primary sf-button--size-1"><span class="sf-button-text-container">Добавить вкладку</span></button>
</div>
<script>
(() => {
  const example = document.currentScript.previousElementSibling;
  const tabs = example.querySelector('.sf-tabs');
  const add = example.querySelector(':scope > button');
  let count = 1;
  add.addEventListener('click', () => {
    count += 1;
    const button = document.createElement('button');
    button.type = 'button';
    button.className = 'sf-button sf-button--default sf-button--primary sf-button--size-1';
    const label = document.createElement('span');
    label.className = 'sf-button-text-container';
    label.textContent = `Раздел ${count}`;
    button.append(label);
    const panel = document.createElement('section');
    panel.className = 'sf-tabs-main-tab';
    panel.textContent = `Содержимое раздела ${count}.`;
    tabs.querySelector('.sf-tabs-top').append(button);
    tabs.querySelector('.sf-tabs-main-container').append(panel);
  });
})();
</script>

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

JavaScript

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

whenLoader(() => SF.Loader.ready('Tabs', () => {
  SF.Tabs.activate(document.querySelector('#project-tabs'), 2);
}));

Классы

Что	Классы
Блок	`sf-tabs`
Части	`sf-tabs-count`, `sf-tabs-main-container`, `sf-tabs-more`, `sf-tabs-overflowed`, `sf-tabs-settings`, `sf-tabs-settings-handle`, `sf-tabs-settings-label`, `sf-tabs-settings-list`, `sf-tabs-settings-pin`, `sf-tabs-settings-row`, `sf-tabs-top`, `sf-tabs-top-container`, `sf-tabs-top-container--tools`
Модификаторы	`sf-tabs--full`, `sf-tabs--overflow-more`, `sf-tabs--overflow-wrap`, `sf-tabs--pills`, `sf-tabs--underline`, `sf-tabs--vertical`
Размеры	`sf-tabs--size-1`, `sf-tabs--size-1-2`, `sf-tabs--size-2`

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

Переменные

Настройка

Эти переменные — поверхность настройки компонента. Их имена стабильны: переименовать или убрать такую переменную можно только через журнал изменений, с предупреждением, как атрибут. Framework их не задаёт, поэтому значение можно поставить на сам компонент (.sf-tabs) или на любого предка. Переменные действуют на спокойный вид; наведение, фокус, нажатие, недоступность и ошибка рисуются поверх, поэтому состояния остаются видны.

Переменная	Что задаёт	По умолчанию
`--sf-tabs-color`	Цвет подписи и значка вкладки в покое у видов `underline` и `full`; у выбранной вкладки — свой.	`var(--sf-on-surface)`; зависит от вида
`--sf-tabs-indicator-color`	Цвет линии под выбранной вкладкой у вида `underline`.	`var(--sf-outline)`; зависит от вида
`--sf-tabs-indicator-width`	Толщина линии под вкладкой у вида `underline`; высота вкладки не меняется.	`calc(var(--sf-px) * 2)`; зависит от вида, размера
`--sf-tabs-border-color`	Цвет разделителя под рядом вкладок; у видов `pills`, `full` и вертикальных вкладок его нет.	`var(--sf-outline-variant)`; зависит от вида
`--sf-tabs-border-width`	Толщина разделителя под рядом вкладок; ряд `underline` стоит на нём.	`var(--sf-px)`; зависит от вида
`--sf-tabs-gap`	Промежуток между вкладками; вкладки вида `full` остаются сомкнутыми.	`var(--sf-space-1)`; зависит от вида, размера

CSS

.sf-tabs {
  --sf-tabs-color: var(--sf-on-surface);
}

Устройство

Остальные переменные — внутренняя проводка компонента: модификаторы задают им значения, а части их читают. Их имена и устройство могут меняться в любом выпуске, поэтому проект их не задаёт. Значение по умолчанию — из базового правила блока (.sf-tabs); переменную без него задают только модификаторы.

Переменная	По умолчанию	Задаёт
`--sf-tabs--focus-ink`	не задана; задают модификаторы, например `.sf-tabs-top .sf-button`: `var(--sf-on-surface)`	`--sf-focus--color`
`--sf-tabs-top--gap`	не задана; задают модификаторы, например `.sf-tabs.sf-tabs--full > .sf-tabs-top-container > .sf-tabs-top`: `0`	`gap`
`--sf-tabs-top--margin`	не задана; задают модификаторы, например `.sf-tabs--underline > .sf-tabs-top-container > .sf-tabs-top`: `0 0 calc(var(--sf-tabs-border-width, var(--sf-tabs--border-width, var(--sf-px))) * -1) 0`	`margin`
`--sf-tabs-top-container--border-color`	не задана; задают модификаторы, например `.sf-tabs--pills > .sf-tabs-top-container`: `transparent`	`border-color`
`--sf-tabs-top-container--border-width`	не задана; задают модификаторы, например `.sf-tabs--pills > .sf-tabs-top-container`: `0`	`border-width`

Навигация

Главное

Документация

Содержание

Вкладки

Пример

Разметка

Варианты

Вид

Расположение

Только иконки

Состояния

Выбрана

Недоступна

Фокус

Доступность

JavaScript

Классы

Переменные

Настройка

Устройство

См. также

Настройки

Вкладки

Пример

Разметка

Варианты

Вид

Расположение

Только иконки

Состояния

Выбрана

Недоступна

Фокус

Доступность

JavaScript

Классы

Переменные

Настройка

Устройство

См. также

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