# TabsMenu
Компонент для создания горизонтального меню.
## Когда использовать
С помощью компонента можно создать:
- статическое меню с ссылками на другие страницы;
- меню с использованием собственного JS-кода (например, чтобы сделать пункт меню активным);
- переключатель для вкладок `TabsPanes`.
## Пример использования
Конфигурация темы на уровне проекта:
```ts
// src/lib/theme.ts
import { configureRootTheme } from '@yandex-lego/components/Theme'
import { theme } from '@yandex-lego/components/Theme/presets/default'
configureRootTheme({ theme })
```
Использование с нужным набором модификаторов:
```ts
// src/App.ts
import React, { useState } from 'react'
import { compose } from '@bem-react/core'
import {
TabsMenu as TabsMenuDesktop,
withSizeM,
withLayoutHoriz,
withViewDefault,
} from '@yandex-lego/components/TabsMenu/desktop'
const TabsMenu = compose(
withSizeM,
withViewDefault,
withLayoutHoriz,
)(TabsMenuDesktop)
const App = () => {
const [activeTab, setActiveTab] = useState('tab1')
return (
setActiveTab('tab1'), content: 'Tab 1' },
{ id: 'tab2', onClick: () => setActiveTab('tab2'), content: 'Tab 2' },
]}
/>
)
}
```
Использование с полным набором модификаторов:
```ts
// src/App.ts
import React, { useState } from 'react'
import { TabsMenu } from '@yandex-lego/components/TabsMenu/desktop/bundle'
const App = () => {
const [activeTab, setActiveTab] = useState('tab1')
return (
setActiveTab('tab1'), content: 'Tab 1' },
{ id: 'tab2', onClick: () => setActiveTab('tab2'), content: 'Tab 2' },
]}
/>
)
}
```
## Примеры
### Вид меню
Чтобы изменить вид меню, установите свойство `view` в значение `"default"`.
{{%story::desktop:navigation-tabsmenu-desktop--view%}}
### Стилевое оформление
Чтобы изменить стилевое оформление меню, установите свойство `theme` в значение `"normal"`.
{{%story::desktop:navigation-tabsmenu-desktop--theme%}}
### Размер меню
Чтобы задать размер горизонтального меню, установите свойство `size` в одно из следующих значений: `"m"`, `"s"`.
{{%story::desktop:navigation-tabsmenu-desktop--size%}}
### Адаптивность
Чтобы включить адаптивность, установите свойство `adaptive` и обработчик `onChange`.
> ⚠️ Данная функциональность находится в стадии доработок и может быть изменена в будущем.
{{%story::desktop:navigation-tabsmenu-desktop--adaptive%}}
## Свойства
| Свойство | Тип | Описание |
| ---------- | ----------------------------- | ----------------------------------------- |
| activeTab? | `string` | Идентификатор активного пункта меню |
| tabs | `ITabsMenuTabProps[]` | Массив пунктов меню |
| innerRef? | `RefObject` | Ссылка на корневой DOM-элемент компонента |
| className? | `string` | Дополнительный класс |