Tabs

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

Tabs​

TabItem​

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

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

IconTabItem​

TabsController (deprecated)​

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

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

Устаревшее значение

Значение "h6" свойства size устарело и будет удалено в будущих версиях.

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

Live Editor
Result
Open in CodeSandbox

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

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

Live Editor
Result
Open in CodeSandbox

Расположение divider у вертикальных табов​

Для вертикальных табов можно расположить разделитель (divider) слева (по умолчанию) или справа с помощью свойства dividerAlign.

Live Editor
Result
Open in CodeSandbox

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

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

Live Editor
Result
Open in CodeSandbox

Пример с Dropdown​

Live Editor
Result
Open in CodeSandbox

Пример с Dropdown и перемещением выбранного элемента в видимую область​

При выборе элемента в Dropdown он перемещается в видимую область (на последнее видимое место), а крайний видимый TabItem, который он вытеснил, уходит в Dropdown.

Live Editor
Result
Open in CodeSandbox

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

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

Live Editor
Result
Open in CodeSandbox

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

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

Live Editor
Result
Open in CodeSandbox