en-US

popup menu.

zh-CN

弹出式菜单。

import { useState } from 'react';

import { AppstoreOutlined, SettingOutlined, ExperimentOutlined } from '@react-devui/icons';
import { DMenu } from '@react-devui/ui';

export default function Demo() {
  const [activeId, setActiveId] = useState<string>('Item22');

  return (
    <DMenu
      dWidth={300}
      dList={[
        {
          id: 'Sub1',
          title: 'Sub 1',
          type: 'sub',
          icon: <AppstoreOutlined />,
          children: [
            { id: 'Item11', title: 'Item 11', type: 'item', disabled: true },
            {
              id: 'Sub12',
              title: 'Sub 12',
              type: 'sub',
              children: [
                { id: 'Item121', title: 'Item 121', type: 'item' },
                { id: 'Item122', title: 'Item 122', type: 'item' },
              ],
            },
            { id: 'Item13', title: 'Item 13', type: 'item' },
            {
              id: 'Group14',
              title: 'Group 14',
              type: 'group',
              children: [
                { id: 'Item141', title: 'Item 141', type: 'item' },
                { id: 'Item142', title: 'Item 142', type: 'item' },
              ],
            },
          ],
        },
        {
          id: 'Sub2',
          title: 'Sub 2',
          type: 'sub',
          icon: <SettingOutlined />,
          children: [
            {
              id: 'Group21',
              title: 'Group 21',
              type: 'group',
            },
            { id: 'Item22', title: 'Item 22', type: 'item' },
            {
              id: 'Sub23',
              title: 'Sub 23',
              type: 'sub',
            },
          ],
        },
        {
          id: 'Sub3',
          title: 'Sub 3',
          type: 'sub',
          icon: <ExperimentOutlined />,
          disabled: true,
          children: [{ id: 'Item31', title: 'Item 31', type: 'item' }],
        },
        { id: 'Item4', title: 'Item 4', type: 'item' },
      ]}
      dActive={activeId}
      dMode="popup"
      onActiveChange={setActiveId}
    ></DMenu>
  );
}