#Dropdown 下拉菜单

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: <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 } = useMessage();
  return (
    <Dropdown items={items} onSelect={(key) => message.info(key)}>
      <Button variant="outline" endIcon={<ChevronDown size={16} />}>
        更多操作
      </Button>
    </Dropdown>
  );
}

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 (
    <Dropdown
      items={[
        {
          key: 'group',
          label: '视图',
          type: 'group',
          children: [
            {
              key: 'list',
              label: '列表',
              type: 'radio',
              group: 'view',
              checked: view === 'list',
              onCheckedChange: () => 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: '归档' },
          ],
        },
      ]}
    >
      <Button variant="outline">视图与操作</Button>
    </Dropdown>
  );
}

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 (
    <Space>
      <Dropdown trigger="hover" items={items}>
        <Button variant="outline">{'悬停展开'}</Button>
      </Dropdown>
      <Dropdown trigger="contextMenu" items={items}>
        <Button variant="outline">{'在此右键点击'}</Button>
      </Dropdown>
    </Space>
  );
}