# DropdownMenu 下拉菜单

### 介绍

向下弹出的菜单列表。

### 引入

```js
import { DropdownMenu } from 'rc-ui-lib';
```

## 代码演示

### 基础用法

```jsx
const option1 = [
  { text: '全部商品', value: 0 },
  { text: '新款商品', value: 1 },
  { text: '活动商品', value: 2 },
];
const option2 = [
  { text: '默认排序', value: 'a' },
  { text: '好评排序', value: 'b' },
  { text: '销量排序', value: 'c' },
];

export default () => {
  const [value, setValue] = useState({});
  return (
    <DropdownMenu>
      <DropdownMenu.Item name="item1" options={option1} />
      <DropdownMenu.Item name="item2" options={option2} />
    </DropdownMenu>
  );
};
```

### 自定义菜单内容

```jsx
const option1 = [
  { text: '全部商品', value: 0 },
  { text: '新款商品', value: 1 },
  { text: '活动商品', value: 2 },
];
export default () => {
  const [value, setValue] = useState();
  return (
    <DropdownMenu>
      <DropdownMenu.Item name="ite" options={option1} />
      <DropdownMenu.Item title="筛选" name="value2">
        <Cell center title="包邮" rightIcon={<Switch size={24} />} />
        <Cell center title="团购" rightIcon={<Switch size={24} />} />
      </DropdownMenu.Item>
    </DropdownMenu>
  );
};
```

### 自定义高亮颜色

```jsx
const option1 = [
  { text: '全部商品', value: 0 },
  { text: '新款商品', value: 1 },
  { text: '活动商品', value: 2 },
];
const option2 = [
  { text: '默认排序', value: 'a' },
  { text: '好评排序', value: 'b' },
  { text: '销量排序', value: 'c' },
];

export default () => {
  const [value, setValue] = useState();
  return (
    <DropdownMenu activeColor="#f44336">
      <DropdownMenu.Item name="item1" options={option1} />
      <DropdownMenu.Item name="item2" options={option2} />
    </DropdownMenu>
  );
};
```

### 向上展开

```jsx
const option1 = [
  { text: '全部商品', value: 0 },
  { text: '新款商品', value: 1 },
  { text: '活动商品', value: 2 },
];
const option2 = [
  { text: '默认排序', value: 'a' },
  { text: '好评排序', value: 'b' },
  { text: '销量排序', value: 'c' },
];

export default () => {
  const [value, setValue] = useState();
  return (
    <DropdownMenu direction="up">
      <DropdownMenu.Item name="item1" options={option1} />
      <DropdownMenu.Item name="item2" options={option2} />
    </DropdownMenu>
  );
};
```

### 禁用菜单

```jsx
const option1 = [
  { text: '全部商品', value: 0 },
  { text: '新款商品', value: 1 },
  { text: '活动商品', value: 2 },
];
const option2 = [
  { text: '默认排序', value: 'a' },
  { text: '好评排序', value: 'b' },
  { text: '销量排序', value: 'c' },
];

export default () => {
  const [value, setValue] = useState();
  return (
    <DropdownMenu disabled>
      <DropdownMenu.Item name="item1" options={option1} />
      <DropdownMenu.Item name="item2" options={option2} />
    </DropdownMenu>
  );
};
```

## API

### DropdownMenu Props

| 参数                | 说明                         | 类型               | 默认值    |
| ------------------- | ---------------------------- | ------------------ | --------- |
| activeColor         | 菜单标题和选项的选中态颜色   | _string_           | `#ee0a24` |
| direction           | 菜单展开方向，可选值为`up`   | _string_           | `down`    |
| zIndex              | 菜单栏 z-index 层级          | _number \| string_ | `10`      |
| duration            | 动画时长，单位秒             | _number \| string_ | `0.2`     |
| overlay             | 是否显示遮罩层               | _boolean_          | `true`    |
| closeOnClickOverlay | 是否在点击遮罩层后关闭菜单   | _boolean_          | `true`    |
| closeOnClickOutside | 是否在点击外部元素后关闭菜单 | _boolean_          | `true`    |

### DropdownItem Props

| 参数        | 说明                       | 类型                           | 默认值         |
| ----------- | -------------------------- | ------------------------------ | -------------- |
| name        | 当前选中项对应的 value key | _number \| string_             | -              |
| title       | 菜单项标题                 | _ReactNode_                    | 当前选中项文字 |
| placeholder | 占位文本                   | _string_                       | `请选择`       |
| options     | 选项数组                   | _Option[]_                     | `[]`           |
| disabled    | 是否禁用菜单               | _boolean_                      | `false`        |
| titleClass  | 标题额外类名               | _string_                       | -              |
| teleport    | 指定挂载的节点             | _HTMLElment () => HTMLElement_ | -              |

### DropdownMenu Events

| 事件名   | 说明                    | 回调参数 | 参数类型 |
| -------- | ----------------------- | -------- | -------- |
| onChange | 子组件 value 变化时触发 | value    | _Option_ |

### DropdownItem Events

| 事件名   | 说明                          | 回调参数 | 参数类型 |
| -------- | ----------------------------- | -------- | -------- |
| onOpen   | 打开菜单栏时触发              | -        |
| onOpened | 打开菜单栏且动画结束后触发    | -        |
| onClose  | 关闭菜单栏时触发              | -        |
| onClosed | 关闭菜单栏且动画结束后触发    | -        |
| onChange | 点击选项导致 value 变化时触发 | value    | _Option_ |

### Option 数据结构

| 键名  | 说明                                       | 类型                        |
| ----- | ------------------------------------------ | --------------------------- |
| name  | 文案                                       | _string_                    |
| value | 选项值                                     | _number \| string_          |
| icon  | 选项左侧[图标名称](#/zh-CN/icon)或图片链接 | _string \| React.ReactNode_ |

### DropdownMenu 方法

通过 ref 可以获取到 DropdownMenu 实例并调用实例方法.

| 方法名 | 说明     | 参数 | 返回值 |
| ------ | -------- | ---- | ------ |
| close  | 关闭菜单 | -    | -      |

### 类型定义

组件导出以下类型定义：

```js
import type { DropdownMenuInstance } from 'rc-ui-lib';
```

`DropdownMenuInstance` 是组件 `DropdownMenu` 实例的类型，用法如下：

```js
import { useRef } from 'react';
import type { DropdownMenuInstance } from 'rc-ui-lib/es/dropdown-menu';

const DropdownMenuRef = useRef < DropdownMenuInstance > null;

DropdownMenuRef.current?.close();
```

## 主题定制

### 样式变量

组件提供了下列 CSS 变量，可用于自定义样式，使用方法请参考 [ConfigProvider 组件](#/zh-CN/config-provider)。

| 名称                                         | 默认值                                  | 描述 |
| -------------------------------------------- | --------------------------------------- | ---- |
| --rc-dropdown-menu-height                    | _48px_                                  | -    |
| --rc-dropdown-menu-background-color          | _var(--rc-white)_                       | -    |
| --rc-dropdown-menu-box-shadow                | _0 2px 12px fade(var(--rc-gray-7), 12)_ | -    |
| --rc-dropdown-menu-title-font-size           | _15px_                                  | -    |
| --rc-dropdown-menu-title-text-color          | _var(--rc-text-color)_                  | -    |
| --rc-dropdown-menu-title-active-text-color   | _var(--rc-danger-color)_                | -    |
| --rc-dropdown-menu-title-disabled-text-color | _var(--rc-gray-6)_                      | -    |
| --rc-dropdown-menu-title-padding             | _0 var(--rc-padding-xs)_                | -    |
| --rc-dropdown-menu-title-line-height         | _var(--rc-line-height-lg)_              | -    |
| --rc-dropdown-menu-option-active-color       | _var(--rc-danger-color)_                | -    |
| --rc-dropdown-menu-content-max-height        | _80%_                                   | -    |
| --rc-dropdown-item-z-index                   | _10_                                    | -    |
