Tabs

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

Tabs

TabItem

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

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

TabsController (deprecated)

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

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

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

Live Editor

Result

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

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

Live Editor

Result

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

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

Live Editor

Result

Пример с Dropdown

Live Editor

Result

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

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

Live Editor

Result