Tab 选项卡

选项卡是用于特定板块内，为同范畴内容提供不同类信息展示切换的组件。具有容纳、导航作用。

用法

适用：各个Tab下的内容应该是 并列 的同种信息的不同分类

不适用：

• 站点内不同模块之间的导航，此时应该用 Navigation
• 存在顺序关系的内容，此时应该用 Step

通用原则

一种轻量的方式来组织多个相同性质但又分别独立的内容；通常用于页面内某个模块中，方便用户在同一个模块内，快速切换多个内容，起导航的作用。

• 尽量避免 Tab 内再嵌套 Tab
• 点击Tab时不发生页面跳转，URL不改变（区别于导航）
• 不要将需要同时查看的内容放在不同的切换项中，切换项需彼此独立
• 切换项的数量不宜过多，切换项的总数建议不要超过 7 个
• 单次只允许一个切换项被选中，默认选中左起第 1 个
• 当某个切换项不可用时，呈 disable 态，可搭配 Tooltip 解释原因
• 同一组切换项的样式需要保持一致（比如都是图标+文字）
• 切换项不能只是图标，文字需完整展示，不可省略或折行

类型

普通型

分横向和纵向两种展示形式。当空间不足时，自适应将切换项收到「更多」中。

卡片型

胶囊型

嵌套

• 尽量避免选项卡的多层嵌套
• 嵌套层级不建议超过 3 层，第 1 层为横向普通型选项卡，第 2 层为纵向普通型选项卡，第 3 层为胶囊型选项卡

构成

1. 图标+文本
   • 图标可选，仅可放在文字左侧
   • 文本
     1. 选用文案时需要体察当前场景，结合用户故事上下文与语境
     2. 删除无明显作用的字词，在不影响表达的前提下把文案压缩到最短
     3. 尽量符合中文用语习惯，少用被动语态
     4. 不可折行，不可省略
2. 指示器：指示当前选中的切换项
3. 徽标（可选）：仅可放在文字的右侧，徽标和图标不可搭配使用

1. 图标+文本
   • 图标与文本可同时使用，或单独使用
   • 图标仅可放在文本左侧
   • 文本
     1. 选用文案时需要体察当前场景，结合用户故事上下文与语境
     2. 删除无明显作用的字词，在不影响表达的前提下把文案压缩到最短
     3. 尽量符合中文用语习惯，少用被动语态
     4. 不可折行，不可省略
2. 指示器：指示当前选中的切换项

位置

• 横向普通选项卡通常出现在内容区域的 左上方
• 纵向普通选项卡通常出现在内容区域的 左侧
• 胶囊型选项卡通常出现在内容区域的 右上方 或 正中央 作为标题使用

行为

四大状态

切换选项

• 点击切换项后选中，取消之前选中的项，保证有且只能选中其中 1 个
• 点击切换项后，与之关联的容器切换到该切换项相应的内容
• 已经选中的切换项，不可再点击
• 必要时可搭配 Tooltip 帮助用户了解更多信息

滑动查看更多选项

鼠标移入「更多」图标自动展开切换项，选择其中一个切换项后，激活并定位到选中项。

<tabset>
  <tab>
    <tab-heading>头部1</tab-heading>
    <div>内容1...</div>
  </tab>
  <tab>
    <tab-heading>头部2</tab-heading>
    <div>内容2...</div>
  </tab>
  <tab>
    <tab-heading>头部3</tab-heading>
    <div>内容3...</div>
  </tab>
</tabset>