# 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"}}] ## Использование ### Стандартное подключение, без клавиатурной навигации
```tsx
import React, { useState } from 'react';
import { Tabs, TabItem } from '@salutejs/plasma-web';
import { IconClock } from '@salutejs/plasma-icons';
export function App() {
const items = Array(4).fill(0);
const [index, setIndex] = useState(0);
return (
<div>
<Tabs view="filled" stretch size="xs">
{items.map((_, i) => (
<TabItem
view="secondary"
key={`item:${i}`}
size="xs"
selected={i === index}
tabIndex={0}
contentLeft={<IconClock size="xs" color="inherit" />}
onClick={() => setIndex(i)}
>
{`Label${i + 1}`}
</TabItem>
))}
</Tabs>
</div>
);
}
```
### Пример с прокруткой При выборе таба происходит прокрутка до выбранного таба. 
```tsx
import React, { useState } from 'react';
import { Tabs, TabItem, Button } from '@salutejs/plasma-web';
import { IconClock } from '@salutejs/plasma-icons';
export function App() {
const items = Array(8).fill(0);
const [index, setIndex] = useState(0);
const specificIndex = 6;
return (
<div style={{ display:'flex', flexDirection: 'column', gap: '1rem' }}>
<Tabs view="divider" size="xs" style={{ width: '15rem' }}>
{items.map((_, i) => (
<TabItem
view="divider"
key={`item:${i}`}
size="xs"
selected={i === index}
tabIndex={0}
contentLeft={<IconClock size="xs" color="inherit" />}
onClick={() => setIndex(i)}
>
{`Label${i + 1}`}
</TabItem>
))}
</Tabs>
<Button onClick={() => setIndex(specificIndex)}>{`Выбрать элемент ${specificIndex + 1}`}</Button>
</div>
);
}
```
### Расположение табов Табы могут быть горизонтальными (по умолчанию) и вертикальными. За это отвечает свойство  `orientation` . 
```tsx
import React, { useState } from 'react';
import { Tabs, TabItem, IconTabItem } from '@salutejs/plasma-web';
import { IconClock } from '@salutejs/plasma-icons';
export function App() {
const items = Array(8).fill(0);
const [index, setIndex] = useState(0);
return (
<div style={{ gap: '2rem' }}>
<Tabs view="divider" orientation="vertical" size="xs" style={{ width: '15rem' }}>
{items.map((_, i) => (
<TabItem
view="divider"
orientation="vertical"
key={`item:${i}`}
size="xs"
selected={i === index}
tabIndex={0}
contentLeft={<IconClock size="xs" color="inherit" />}
onClick={() => setIndex(i)}
>
{`Label${i + 1}`}
</TabItem>
))}
</Tabs>
<Tabs view="divider" orientation="vertical" size="xs" style={{ width: '15rem' }}>
{items.map((_, i) => (
<IconTabItem
view="divider"
orientation="vertical"
key={`item:${i}`}
size="xs"
selected={i === index}
tabIndex={0}
onClick={() => setIndex(i)}
>
<IconClock size="xs" color="inherit" />
</IconTabItem>
))}
</Tabs>
</div>
);
}
```
### Пример с прокруткой При выборе Tab происходит прокрутка до выбранного TabItem. 
```tsx
import React, { useState } from 'react';
import { Tabs, TabItem, IconTabItem, Button } from '@salutejs/plasma-web';
import { IconClock } from '@salutejs/plasma-icons';
export function App() {
const items = Array(8).fill(0);
const [index, setIndex] = useState(0);
const specificIndex = 6;
return (
<div style={{ display:'flex', flexDirection: 'column', gap: '1rem' }}>
<Tabs view="divider" size="xs" style={{ width: '15rem' }}>
{items.map((_, i) => (
<TabItem
view="divider"
key={`item:${i}`}
size="xs"
selected={i === index}
tabIndex={0}
contentLeft={<IconClock size="xs" color="inherit" />}
onClick={() => setIndex(i)}
>
{`Label${i + 1}`}
</TabItem>
))}
</Tabs>
<Tabs view="divider" size="xs" style={{ width: '15rem' }}>
{items.map((_, i) => (
<TabItem
view="divider"
key={`item:${i}`}
size="xs"
selected={i === index}
tabIndex={0}
onClick={() => setIndex(i)}
>
<IconClock size="xs" color="inherit" />
</TabItem>
))}
</Tabs>
<Button onClick={() => setIndex(specificIndex)}>{`Выбрать элемент ${specificIndex + 1}`}</Button>
</div>
);
}
```
### Пример с Dropdown 
```tsx
import React, { useState } from 'react';
import { Tabs, TabItem, Dropdown } from '@salutejs/plasma-web';
import { IconClock } from '@salutejs/plasma-icons';
export function App() {
const items = Array(8).fill(0);
const [index, setIndex] = useState(0);
const maxItemQuantity = 3;
const visibleItems = items.slice(0, maxItemQuantity);
const otherItems = items.slice(maxItemQuantity);
const dropdownItems = otherItems.map((_, i) => {
const itemIndex = maxItemQuantity + i;
return {
label: `Label${itemIndex + 1}`,
value: itemIndex,
};
});
return (
<div style={{ display:'flex', flexDirection: 'column', gap: '1rem' }}>
<div style={{ height: '15rem', alignItems: 'flex-start' }}>
<Tabs clip="showAll" view="divider" size="xs">
{visibleItems.map((_, i) => (
<TabItem
key={`item:${i}`}
view="divider"
selected={i === index}
onClick={() => setIndex(i)}
tabIndex={0}
size="xs"
>
{`Label${i + 1}`}
</TabItem>
))}
{dropdownItems.length > 0 && (
<div style={{ marginLeft: '1.75rem' }}>
<Dropdown size="xs" items={dropdownItems} onItemSelect={(item) => setIndex(item.value)}>
<TabItem key="item:ShowAll" view="divider" tabIndex={0} size="xs">
ShowAll
</TabItem>
</Dropdown>
</div>
)}
</Tabs>
</div>
<div style={{ height: '15rem', alignItems: 'flex-start' }}>
<Tabs clip="showAll" view="divider" size="xs">
{visibleItems.map((_, i) => (
<IconTabItem
key={`item:${i}`}
view="divider"
selected={i === index}
onClick={() => setIndex(i)}
tabIndex={0}
size="xs"
>
<IconDotsHorizontalOutline color="inherit" size="xs" />
</IconTabItem>
))}
{dropdownItems.length > 0 && (
<div style={{ marginLeft: '1.75rem' }}>
<Dropdown size="xs" items={dropdownItems} onItemSelect={(item) => setIndex(item.value)}>
<IconTabItem key="item:ShowAll" view="divider" tabIndex={0} size="xs">
<IconClock color="inherit" size="xs" />
</IconTabItem>
</Dropdown>
</div>
)}
</Tabs>
</div>
</div>
);
}
```
### Слот дополнительного действия в  `TabItem` Для задания дополнительного действия используется свойство  `actionContent` 
```tsx
import React, { useState } from 'react';
import { Tabs, TabItem } from '@salutejs/plasma-web';
import { IconClose } from '@salutejs/plasma-icons';
export function App() {
const items = Array(4).fill(0);
const [index, setIndex] = useState(0);
return (
<div>
<Tabs view="filled" stretch size="xs">
{items.map((_, i) => (
<TabItem
view="secondary"
key={`item:${i}`}
size="xs"
selected={i === index}
tabIndex={0}
actionContent={<IconClose size="xs" color="inherit" />}
onClick={() => setIndex(i)}
>
{`Label${i + 1}`}
</TabItem>
))}
</Tabs>
</div>
);
}
```
### Подключение клавиатурной навигации Для этого необходимо дополнительно прокинуть свойства  `index, itemIndex, onIndexChange` . 
Для горизонтальных табов: клавиши ArrowLeft, ArrowRight, Home, End для навигации по вкладкам. 
Для вертикальных табов: клавиши ArrowUp, ArrowDown, Home, End для навигации по вкладкам.
```tsx
import React, { useState } from 'react';
import { Tabs, TabItem } from '@salutejs/plasma-web';
import { IconClock } from '@salutejs/plasma-icons';
export function App() {
const items = Array(4).fill(0);
const [horizontalIndex, setHorizontalIndex] = useState(0);
const [verticalIndex, setVerticalIndex] = useState(0);
return (
<div style={{ display: "flex", flexDirection: "column", gap: "50px"}}>
<div>
<Tabs view="divider" stretch size="xs" index={horizontalIndex}>
{items.map((_, i) => (
<TabItem
view="divider"
key={`item:${i}`}
size="xs"
itemIndex={i}
onIndexChange={(i) => setHorizontalIndex(i)}
selected={i === horizontalIndex}
tabIndex={0}
contentLeft={<IconClock size="xs" color="inherit" />}
onClick={() => setHorizontalIndex(i)}
>
{`Label${i + 1}`}
</TabItem>
))}
</Tabs>
</div>
<div>
<Tabs orientation="vertical" view="divider" size="xs" index={verticalIndex}>
{items.map((_, i) => (
<TabItem
orientation="vertical"
view="divider"
key={`item:${i}`}
size="xs"
itemIndex={i}
onIndexChange={(i) => setVerticalIndex(i)}
selected={i === verticalIndex}
tabIndex={0}
contentLeft={<IconClock size="xs" color="inherit" />}
onClick={() => setVerticalIndex(i)}
>
{`Label${i + 1}`}
</TabItem>
))}
</Tabs>
</div>
</div>
);
}
```