Dropdown 下拉菜单 #

下拉菜单是一种导航，如果需要选择值请使用 SelectPicker。

• <Dropdown> 下拉菜单。
• <Dropdown.Item> 下拉菜单选项。
• <Dropdown.Menu> 下拉菜单中创建子菜单。

获取组件 #

import { Dropdown } from 'rsuite';

// or
import Dropdown from 'rsuite/Dropdown';

演示 #

默认 #

触发事件 #

通过 trigger 属性设置触发事件，支持事件:

• click (默认值)
• hover
• contextMenu

同时支持多个事件 Array<click, hover, contextMenu>

选项激活状态 #

禁用状态 #

可以禁用整个组件，也可以禁用单个选项，只需配置 disabled 属性。

继承按钮属性 #

Dropdown 的 toggleAs 属性默认值为是 Button, 可以设置按钮相关的属性（例如: size, appearance）, 以按钮的样式展示。

没有箭头图标 #

带图标的 #

分割线与面板 #

• divider 设置分割选项。
• panel 设置一个面板。

菜单位置 #

多级菜单 #

菜单项 #

自定义 Toggle #

与 Popover 组合使用 #

与按钮组合使用 #

与 next/link 组合 #

Props #

type Placement =
  | 'bottomStart'
  | 'bottomEnd'
  | 'topStart'
  | 'topEnd'
  | 'leftStart'
  | 'leftEnd'
  | 'rightStart'
  | 'rightEnd';

type Trigger = 'click' | 'hover' | 'contextMenu' | Array<'click' | 'hover' | 'contextMenu'>;

<Dropdown> #

属性名称	类型 (默认值)	描述
activeKey	string	激活状态的选项，对应 Dropdown.Item 中的 eventKey
classPrefix	string ('dropdown')	组件 CSS 类的前缀
disabled	boolean	禁用组件
icon	Element<typeof Icon>	设置图标
menuStyle	CSSProperties	菜单样式
onClose	() => void	菜单关闭的回调函数
onOpen	() => void	菜单弹出的回调函数
onSelect	(eventKey: string, event) => void	选择后的回调函数
onToggle	(open?: boolean) => void	菜单状态切换的回调函数
placement	Placement ('bottomStart')	菜单显示位置
renderToggle	(props, ref) => any;	自定义 Toggle
title	ReactNode	菜单默认显示内容
toggleAs	ElementType (Button)	为组件自定义元素类型
toggleClassName	string	设置 Toggle 的 className
trigger	Trigger ('click')	触发事件

<Dropdown.Item> #

属性名称	类型 (默认值)	描述
active	boolean	选中当前选项
as	ElementType ('a')	为组件自定义元素类型
children *	ReactNode	组件内容
classPrefix	string ('dropdown-item')	组件 CSS 类的前缀
disabled	boolean	禁用当前选项
divider	boolean	显示为分割线
eventKey	string	当前选项的值
icon	Element<typeof Icon>	设置图标
onSelect	(eventKey: any, event) => void	选中当前选项的回调函数
panel	boolean	显示一个自定义的面板

<Dropdown.Menu> #

属性名称	类型	描述
icon	Element<typeof Icon>	设置图标
title	string	作为子菜单定义标题