Tabs

Режимы отображения

Задаётся свойством mode:

• default — стандартное отображение вкладок;
• accent — акцентный вариант, выделяет активную вкладку;
• secondary — более сдержанный стиль для второстепенных разделов.

Распределение вкладок

Задаётся свойством layoutFillMode:

• auto — автоматическое распределение (по умолчанию):
  • равномерно занимают всю ширину при использовании внутри HorizontalScroll;
  • равномерное распределение в режиме default на всех платформах кроме VKCOM.
• stretched — вкладки растягиваются на всю доступную ширину;
• shrinked — вкладки сжимаются по размеру контента.

Прокрутка к активной вкладке

По умолчанию автоматическая прокрутка к выбранной вкладке отключёна. Для включения:

• withScrollToSelectedTab — включает прокрутку к активной вкладке;
• scrollBehaviorToSelectedTab — контролирует горизонтальное выравнивание при прокрутке (соответствует параметрам scrollIntoView ↗).

Особенности прокрутки

• Вертикальная прокрутка автоматически отключается, если вкладка находится вне видимой области по вертикали.
• В браузерах без поддержки параметров scrollIntoView прокрутка будет отключёна.

Способы управления активной вкладкой

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

Управлять активной вкладкой можно вручную задавая selected у необходимой вкладки:

<Tabs>
  <TabsItem>Рекомендации</TabsItem>
  <TabsItem selected>Лента</TabsItem>
</Tabs>

Использование selectedId/defaultSelectedId у Tabs

Также можно управлять активной вкладкой через свойства selectedId/defaultSelectedId у Tabs. Для того, чтобы этот подход работал, нужно, чтобы у каждой вкладки TabsItem был выставлено свойство id:

<Tabs defaultSelectedId="news">
  <TabsItem id="recommendations">Рекомендации</TabsItem>
  <TabsItem id="news">Лента</TabsItem>
</Tabs>

const [selected, setSelected] = React.useState('news');
 
<Tabs selectedId={selected} onSelectedIdChange={setSelected}>
  <TabsItem id="recommendations">Рекомендации</TabsItem>
  <TabsItem id="news">Лента</TabsItem>
</Tabs>;

TabsItem

Элемент вкладки. Автоматически наследует режим отображения (mode) от родительского компонента Tabs.

Состояния

selected

Свойство selected помечает вкладку выбранной.

disabled

Свойство disabled блокирует взаимодействие с компонентом и добавляет визуальную индикацию недоступности.

Дополнительный контент

Компонент поддерживает различные варианты оформления вкладок:

Иконки

• before — иконка перед текстом:
  • Для mode="default" используйте иконки 24px;
  • Для других режимов (accent, secondary) — иконки 20px.
• after — иконка после текста (например, <Icon16Dropdown />).

Статус

Свойство status — добавляет элемент для отображения состояния:

• React.ReactElement — компонент Badge или Counter (с size="s").
• number — отображает текстовый блок с числом.

Состояния взаимодействия

Компонент поддерживает все стандартные состояния из Tappable:

• hoverMode — стиль при наведении;
• activeMode — стиль при активации;
• focusVisibleMode — стиль при фокусе.

Особенности использования

1. Всегда используйте TabsItem внутри компонента Tabs.
2. Для корректной работы доступности (a11y) необходимо:
   • Указать id для вкладки
   • Связать с контентом через aria-controls (см. документацию Tabs)

Доступность (a11y)

Для корректной работы со скринридерами необходимо:

1. В TabsItem передать:

   • id — уникальный идентификатор вкладки
   • aria-controls — указывает на id связанной области контента

2. В области контента указать:

   • id — соответствует aria-controls вкладки
   • tabIndex="0" — делает область фокусируемой
   • aria-labelledby — ссылается на id соответствующей вкладки

Пример корректной разметки:

<Tabs>
  <TabsItem id="tab1" aria-controls="content1">
    Вкладка 1
  </TabsItem>
  <div id="content1" tabIndex={0} aria-labelledby="tab1">
    Контент 1
  </div>
</Tabs>

Свойства и методы