组件

Dropdown 下拉菜单

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

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

获取组件

import { Dropdown } from 'rsuite';

演示

默认

触发事件

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

  • click (默认值)
  • hover
  • contextMenu

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

选项激活状态

禁用状态

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

没有插入号

带图标的

分割线与面板

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

菜单位置

多级菜单

自定义

与按钮组合使用

菜单项

与 Popover 组合使用

与 next/link 组合

Props

<Dropdown>

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

<Dropdown.Item>

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

<Dropdown.Menu>

属性名称 类型 描述
icon React.Element<typeof Icon> 设置图标
pullLeft boolean 子菜单从左侧展开，默认为右侧展开
title string 作为子菜单定义标题