Menu
Maintainer:
NikitaCG
size
groupLabel
itemChildren
itemTheme
itemDisabled
itemSelected
itemActive
itemHref
import {Menu} from '@gravity-ui/uikit';
Компонент Menu позволяет легко создавать представления для списков действий.
Он включает в себя специальные компоненты для элементов (Menu.Item) и групп (Menu.Group), которые можно комбинировать для создания более сложных меню.
<Menu>
<Menu.Item>First</Menu.Item>
<Menu.Item>Second</Menu.Item>
</Menu>Size (размер)
Позволяет задать размер меню. Значение по умолчанию — m.
<Menu size="s">
<Menu.Item>First</Menu.Item>
<Menu.Item>Second</Menu.Item>
</Menu>
<Menu size="m">
<Menu.Item>First</Menu.Item>
<Menu.Item>Second</Menu.Item>
</Menu>
<Menu size="l">
<Menu.Item>First</Menu.Item>
<Menu.Item>Second</Menu.Item>
</Menu>
<Menu size="xl">
<Menu.Item>First</Menu.Item>
<Menu.Item>Second</Menu.Item>
</Menu>Свойства
| Имя | Описание | Тип | Значение по умолчанию |
|---|---|---|---|
| size | Размер меню. | "s" "m" "l" "xl" | "m" |
| children | Дочерний элемент. | React.ReactNode | |
| className | HTML-атрибут class. | string | |
| style | HTML-атрибут style. | React.CSSProperties | |
| qa | Атрибут data-qa в HTML, используется для тестирования. | string |
Menu.Item
Отвечает за рендеринг элементов меню.
Иконка
Для отображения иконки в начале или в конце элемента меню используйте свойства iconStart или iconEnd:
<Menu>
<Menu.Item iconStart={<Icon size={16} data={GearIcon} />}>Item with icon</Menu.Item>
<Menu.Item>Item without icon</Menu.Item>
</Menu><Menu>
<Menu.Item iconEnd={<Icon size={16} data={TriangleExclamation} />}>Item with icon</Menu.Item>
<Menu.Item>Item without icon</Menu.Item>
</Menu>Состояния
Позволяет включать или отключать (делать неактивными) отдельные элементы меню:
<Menu>
<Menu.Item disabled>First</Menu.Item>
<Menu.Item>Second</Menu.Item>
<Menu.Item selected>Third</Menu.Item>
</Menu>Theme (тема)
Позволяет изменить тему элемента меню. Тема по умолчанию — normal.
<Menu>
<Menu.Item theme="danger">First</Menu.Item>
<Menu.Item theme="normal">Second</Menu.Item>
<Menu.Item>Third</Menu.Item>
</Menu>Свойства
| Имя | Описание | Тип | Значение по умолчанию |
|---|---|---|---|
| iconStart | Иконка меню перед текстом элемента. | ReactNode | |
| iconEnd | Иконка меню после текста элемента. | ReactNode | |
| selected | Флаг выбранного элемента меню. | boolean | false |
| disabled | Флаг отключенного элемента меню. | boolean | false |
| active | Флаг активного элемента меню. | boolean | false |
| href | URL-адрес. | string | |
| title | Атрибут заголовка. | string | |
| target | Атрибут целевого ресурса. | string | |
| rel | Атрибут rel. | string | |
| onClick | Обработчик события клика. | React.MouseEventHandler | |
| theme | Тема элемента меню. | "normal" "danger" | "normal" |
| children | Дочерний элемент. | React.ReactNode | |
| className | HTML-атрибут class. | string | |
| style | HTML-атрибут style. | React.CSSProperties | |
| qa | Атрибут data-qa в HTML, используется для тестирования. | string | |
| extraProps | Дополнительные HTML-атрибуты. | Record |
Menu.Group
В пределах одного меню элементы можно группировать по темам:
<Menu>
<Menu.Item>First</Menu.Item>
<Menu.Group label="Group One">
<Menu.Item>One</Menu.Item>
<Menu.Item>Two</Menu.Item>
</Menu.Group>
<Menu.Group label="Group Two">
<Menu.Item>One</Menu.Item>
<Menu.Item>Two</Menu.Item>
</Menu.Group>
<Menu.Item>Middle</Menu.Item>
<Menu.Group label="Group Three">
<Menu.Item>One</Menu.Item>
<Menu.Item>Two</Menu.Item>
</Menu.Group>
<Menu.Item>Last</Menu.Item>
</Menu>Свойства
| Имя | Описание | Тип | Значение по умолчанию |
|---|---|---|---|
| label | Лейбл группы меню. | string | |
| children | Дочерний элемент. | React.ReactNode | |
| className | HTML-атрибут class. | string | |
| style | HTML-атрибут style. | React.CSSProperties | |
| qa | Атрибут data-qa в HTML, используется для тестирования. | string |