> Leaf UI 0.6.0 · Package: @ifhover/leaf-ui · Source: b30c3d3a8fa9c5e15d0d0522cebfbd33f60c6b06
> Browser documentation: https://ifhover.github.io/leaf-ui/v/0.6.0/components/dropdown.html
> For AI agents: the complete documentation index is available at https://ifhover.github.io/leaf-ui/v/0.6.0/llms.txt, the full documentation bundle is available at https://ifhover.github.io/leaf-ui/v/0.6.0/llms-full.txt.
# Dropdown 下拉菜单
在菜单中收纳更多操作。
## 操作菜单
更多操作
basic.tsx
复制代码
```tsx lineNumbers file="../../src/examples/dropdown/basic.tsx"
import type { DropdownItem } from '@ifhover/leaf-ui';
import { Button, Dropdown, useMessage } from '@ifhover/leaf-ui';
import { ChevronDown, Copy, Pencil, Trash2 } from 'lucide-react';
const items: DropdownItem[] = [
{ key: 'edit', label: '编辑', icon: },
{ key: 'copy', label: '复制', icon: },
{ key: 'archive', label: '归档', disabled: true },
{ key: 'divider', type: 'divider' },
{ key: 'delete', label: '删除', icon: , danger: true },
];
export function DropdownBasic() {
const { message } = useMessage();
return (
message.info(key)}>
}>
更多操作
);
}
```
展开代码
## 扩展用法
视图与操作
extensions.tsx
复制代码
```tsx lineNumbers file="../../src/examples/dropdown/extensions.tsx"
import { Button, Dropdown } from '@ifhover/leaf-ui';
import { useState } from 'react';
export function ExtensionDemo() {
const [checked, setChecked] = useState(true);
const [view, setView] = useState('list');
return (
setView('list'),
},
{
key: 'grid',
label: '网格',
type: 'radio',
group: 'view',
checked: view === 'grid',
onCheckedChange: () => setView('grid'),
},
],
},
{ key: 'line', type: 'divider' },
{
key: 'detail',
label: '显示详情',
type: 'checkbox',
checked,
onCheckedChange: setChecked,
},
{
key: 'more',
label: '更多操作',
children: [
{ key: 'copy', label: '复制' },
{ key: 'archive', label: '归档' },
],
},
]}
>
);
}
```
展开代码
## 悬停与右键
悬停展开在此右键点击
capabilities.tsx
复制代码
```tsx lineNumbers file="../../src/examples/dropdown/capabilities.tsx"
import { Button, Dropdown, Space } from '@ifhover/leaf-ui';
const items = [
{ key: 'edit', label: 'Edit' },
{ key: 'more', label: 'More', children: [{ key: 'archive', label: 'Archive' }] },
];
export function Capabilities() {
return (
);
}
```
展开代码
## Dropdown API
| 属性 | 类型 | 默认值 | 说明 |
| ------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ---------------- | ------------------------------- |
| `popupPlacement` | `'top' \| 'top-start' \| 'top-end' \| 'bottom' \| 'bottom-start' \| 'bottom-end' \| 'left' \| 'left-start' \| 'left-end' \| 'right' \| 'right-start' \| 'right-end'` | — | 浮层相对触发控件的位置。 |
| `popupClassName` | `string` | — | 浮层的自定义类名。 |
| `popupStyle` | `CSSProperties` | — | 浮层的自定义样式。 |
| `popupRender` | `(content: React.ReactNode) => React.ReactNode` | — | 包装或补充面板内容，保留传入的内容以维持交互。 |
| `getPopupContainer` | `() => Element \| DocumentFragment` | — | 返回浮层的挂载容器，也可返回 ShadowRoot。 |
| `items` | `readonly `[`DropdownItem`](#dropdownitem)`[]` | 必填 | 必需。菜单项列表 |
| `children` | `ReactElement< ButtonHTMLAttributes & { ref?: Ref } >` | 必填 | 必需。单个按钮，支持 Leaf Button 或 button |
| `disabled` | `boolean` | `false` | 禁用交互。 |
| `open` | `boolean` | `false` | 受控 / 初始展开状态 |
| `defaultOpen` | `boolean` | `false` | 受控 / 初始展开状态 |
| `onOpenChange` | `(open: boolean) => void` | — | 展开状态变更 |
| `onSelect` | `(key: string) => void` | — | 选择可用菜单项 |
| `placement` | `'top-start' \| 'top-end' \| 'bottom-start' \| 'bottom-end'` | `'bottom-start'` | 弹出方向 |
| `popupWidth` | `number \| string` | `—` | 浮层宽度 / 最大宽度 |
| `popupMaxWidth` | `number \| string` | `420` | 浮层宽度 / 最大宽度 |
| `trigger` | `'click' \| 'hover' \| 'contextMenu' \| readonly ('click' \| 'hover' \| 'contextMenu')[]` | `'click'` | 触发方式；下拉菜单支持点击、悬停和右键。 |
| `mouseEnterDelay` | `number` | `100` | 设置 mouseEnterDelay。 |
| `mouseLeaveDelay` | `number` | `150` | 设置 mouseLeaveDelay。 |
| `itemRender` | `(item: `[`DropdownItem`](#dropdownitem)`) => ReactNode` | — | 自定义条目内容。 |
## DropdownItem
| 属性 | 类型 | 默认值 | 说明 |
| ----------------- | --------------------------------------------------------- | -------- | --------------------- |
| `key` | `string` | 必填 | 必需。唯一标识 |
| `label` | `ReactNode` | — | 文字与图标 |
| `icon` | `ReactNode` | — | 文字与图标 |
| `type` | `'item' \| 'divider' \| 'group' \| 'checkbox' \| 'radio'` | `'item'` | 菜单项或分割线 |
| `children` | `readonly `[`DropdownItem`](#dropdownitem)`[]` | — | 子内容；嵌套数据类型表示子节点。 |
| `disabled` | `boolean` | `false` | 禁用交互。 |
| `danger` | `boolean` | `false` | 禁用 / 危险操作 |
| `checked` | `boolean` | — | 设置 checked。 |
| `group` | `string` | — | 条目的分组标题。 |
| `closeOnSelect` | `boolean` | — | 设置 closeOnSelect。 |
| `onCheckedChange` | `(checked: boolean) => void` | — | 设置 onCheckedChange。 |
| `href` | `string` | — | 链接目标。 |
| `target` | `string` | — | 目标的选择器或返回元素的函数；省略时居中。 |
| `onClick` | `(event: MouseEvent) => void` | — | 点击此项时触发 |
## 类型
定义组件属性或组装变量时可导入相关类型。
```ts
import type { DropdownProps, DropdownItem } from '@ifhover/leaf-ui';
```
## 使用说明
按钮按 ↓ / ↑ 打开菜单，菜单中使用方向键、Home、End 或文字首字符定位；Enter 选择，Escape 关闭并恢复按钮焦点。disabled 菜单项与分割线会被跳过。