---
title: Dropdown 下拉菜单 (done)
order: 21
group:
  path: /components
nav:
  title: 组件
  path: /components
---

## TODO

`Dropdown.Button` 封装

## 使用

`Dropdown` 组件一般用在顶部导航栏和列表中，当页面上的操作命令过多时，用此组件可以收纳操作元素。

### 基本使用

触发器元素建议使用 `a` 标签包裹

```jsx
import React from 'react';
import { Dropdown, Menu, Icons } from 'baas-ui';

const { CaretDownIcon } = Icons;

const menu = (
  <Menu>
    <Menu.Item key="1">菜单1</Menu.Item>
    <Menu.Item key="2">菜单2</Menu.Item>
    <Menu.Item key="3">菜单1</Menu.Item>
  </Menu>
);

export default () => (
  <div style={{ display: 'flex' }}>
    <div>
      <Dropdown overlay={menu}>
        <a style={{ display: 'flex', alignItems: 'center', width: 180 }}>
          下拉菜单
          <CaretDownIcon />
        </a>
      </Dropdown>
    </div>
    <div>
      <Dropdown overlay={menu}>
        <a
          style={{
            display: 'flex',
            alignItems: 'center',
            justifyContent: 'center',
            width: 180,
          }}
        >
          下拉菜单
          <CaretDownIcon />
        </a>
      </Dropdown>
    </div>
    <div>
      <Dropdown overlay={menu}>
        <a
          style={{
            display: 'flex',
            alignItems: 'center',
            justifyContent: 'flex-end',
            width: 180,
          }}
        >
          下拉菜单
          <CaretDownIcon />
        </a>
      </Dropdown>
    </div>
    <div>
      <Dropdown disabled overlay={menu}>
        <a
          style={{
            display: 'flex',
            alignItems: 'center',
            justifyContent: 'flex-end',
            width: 180,
          }}
        >
          下拉菜单
          <CaretDownIcon />
        </a>
      </Dropdown>
    </div>
  </div>
);
```

### 弹出位置

通过设置 `placement` 为 `bottomLeft`(默认)、`bottomCenter`、`bottomRight`、`topLeft`、`topCenter`、`topRight` 来展示弹出层的位置。

```jsx
import React from 'react';
import { Dropdown, Menu, Icons } from 'baas-ui';

const { CaretDownIcon } = Icons;

const menu = (
  <Menu>
    <Menu.Item key="1">菜单1</Menu.Item>
    <Menu.Item key="2">菜单2</Menu.Item>
    <Menu.Item key="3">菜单1</Menu.Item>
  </Menu>
);

export default () => (
  <div style={{ display: 'flex' }}>
    <div style={{ width: 220 }}>
      <Dropdown
        overlay={menu}
        overlayStyle={{ width: 200 }}
        placement="bottomLeft"
      >
        <a style={{ display: 'flex', alignItems: 'center', width: 120 }}>
          bottomLeft
          <CaretDownIcon />
        </a>
      </Dropdown>
    </div>
    <div style={{ width: 220 }}>
      <Dropdown
        overlay={menu}
        overlayStyle={{ width: 200 }}
        placement="bottomCenter"
      >
        <a
          style={{
            display: 'flex',
            alignItems: 'center',
            justifyContent: 'center',
            width: 120,
          }}
        >
          bottomCenter
          <CaretDownIcon />
        </a>
      </Dropdown>
    </div>
    <div style={{ width: 220 }}>
      <Dropdown
        overlay={menu}
        overlayStyle={{ width: 200 }}
        placement="bottomRight"
      >
        <a
          style={{
            display: 'flex',
            alignItems: 'center',
            justifyContent: 'flex-end',
            width: 120,
          }}
        >
          bottomRight
          <CaretDownIcon />
        </a>
      </Dropdown>
    </div>
  </div>
);
```

### 隐藏操作

```jsx
import React from 'react';
import { Dropdown, Menu, Icons } from 'baas-ui';

const { CaretDownIcon, EllipsisIcon } = Icons;

const menu = (
  <Menu>
    <Menu.Item key="1">编辑</Menu.Item>
    <Menu.Item key="2">更新</Menu.Item>
    <Menu.Item key="3">删除</Menu.Item>
  </Menu>
);

export default () => (
  <Dropdown overlay={menu} overlayStyle={{ width: 136 }}>
    <a>
      <EllipsisIcon />
    </a>
  </Dropdown>
);
```

### 下拉菜单带图标

给 `Menu.Item` 传递 `icon`，可以设置菜单的图标，如果下拉选项中有 icon，icon 和 title 之间的默认距离是 `4px`。

```jsx
import React from 'react';
import { Dropdown, Menu, Icons } from 'baas-ui';

const { CaretDownIcon, UserIcon, SettingIcon } = Icons;

const menu = (
  <Menu>
    <Menu.Item key="1" icon={<UserIcon />}>
      用户资料
    </Menu.Item>
    <Menu.Item key="2" icon={<SettingIcon />}>
      个人设置
    </Menu.Item>
  </Menu>
);

export default () => (
  <Dropdown overlay={menu} overlayStyle={{ width: 136 }}>
    <a style={{ display: 'flex', alignItems: 'center', width: 120 }}>
      个人中心
      <CaretDownIcon />
    </a>
  </Dropdown>
);
```

### 暂时不支持 Dropdown.Button