en-US

The simplest usage.

zh-CN

最简单的用法。

import { useAsync } from '@react-devui/hooks';
import { DownOutlined, ExperimentOutlined } from '@react-devui/icons';
import { DDropdown, DButton } from '@react-devui/ui';

export default function Demo() {
  const async = useAsync();

  return (
    <>
      <DDropdown
        dList={[
          { id: 'Item1', label: 'Item 1', type: 'item' },
          { id: 'Item2', label: 'Item 2', type: 'item' },
          { id: 'Item3', label: 'Item 3', type: 'item', icon: <ExperimentOutlined />, disabled: true },
        ]}
      >
        <DButton dType="text" dIcon={<DownOutlined />} dIconRight>
          Hover me
        </DButton>
      </DDropdown>
      <DDropdown
        dList={[
          { id: 'Item1', label: 'Item 1', type: 'item' },
          { id: 'Item2', label: 'Item 2', type: 'item', icon: <ExperimentOutlined /> },
          {
            id: 'Group3',
            label: 'Group 3',
            type: 'group',
            children: [
              { id: 'Item31', label: 'Item 31', type: 'item' },
              { id: 'Item32', label: 'Item 32', type: 'item', disabled: true },
            ],
          },
          { id: 'Item4', label: 'Item 4', type: 'item' },
        ]}
        dTrigger="click"
        onItemClick={(id) => {
          return ['Item1', 'Item2'].includes(id)
            ? new Promise((r) => {
                async.setTimeout(() => {
                  r(true);
                }, 3000);
              })
            : true;
        }}
      >
        <DButton dType="secondary" dIcon={<DownOutlined />} dIconRight>
          Click me
        </DButton>
      </DDropdown>
    </>
  );
}