Tabs

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

Tabs​

TabItem​

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

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

TabsController (deprecated)​

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

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

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

Live Editor
Result
Open in CodeSandbox

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

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

Live Editor
Result
Open in CodeSandbox

Расположение табов​

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

Live Editor
Result
Open in CodeSandbox

Пример с Dropdown​

Live Editor
Result
Open in CodeSandbox

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

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

Live Editor
Result
Open in CodeSandbox