实现一个下拉菜单组件,点击菜单标题,向下(或向上)拉出内容区域,点击遮罩收回下拉内容。
示例如下:

Demo
import { Dropdown } from 'zarm';
render(
<Dropdown>
<Dropdown.Item key="key1" title="菜单一">内容一</Dropdown.Item>
<Dropdown.Item key="key2" title="菜单二">内容二</Dropdown.Item>
</Dropdown>
);
Props
export interface DropdownProps {
actively?: number | string;
defaultActiveKey?: number | string;
onChange?: (activeKey: number | string) => void;
arrow?: ReactNode;
}
export interface DropdownItemProps {
key?: number | string;
title?: ReactNode;
arrow?: ReactNode;
}
API
Dropdown
| 属性 |
类型 |
默认值 |
说明 |
| activeKey |
number | string |
- |
激活的 Item Key |
| defaultActiveKey |
number | string |
- |
默认激活的 Item Key |
| onChange |
(activeKey: number | string) => void |
- |
activeKey 变化时触发的回调函数 |
| arrow |
ReactNode |
- |
箭头样式 |
DropdownItem
| 属性 |
类型 |
默认值 |
说明 |
| key |
number | string |
- |
唯一值 |
| title |
ReactNode |
- |
标题 |
| arrow |
ReactNode |
- |
箭头样式 |
实现一个下拉菜单组件,点击菜单标题,向下(或向上)拉出内容区域,点击遮罩收回下拉内容。
示例如下:
Demo
Props
API
Dropdown
DropdownItem