Dropdown 设计文档
向下弹出的菜单,通过触发元素唤起一组可操作命令项。对齐 Semi:children 为触发器,render/menu 定义浮层内容(Dropdown.Menu/Item/Title/Divider);hover/focus/click/custom/contextMenu 触发;12 方位;嵌套子菜单(手动嵌套 Dropdown);showTick 勾选、type 五色语义、icon、active、disabled;键盘导航与 Esc 关闭。
← API 文档使用建议
向下弹出的菜单,通过触发元素唤起一组可操作命令项。对齐 Semi:children 为触发器,render/menu 定义浮层内容(Dropdown.Menu/Item/Title/Divider);hover/focus/click/custom/contextMenu 触发;12 方位;嵌套子菜单(手动嵌套 Dropdown);showTick 勾选、type 五色语义、icon、active、disabled;键盘导航与 Esc 关闭。
Accessibility
ARIA role:menu
- 触发器 role=button + aria-haspopup=menu + aria-expanded + aria-controls(嵌套触发器为 Dropdown.Item 自身承担 menuitem 语义)
- 浮层 ul role=menu + aria-orientation=vertical,项 li role=menuitem(tabindex=-1,方向键移动焦点漫游)
- click 触发打开后焦点自动落首个非禁用项(对齐 Semi foundation)
- divider role=separator;title 组标题不可聚焦
- Esc 关闭并归还触发器焦点(受控时不生效);外部点击关闭并回调 onClickOutSide
设计变量
| 变量 | 默认值 | 用法 |
|---|---|---|
--cd-transition-dropdown-item-bg-delay | 0ms | 下拉菜单项背景色过渡延迟 |
--cd-transition-dropdown-item-bg-duration | var(--cd-motion-duration-none) | 下拉菜单项背景色过渡时长(默认 none) |
--cd-transition-dropdown-item-bg-function | var(--cd-motion-ease-standard) | 下拉菜单项背景色过渡曲线(easeOut) |