# Tabs Набор компонентов для создания вкладок.
Структура для вкладок похожа на структуру маркированных списков. ## Tabs Props (свойства) для компонента Tabs: [{"name":"clip","type":{"name":"enum","raw":"\"scroll\" | \"showAll\"","value":[{"value":"\"scroll\""},{"value":"\"showAll\""}]}},{"name":"disabled","type":{"name":"boolean"}},{"name":"index","type":{"name":"number"}},{"name":"orientation","type":{"name":"enum","raw":"\"horizontal\" | \"vertical\"","value":[{"value":"\"horizontal\""},{"value":"\"vertical\""}]}},{"name":"hasDivider","type":{"name":"boolean"}},{"name":"stretch","type":{"name":"boolean"}},{"name":"pilled","type":{"name":"boolean"}},{"name":"view","type":{"name":"enum","raw":"\"clear\" | \"filled\" | \"divider\"","value":[{"value":"\"clear\""},{"value":"\"filled\""},{"value":"\"divider\""}]}},{"name":"size","type":{"name":"enum","raw":"\"m\" | \"h1\" | \"h2\" | \"h3\" | \"h4\" | \"h5\" | \"s\" | \"l\" | \"xs\"","value":[{"value":"\"m\""},{"value":"\"h1\""},{"value":"\"h2\""},{"value":"\"h3\""},{"value":"\"h4\""},{"value":"\"h5\""},{"value":"\"s\""},{"value":"\"l\""},{"value":"\"xs\""}]}},{"name":"outsideScroll","type":{"name":"boolean | { left?: string; right?: string; } | undefined"}}] ## TabItem Props (свойства) для компонента TabItem: [{"name":"view","type":{"name":"enum","raw":"\"clear\" | \"default\" | \"secondary\" | \"divider\"","value":[{"value":"\"clear\""},{"value":"\"default\""},{"value":"\"secondary\""},{"value":"\"divider\""}]}},{"name":"size","type":{"name":"enum","raw":"\"m\" | \"h1\" | \"h2\" | \"h3\" | \"h4\" | \"h5\" | \"s\" | \"l\" | \"xs\"","value":[{"value":"\"m\""},{"value":"\"h1\""},{"value":"\"h2\""},{"value":"\"h3\""},{"value":"\"h4\""},{"value":"\"h5\""},{"value":"\"s\""},{"value":"\"l\""},{"value":"\"xs\""}]}},{"name":"disabled","type":{"name":"boolean"}},{"name":"pilled","type":{"name":"boolean"}},{"name":"truncate","type":{"name":"boolean"}},{"name":"selected","type":{"name":"boolean"}},{"name":"contentRight","type":{"name":"ReactNode"}},{"name":"actionContent","type":{"name":"ReactNode"}},{"name":"onIndexChange","type":{"name":"((index: number) => void)"}},{"name":"itemIndex","type":{"name":"number"}},{"name":"maxItemWidth","type":{"name":"Width<string | number>"}},{"name":"orientation","type":{"name":"enum","raw":"\"horizontal\" | \"vertical\"","value":[{"value":"\"horizontal\""},{"value":"\"vertical\""}]}},{"name":"contentLeft","type":{"name":"ReactNode"}},{"name":"animated","type":{"name":"boolean"}},{"name":"isActive","type":{"name":"boolean"}},{"name":"value","type":{"name":"string | number"}}] :::caution Взаимоисключающие свойства
Свойство  `value`  - это значение Tab. Оно отображается справа от основного текста. 
`value`  и  `contentRight`  взаимоисключающие: если передано одно, второе передать нельзя.
::: ## IconTabItem Props (свойства) для компонента IconTabItem: [{"name":"view","type":{"name":"enum","raw":"\"clear\" | \"default\" | \"secondary\" | \"divider\"","value":[{"value":"\"clear\""},{"value":"\"default\""},{"value":"\"secondary\""},{"value":"\"divider\""}]}},{"name":"size","type":{"name":"enum","raw":"\"m\" | \"h1\" | \"h2\" | \"h3\" | \"h4\" | \"h5\" | \"s\" | \"l\" | \"xs\"","value":[{"value":"\"m\""},{"value":"\"h1\""},{"value":"\"h2\""},{"value":"\"h3\""},{"value":"\"h4\""},{"value":"\"h5\""},{"value":"\"s\""},{"value":"\"l\""},{"value":"\"xs\""}]}},{"name":"disabled","type":{"name":"boolean"}},{"name":"selected","type":{"name":"boolean"}},{"name":"onIndexChange","type":{"name":"((index: number) => void)"}},{"name":"actionContent","type":{"name":"ReactNode"}},{"name":"itemIndex","type":{"name":"number"}},{"name":"orientation","type":{"name":"enum","raw":"\"horizontal\" | \"vertical\"","value":[{"value":"\"horizontal\""},{"value":"\"vertical\""}]}},{"name":"animated","type":{"name":"boolean"}},{"name":"isActive","type":{"name":"boolean"}}] ## TabsController (deprecated) Вместо этого используйте Tabs, TabItem, указав параметры index, itemIndex, onIndexChange. Props (свойства) для компонента TabsController: [{"name":"items","type":{"name":"({ label: string; } & HorizontalTabItemProps)[]"}},{"name":"index","type":{"name":"number"}},{"name":"onIndexChange","type":{"name":"(index: number) => void"}},{"name":"autoscroll","type":{"name":"boolean"}},{"name":"clip","type":{"name":"enum","raw":"\"scroll\" | \"showAll\"","value":[{"value":"\"scroll\""},{"value":"\"showAll\""}]}},{"name":"disabled","type":{"name":"boolean"}},{"name":"orientation","type":{"name":"enum","raw":"\"horizontal\"","value":[{"value":"\"horizontal\""}]}},{"name":"hasDivider","type":{"name":"boolean"}},{"name":"stretch","type":{"name":"boolean"}},{"name":"pilled","type":{"name":"boolean"}},{"name":"view","type":{"name":"string"}},{"name":"size","type":{"name":"enum","raw":"\"m\" | \"s\" | \"l\" | \"xs\"","value":[{"value":"\"m\""},{"value":"\"s\""},{"value":"\"l\""},{"value":"\"xs\""}]}},{"name":"outsideScroll","type":{"name":"boolean | { left?: string; right?: string; } | undefined"}}] ## Использование ### Стандартное подключение, без клавиатурной навигации 
### Пример с прокруткой При выборе таба происходит прокрутка до выбранного таба. 
### Расположение табов Табы могут быть горизонтальными (по умолчанию) и вертикальными. За это отвечает свойство  `orientation` . 
### Пример с прокруткой При выборе Tab происходит прокрутка до выбранного TabItem. 
### Пример с Dropdown 
### Слот дополнительного действия в  `TabItem` Для задания дополнительного действия используется свойство  `actionContent` 
### Подключение клавиатурной навигации Для этого необходимо дополнительно прокинуть свойства  `index, itemIndex, onIndexChange` . 
Для горизонтальных табов: клавиши ArrowLeft, ArrowRight, Home, End для навигации по вкладкам. 
Для вертикальных табов: клавиши ArrowUp, ArrowDown, Home, End для навигации по вкладкам.