Menu
维护者：
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>大小
此属性用于选择菜单大小。默认值为 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>属性
| 姓名 | 描述 | 类型 | 默认 |
|---|---|---|---|
| 尺寸 | 菜单大小 | "s" "xl" | "m" |
| 儿童 | 子元素 | React.ReactNode | |
| className | class HTML 属性 | string | |
| 风格 | style HTML 属性 | React.CSSProperties | |
| qa | data-qa HTML 属性，用于测试 | string |
菜单。项目
此属性用于渲染菜单项。
图标
使用 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>主题
这允许您更改菜单项主题。默认主题是 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 | |
| 已选中 | 菜单项选定标志 | boolean | false |
| 残疾的 | 菜单项禁用标志 | boolean | false |
| 活跃 | 菜单项活动标志 | boolean | false |
| href | 网址 | string | |
| 标题 | 标题属性 | string | |
| 目标 | 目标属性 | string | |
| 真实 | 真实属性 | string | |
| onClick | onclick 事件的处理器 | React.MouseEventHandler | |
| 主题 | 菜单项主题 | "normal" "danger" | "normal" |
| 儿童 | 子元素 | React.ReactNode | |
| className | class HTML 属性 | string | |
| 风格 | style HTML 属性 | React.CSSProperties | |
| qa | data-qa HTML 属性，用于测试 | string | |
| extraProps | 其他 HTML 属性 | Record |
菜单群组
您可以在单个菜单中按主题对项目进行分组：
<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>属性
| 姓名 | 描述 | 类型 | 默认 |
|---|---|---|---|
| 标签 | 菜单组标签 | string | |
| 儿童 | 子元素 | React.ReactNode | |
| className | class HTML 属性 | string | |
| 风格 | style HTML 属性 | React.CSSProperties | |
| qa | data-qa HTML 属性，用于测试 | string |