Dropdown 下拉菜单

开发指南

何时使用

当页面上的操作命令过多时,用此组件可以收纳操作元素。点击或移入触点,会出现一个下拉菜单。可在列表中进行选择,并执行相应的命令。

使用注意

  • 若要使用无障碍的Dropdown,推荐使用<Dropdown triggerType={["click", "hover"]}> (请勿使用triggerType="focus")。我们认为,菜单类元素需要由用户确认后再展开才是一种无障碍友好的实践。

API

Dropdown

继承 Popup 的 API,除非特别说明

参数说明类型默认值
children弹层内容ReactNode-
visible弹层当前是否显示Boolean-
defaultVisible弹层默认是否显示Booleanfalse
onVisibleChange弹层显示或隐藏时触发的回调函数

签名:
Function(visible: Boolean, type: String) => void
参数:
visible: {Boolean} 弹层是否显示
type: {String} 触发弹层显示或隐藏的来源 fromContent 表示由Dropdown内容触发; fromTrigger 表示由trigger的点击触发; docClick 表示由document的点击触发
Functionfunc.noop
trigger触发弹层显示或者隐藏的元素ReactNode-
triggerType触发弹层显示或隐藏的操作类型,可以是 'click','hover',或者它们组成的数组,如 'hover', 'click'String/Array'hover'
disabled设置此属性,弹层无法显示或隐藏Booleanfalse
align弹层相对于触发元素的定位, 详见 Overlay 的定位部分String'tl bl'
offset弹层相对于trigger的定位的微调, 接收数组hoz, ver, 表示弹层在 left / top 上的增量
e.g. 100, 100 表示往右(RTL 模式下是往左) 、下分布偏移100px
Array0, 4
delay弹层显示或隐藏的延时时间(以毫秒为单位),在 triggerType 被设置为 hover 时生效Number200
autoFocus弹层打开时是否让其中的元素自动获取焦点Boolean-
hasMask是否显示遮罩Booleanfalse
cache隐藏时是否保留子节点Booleanfalse
animation配置动画的播放方式,支持 { in: 'enter-class', out: 'leave-class' } 的对象参数,如果设置为 false,则不播放动画Object/Boolean{ in: 'expandInDown', out: 'expandOutUp' }

实例方法

参数说明
getOverlay获取底层的Overlay实例
open打开
close关闭
toggle打开或关闭

ARIA and KeyBoard

按键说明
Up Arrow垂直模式下,同级导航,导航到前一项
Down Arrow垂直模式下,同级导航,导航到后一项
Right Arrow垂直模式下,打开子菜单,导航到子菜单第一项;水平模式下,同级导航,导航到后一项
Left Arrow垂直模式下,关闭子菜单,导航到父级菜单;水平模式下,同级导航,导航到前一项
Enter打开子菜单,导航到子菜单第一项
Esc关闭子菜单,导航到父级菜单