适用：快速做选择的场景

不适用：流程较长或复杂的选择场景（如添加项目成员）。

相关组件：Menu

通用原则

• 适用于用户可以快速做出选择的场景

• 选项层级建议不超过 3 层

• 触发器不做限定，常用为文字和按钮两种类型

• 当选项数量过多的时候，建议增加 Search

类型

类型	何时使用
常规	选项层级只有1 级的时候
联级	选项层级超过 1 级，并需要菜单平铺展示的时候
触发器带Tag	多选场景下，需要将已选项作为Tag展示在触发器中，并可以单独操作的时候

常规

联级

• 选项本身存在多层级，并且平铺展示，可逐级选择。

• 层级建议不超过** 3** 级

• 操作按钮始终跟随最后一个面板

触发器带Tag

• 只存在于多选场景中

• 用户在选项列表中选择的项目会即时以可关闭的Tag形式出现在触发器内，并可独立完成Tag的关闭操作

• 相关组件：Tag

构成

1. 触发器：点击后触发选项列表；再次点击收起选项列表。触发器分以下几种类型：文本触发器、按钮触发器、其他变种（如：添加任务参与者）。触发器的组成：

   1. 占位文字

      1. 标题可作为占位文字

      2. 或试用默认占位文字，格式为「请选择xxx」（具体文案不做规定）

   2. 已选项

      1. 选项间用「、」隔开

      2. 选项过多则「...」（允许写成「...等 n 个 xx」的格式）

   3. 箭头

      1. 默认朝下，选项列表展示时，箭头朝上。

2. 选项列表

   1. 根据不同的业务需求，有多种对应的列表样式：

      1. 图形 + 选项标题 + 描述

      2. 图形 + 选项标题

      3. 选项标题 + 描述

      4. 选项标题

   2. 列表允许分组

   3. 箭头（可选）

      1. 当且仅当选项存在层级时使用

3. 提交按钮（可选）

   1. 适用于需要用户明确的确认才提交数据的情况

行为

组件可用时	组件不可用时
鼠标 hover 选择器，有反馈	鼠标 hover 选择器，无任何反馈。仅当已选项过长「...」时，需要出现 tooltip 展示完整选项

展开选项列表

用户通过点击触发器来展开选项列表。

单选

• 单次只能选择一个选项

• 点击任意选项，选项列表主动收起并提交数据，暗示一次只能选择一项的隐喻。

• 被选项应该出现在触发器上，文案过长则「…」，鼠标 hover 无 Tooltip。

多选

• 在选项中搭配 Checkbox 来告知用户该选项列表为多选

• 已选项出现在触发器上，文案过长则「…」，鼠标 hover 无 Tooltip

• 实时提交数据：

  • 点击任意选项，实时提交数据，已选项实时展示在触发器上

  • 辅助文字「已选 x 项」 实时响应用户的选择操作

• 整体提交数据:

  • 当且仅当用户点击「确定」按钮，才提交数据

• 以Tag形式展示已选择项:

  • 用户选择的多选项将以Tag形式展现在触发器中

• 点击整列可选中；点击箭头，进入下一层级

• 点击返回则回到上一级

收起选项列表

用户有 3 种方法收起已展开的选项列表：

• 点击触发器

• 点击选择器以外的区域

• 点击选项（单选）或点击确认（多选）

选项列表滚动

• 原则上菜单一屏最多展示 10 条可选项，超出则显示滚动条

• 菜单的纵向滚动条是持续显示的

• 菜单不允许出现横向滚动条。超出的内容可以用 Tooltip 显示

---

样式

布局

• 按钮触发器：选项列表与触发器等宽

• 其他触发器：选项列表宽度沿用 Popup宽度