组件 - Dropdown

Table of Contents

概要

下拉菜单一般是功能的合集,容易与[[选择框 Select]] 混淆(select 用于表单中的信息输入)。Mac 顶部的那些就是下拉菜单,他可以是新建或者撤销等等,也可以是一个链接(例如帮助,跳转到网站)。

Ant Design

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

Atlassian Design System

A dropdown menu displays a list of actions or options to a user.

Carbon Design System

Dropdown present a list of options from which a user can select one option, or several. A selected option can represent a value in a form, or can be used as an action to filter or sort existing content.

最佳实践

何时不用?

  • 如果有两个选项可供选择,最好不要使用下拉菜单。在这种情况下,使用单选 Radio 组代替。
  • 不要嵌套下拉框或用它们来显示过于复杂的信息。保持选项选择尽可能直接。

样式

准备中

交互

下拉多选

闽ICP备2020019652号-2