UIKit
7.11.0
• MenuКомпоненты
UIKit
7.11.0
Date Components
3.1.0
Navigation
3.3.6
size
groupLabel
itemChildren
itemTheme
itemDisabled
itemSelected
itemActive
itemHref
import {Menu} from '@gravity-ui/uikit';
Компонент Menu
позволяет легко создавать представления для списков действий.
Он включает в себя специальные компоненты для элементов (Menu.Item
) и групп (Menu.Group
), которые можно комбинировать для создания более сложных меню.
- First
- Second
- Group
- One
- Two
<Menu>
<Menu.Item>First</Menu.Item>
<Menu.Item>Second</Menu.Item>
</Menu>
§Size
(размер)
Позволяет задать размер меню. Значение по умолчанию — m
.
- First
- Second
- First
- Second
- First
- Second
- First
- Second
<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
:
Item with icon
- Item without icon
<Menu>
<Menu.Item iconStart={<Icon size={16} data={GearIcon} />}>Item with icon</Menu.Item>
<Menu.Item>Item without icon</Menu.Item>
</Menu>
Item with icon
- Item without icon
<Menu>
<Menu.Item iconEnd={<Icon size={16} data={TriangleExclamation} />}>Item with icon</Menu.Item>
<Menu.Item>Item without icon</Menu.Item>
</Menu>
§Состояния
Позволяет включать или отключать (делать неактивными) отдельные элементы меню:
- First
- Second
- Third
<Menu>
<Menu.Item disabled>First</Menu.Item>
<Menu.Item>Second</Menu.Item>
<Menu.Item selected>Third</Menu.Item>
</Menu>
§Theme
(тема)
Позволяет изменить тему элемента меню. Тема по умолчанию — normal
.
- First
- Second
- Third
<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
В пределах одного меню элементы можно группировать по темам:
- First
- Group One
- One
- Two
- Group Two
- One
- Two
- Middle
- Group Three
- One
- Two
- Last
<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 |