dropdown · 下拉菜单
依据 APG Menu Button:↑↓ 移动 ·
Esc 关闭并把焦点还给按钮 ·
Tab 关闭 · Enter/Space 激活 ·
Home/End 跳首末。
⚠️ 菜单项 tabindex="-1":不参与 Tab 序列,
因为 Tab 的语义是「关闭菜单」。
1 · 基本用法(试试键盘)
(选中项会显示在这里)
菜单里的那条分隔线只写 data-dd-sep 就行:
role="separator" 与 .dd__sep 由组件补。
方向键会跳过它 —— 分隔线不是可选项,让它能被"选中"是错的。
2 · 带勾选(选中性不只靠颜色)
3 · 靠右对齐(窄屏不出屏)
对比:错写法 vs 本库写法
❌ 常见写法:菜单项只有 24px
下拉菜单 · 每项高度
24px 一行:手指点下去会压到隔壁,触屏用户每点错一次就得重来。本库在这块踩过更隐蔽的坑 —— 写 min-height: 44px,量出来只有 24px(<li> 是 display:list-item),所以现在用的是显式 height。
✅ 本库:显式 height: 44px
下拉菜单 · 每项高度
同一个 44,min-height 与 height 在列表项上是两回事。桌面小屏看不出来,只有量了才发现 —— 所以这里把两种结果并排摆出来。