“下拉菜单”和“选择器”两者在形式上的相似度较高,在实际应用中经常会被混淆。本文作者结合部分大厂及一些基础框架应用知识,对“下拉菜单”和“选择器”进行了总结分析,一起来看一下吧。
关于下拉菜单和选择器的区分问题,本来在今年5月份就记在我的语雀待解决问题库中,中间因为项目出差就搁置,延迟了两个月现在来把这个坑填上。
因为“下拉菜单”和“选择器”二者在形式上的相似度较高,在实际应用中就经常会被混淆。而我在查阅网上相关文章时,对其使用的区分也大都模棱两可,甚至于有的作者在文章也搞错了这两者。因此,结合部分大厂案例以及一些基础框架应用知识,汇总成这篇。
不多废话,先说结论:Dropdown 是“导航”,而Select 是“输入”(下图这个问题先放在这里,文章结尾希望你会有一个明确的答案)。
一、下拉菜单(Dropdown)1. 定义
Ant Design中对于下拉菜单的定义是:“向下弹出的列表。”这种描述实际是有点不太恰当,因为选择器也有一个类似下拉列表的样式。而在Arco Design中组件定义是:“将备选命令或菜单折叠到向下展开的浮层容器中。”这里有一个很重要信息,即下拉菜单是“一个命令集合”。
因此,当页面上的操作命令过多时,用此组件可以收纳操作元素。点击或移入触点,会出现一个下拉菜单,可在菜单中进行选择,并执行相应的命令。
2. 组件构成
下拉菜单的基本够构成元素又两个,一个是为了表现当前状态的内容的“菜单项”,另一个就是展开的浮层容器“下拉项”,有时下拉项中的选项过多时会搭配滚动条(Scroll)、搜索(Search)联动使用。
3. 实际应用
下拉菜单常用于过滤或排序页面上的内容,可以根据需要设置样式,主要的使用场景是在导航、工具菜单以及部分操作集合里。在实际使用中,可以在下拉入口中放任意内容。
1)导航