---
name: Dropdown 下拉菜单
route: /guide/dropdown
menu: other
---

import JsxParser from "react-jsx-parser";
import {
  MessageBox,
  InlineCode,
  Example,
  Code,
  PropsTable
} from "theme";
import { Dropdown, DropdownOptions } from "shineDev";
import code from "./demo";
import "./demo/index.scss";

# Dropdown 下拉菜单

## 概述

下拉菜单是可切换的，是以列表格式显示链接的上下文菜单。

## 代码示例

<MessageBox messageType="info">
  为了让用户直观地查看代码演示，我们加入了{" "}
  <InlineCode>shine-dropdown-helper</InlineCode>{" "}
  修饰符，在开发过程中无需配置该字段。
</MessageBox>

#### 基础示例

我们内置了一套 `Dropdown` 的基础样式，通过设置 `options` 属性，即可实现一个简单的下拉菜单，也可以指定不同背景颜色的下拉按钮。

<Example 
  display={<JsxParser {...code.basic} />}
  code={{code:code.basic.jsx}}
  components={code.basic.components}
/>

#### 带图标的下拉菜单

适用图标可以更语义化描述按钮行为。

<Example 
  display={<JsxParser {...code.icon} />}
  code={{code:code.icon.jsx}}
  components={code.icon.components}
/>

#### 仅图标的下拉菜单

仅图标的下拉菜单将不主动展示下拉箭头和文本描述，通过图标实现语义化。

<Example 
  display={<JsxParser {...code.onlyIcon} />}
  code={{code:code.onlyIcon.jsx}}
  components={code.onlyIcon.components}
/>

#### 独立的下拉菜单

使用独立的下拉菜单功能可以拆分出操作按钮和下拉按钮。

<Example 
  display={<JsxParser {...code.split} />}
  code={{code:code.split.jsx}}
  components={code.split.components}
/>

#### 不同尺寸

除了默认尺寸的下拉菜单外，我们还支持更大尺寸的 `lg` 和更小尺寸的 `sm` 。

<Example 
  display={<JsxParser {...code.size} />}
  code={{code:code.size.jsx}}
  components={code.size.components}
/>

#### 菜单弹出方向

可以向 上 / 下 / 左 / 右 指定菜单的弹出方向。

<Example 
  display={<JsxParser {...code.direction} />}
  code={{code:code.direction.jsx}}
  components={code.direction.components}
/>

#### 菜单对齐方式

菜单面板可以与菜单按钮选择左对齐或者右对齐。

<Example 
  display={<JsxParser {...code.align} />}
  code={{code:code.align.jsx}}
  components={code.align.components}
/>


#### 其他个性化菜单项

除了常规的按钮，我们还提供了文本项 `label` 或分割线 `divider` ，用于区分不同的业务场景，同时，在按钮菜单项，我们也提供了禁用状态 `disabled` 和激活状态 `active` 。

<Example 
  display={<JsxParser {...code.item} />}
  code={{code:code.item.jsx}}
  components={code.item.components}
/>

#### 绑定事件

下拉菜单项遵循 `Button` 组件库相关配置参数，响应事件也与该组件一致。

<Example 
  display={
    <div className="shine-dropdown-helper">
        <Dropdown 
          title="下拉菜单"
          options={[
            {label:'操作按钮一', onClick: ()=>alert('操作按钮一')},
            {label:'操作按钮二', onClick: ()=>alert('操作按钮二')},
            {label:'操作按钮三', onClick: ()=>alert('操作按钮三')}
          ]}
        />
      </div>
  }
  code={{code:code.event.jsx}}
  components={code.event.components}
/>

## 配置参数

#### Dropdown
<PropsTable of={Dropdown} />

#### Options
<PropsTable of={DropdownOptions} />