Tabs

Набор компонентов для создания вкладок. Структура для вкладок похожа на структуру маркированных списков.

Tabs​

TabItem​

Взаимоисключающие свойства

Свойство value - это значение Tab. Оно отображается справа от основного текста.
value и contentRight взаимоисключающие: если передано одно, второе передать нельзя.

IconTabItem​

TabsController (deprecated)​

Вместо этого используйте Tabs, TabItem, указав параметры index, itemIndex, onIndexChange.

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

Стандартное подключение, без клавиатурной навигации​

Live Editor
Result
Open in CodeSandbox

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

Компонент может быть горизонтальными (по умолчанию) и вертикальными. За это отвечает свойство orientation.

Live Editor
Result
Open in CodeSandbox

Пример с прокруткой​

При выборе Tab происходит прокрутка до выбранного TabItem.

Live Editor
Result
Open in CodeSandbox

Пример с Dropdown​

Live Editor
Result
Open in CodeSandbox

Слот дополнительного действия в TabItem​

Для задания дополнительного действия используется свойство actionContent

Live Editor
Result
Open in CodeSandbox

Подключение клавиатурной навигации​

Для этого необходимо дополнительно прокинуть свойства index, itemIndex, onIndexChange.
Для горизонтальных Tabs: клавиши ArrowLeft, ArrowRight, Home, End для навигации по вкладкам.
Для вертикальных Tabs: клавиши ArrowUp, ArrowDown, Home, End для навигации по вкладкам.

Live Editor
Result
Open in CodeSandbox