Dropdown 下拉菜单
页面上的命令过多时,可将备选命令收纳到向下展开的浮层容器中。
按钮下拉
文字下拉
图标下拉
带图标的下拉面板
带国家的下拉面板
带多选的下拉面板
带分组的下拉面板
当下拉菜单中命令超出 10
个时,或浮层内出现滚动条,建议对命令进行分类。
可以直接使用分割线进行分类,如场景需要明确分组类目可以增加分组标题。
多级选择的下拉面板
当操作命令有多个层级时,悬浮在父级上,显示子级的菜单祥。
带搜索的下拉菜单
当操作命令多于 25
个时,建议支持搜索功能,快速找到指定的相关内容。
交互状态
下拉选择器状态
下拉面板状态
何时使用
- 在导航菜单中:通过下拉菜单,可以将产品导航进行分组,并且统一放置在一起。
- 在部分操作集合中:比如在表格的操作区域,经常会使用下拉菜单将多项操作放到一起。
何时不使用
- 如果有两个选项可供选择,最好不要使用下拉菜单。在这种情况下,建议使用单选框。
- 不建议嵌套下拉列表或使用它们来显示过于复杂的信息,尽可能使选项选择直截了当。
文案指南
- 下拉菜单内显示的操作命令应该具有相关性。
- 下拉菜单中的文本标签建议不超过
6
个中文字符。