Dropdown 下拉菜单

向下弹出的列表。

import { Dropdown } from 'uiw';
// or
import Dropdown from '@uiw/react-dropdown';

基本用法

```jsx mdx:preview&bg=#fff import React from 'react'; import { Dropdown, Menu, ButtonGroup, Button, Divider, Icon } from 'uiw';

const menu = (

class Demo extends React.Component { render() { return (

export default Demo;

### 被禁用

```jsx mdx:preview&bg=#fff
import React from 'react';
import { Dropdown, Menu, ButtonGroup, Button } from 'uiw';

const menu = (
  <div>
    <Menu bordered style={{ maxWidth: 200 }}>
      <Menu.Item icon="reload" text="重新加载" />
      <Menu.Divider />
      <Menu.Item icon="heart-on" text="另存为" active />
      <Menu.Item icon="appstore" text="应用商城" />
      <Menu.Item icon="bar-chart" text="月统计报表导出" />
      <Menu.Item icon="setting" text="偏好设置" />
    </Menu>
  </div>
);

export default function Demo() {
  return(
    <div>
      <ButtonGroup style={{ marginRight: 5, display: 'inline-block' }}>
        <Button disabled icon="copy">点击右边</Button>
        <Dropdown disabled trigger="click" placement="bottomRight" menu={menu}>
          <Button icon="more" />
        </Dropdown>
      </ButtonGroup>
      <Dropdown disabled menu={menu}>
        <Button basic type="link"> (超连接样式)link </Button>
      </Dropdown>
      <Dropdown disabled menu={menu}>
        <Button type="primary">主要按钮</Button>
      </Dropdown>
      <Dropdown disabled menu={menu}>
        <Button type="success">成功按钮</Button>
      </Dropdown>
      <Dropdown disabled menu={menu}>
        <Button type="warning">警告按钮</Button>
      </Dropdown>
      <Dropdown disabled menu={menu}>
        <Button type="danger">错误按钮</Button>
      </Dropdown>
      <Dropdown disabled menu={menu}>
        <Button type="light">亮按钮</Button>
      </Dropdown>
      <Dropdown disabled menu={menu}>
        <Button type="dark">暗按钮</Button>
      </Dropdown>
    </div>
  );
}

弹出位置

```jsx mdx:preview&bg=#fff import React from 'react'; import { Dropdown, Menu, Divider, ButtonGroup, Button } from 'uiw';

const menu = (

export default function Demo() { return(

### 选择器

```jsx mdx:preview&bg=#fff
import React from 'react';
import { Dropdown, Menu, Button, Icon } from 'uiw';

function Select(props) {
  const { option, onChange } = props;
  const [open, setOpen] = React.useState(false);
  const [value, setValue] = React.useState(props.value);
  const label = option.find(item => value === item.value);

  React.useEffect(() => {
    if (props.value !== value) {
      setValue(props.value);
    }
  }, [props.value]);

  return (
    <Dropdown
      trigger="click"
      onVisibleChange={(isOpen) => setOpen(isOpen)}
      isOpen={open}
      menu={
        <div>
          <Menu bordered style={{ minWidth: 120 }}>
            {option.map((item, idx) => {
              const active = value === item.value;
              return (
                <Menu.Item
                  key={idx}
                  active={active}
                  text={item.label}
                  onClick={(e) => {
                    setValue(item.value)
                    setOpen(false)
                    onChange && onChange(item.value, e)
                  }}
                />
              );
            })}
          </Menu>
        </div>
      }
    >
      <Button type="link">{label.label}<Icon type={open ? 'up' : 'down'} /></Button>
    </Dropdown>
  )
}

const option = [
  { label: '往返', value: 1 },
  { label: '单程', value: 2 },
  { label: '联程', value: 3 },
  { label: 'Nomad', value: 4 },
];

const option2 = [
  { label: '经济舱', value: 1 },
  { label: '豪华经济舱', value: 2 },
  { label: '商务舱', value: 3 },
  { label: '头等舱', value: 4 },
];


export default function Demo() {
  return(
    <div>
      <Select option={option} value={1} onChange={(item) => { console.log('item', item); }} />
      <Select option={option2} value={2} onChange={(item) => { console.log('item', item); }} />
    </div>
  );
}

Props

更多属性文档请参考 OverlayTrigger。