Leaf UI
  • 简体中文

      • Dropdown 下拉菜单

      在菜单中收纳更多操作。

      操作菜单

      交互预览操作菜单
      basic.tsx
      import { Button, Dropdown, type DropdownItem, useMessage } from '@sudden3/leaf-ui';
import { ChevronDown, Copy, Pencil, Trash2 } from 'lucide-react';

const items: DropdownItem[] = [
  { key: 'edit', label: '编辑', icon: <Pencil size={15} /> },
  { key: 'copy', label: '复制', icon: <Copy size={15} /> },
  { key: 'archive', label: '归档', disabled: true },
  { key: 'divider', type: 'divider' },
  { key: 'delete', label: '删除', icon: <Trash2 size={15} />, danger: true },
];
export function DropdownBasic() {
  const { message, contextHolder } = useMessage();
  return (
    <>
      <Dropdown items={items} onSelect={(key) => message.info(key)}>
        <Button variant="outline" endIcon={<ChevronDown size={16} />}>
          更多操作
        </Button>
      </Dropdown>
      {contextHolder}
    </>
  );
}
      属性类型默认值说明
      itemsreadonly DropdownItem[]必填菜单项列表
      childrenReactElement<ButtonHTMLAttributes<HTMLButtonElement>>必填单个按钮，支持 Leaf Button 或 button
      open / defaultOpenbooleanfalse受控 / 初始展开状态
      disabledbooleanfalse禁用触发器
      onOpenChange(open: boolean) => void—展开状态变更
      onSelect(key: string) => void—选择可用菜单项
      placement'top-start' | 'top-end' | 'bottom-start' | 'bottom-end''bottom-start'弹出方向
      popupWidth / popupMaxWidthnumber | string— / 420浮层宽度 / 最大宽度
      属性类型默认值说明
      keystring必填唯一标识
      label / iconReactNode—文字与图标
      type'item' | 'divider''item'菜单项或分割线
      disabled / dangerbooleanfalse禁用 / 危险操作
      onClick() => void—点击此项时触发

      类型

      定义组件属性或组装变量时可导入相关类型。

      import type { DropdownProps, DropdownItem } from '@sudden3/leaf-ui';

      使用说明

      按钮按 ↓ / ↑ 打开菜单，菜单中使用方向键、Home、End 或文字首字符定位；Enter 选择，Escape 关闭并恢复按钮焦点。disabled 菜单项与分割线会被跳过。