Select 选择器

从多个选项中选择一个或多个选项，并呈现选择结果。

适用：快速做选择的场景
不适用：流程较长或复杂的选择场景（如添加项目成员）。
相关组件：Menu

通用原则

• 适用于用户可以快速做出选择的场景
  
• 选项层级建议不超过 3 层
  
• 触发器不做限定，常用为文字和按钮两种类型
  
• 当选项数量过多的时候，建议增加 Search
  

类型

常规

联级

• 选项本身存在多层级，并且平铺展示，可逐级选择。
  
• 层级建议不超过 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. 当且仅当选项存在层级时使用

行为

展开选项列表

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

单选

• 单次只能选择一个选项
  
• 点击任意选项，选项列表主动收起并提交数据，暗示一次只能选择一项的隐喻。
  
• 被选项应该出现在触发器上，文案过长则「…」，鼠标 hover 无 Tooltip。
  

多选

• 在选项中搭配 Checkbox 来告知用户该选项列表为多选
  
• 已选项出现在触发器上，文案过长则「…」，鼠标 hover 无 Tooltip
  
• 实时提交数据：
  • 点击任意选项，实时提交数据，已选项实时展示在触发器上
    
  • 辅助文字「已选 x 项」 实时响应用户的选择操作
    
• 整体提交数据:
  • 当且仅当用户点击「确定」按钮，才提交数据

• 以Tag形式展示已选择项:
  • 用户选择的多选项将以Tag形式展现在触发器中
• 点击整列可选中；点击箭头，进入下一层级
  
• 点击返回则回到上一级

收起选项列表

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

• 点击触发器
  
• 点击选择器以外的区域
  
• 点击选项（单选）或点击确认（多选）

选项列表滚动

• 原则上菜单一屏最多展示 10 条可选项，超出则显示滚动条
  
• 菜单的纵向滚动条是持续显示的
  
• 菜单不允许出现横向滚动条。超出的内容可以用 Tooltip 显示