en-US

Show arrows.

zh-CN

展示箭头。

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

const list = [
  { id: 'Item1', label: 'Item 1', type: 'item' },
  { id: 'Item2', label: 'Item 2', type: 'item', disabled: true },
  { id: 'Item3', label: 'Item 3', type: 'item' },
];
export default function Demo() {
  return (
    <>
      {['top-left', 'top', 'top-right'].map((placement) => (
        <DDropdown key={placement} dList={list} dPlacement={placement} dArrow>
          <DButton dType="secondary" dIcon={<DownOutlined />} dIconRight>
            {placement}
          </DButton>
        </DDropdown>
      ))}
      <br />
      {['bottom-left', 'bottom', 'bottom-right'].map((placement) => (
        <DDropdown key={placement} dList={list} dPlacement={placement} dArrow>
          <DButton dType="secondary" dIcon={<DownOutlined />} dIconRight>
            {placement}
          </DButton>
        </DDropdown>
      ))}
    </>
  );
}