不适用：

• 站点内不同模块之间的导航，此时应该用 Navigation

• 存在顺序关系的内容，此时应该用 Steppers

通用原则

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

• 尽量避免 Tabs 内再嵌套 Tabs

• 不要将需要同时查看的内容放在不同的切换项中，切换项需彼此独立

• 切换项的数量不宜过多，切换项的总数建议不要超过 7 个

• 单次只允许一个切换项被选中，默认选中左起第 1 个

• 当某个切换项不可用时，呈 disable 态，可搭配 Tooltip 解释原因

• 同一组切换项的样式需要保持一致（比如都是图标+文字）

• 切换项不能只是图标；文字需完整展示，不可省略或折行

类型

类型	何时使用
常规/水平	默认使用的类型，横向布局，受空间限制，不适合切换项特别多的时候。
常规/垂直	纵向布局，适合切换项个数较多的时候。
Toggles	属于横向 Tabs 的特定使用方式，除样式/布局不同以外，其切换项数量也必须 <= 4 个，属于非常轻量的方式。另外，它不是按钮组，其和其它 tabs组件一样都会有一个默认选中项。

常规/水平

注意：当空间不足时，自适应将切换项收到「更多」中。

常规/垂直

Toggles

构成

1. 图标+文本

   1. 图标可选，仅可放在文字左侧

   2. 文本

      1. 选用文案时需要体察当前场景，结合用户故事上下文与语境

      2. 删除无明显作用的字词，在不影响表达的前提下把文案压缩到最短

      3. 尽量符合中文用语习惯，少用被动语态

      4. 不可折行，不可省略

2. 指示器：指示当前选中的切换项

3. 徽标（可选）：仅可放在文字的右侧，徽标和图标不可搭配使用

1. 图标+文本

   1. 图标与文本可同时使用，或单独使用

   2. 图标仅可放在文本左侧

   3. 文本

      1. 选用文案时需要体察当前场景，结合用户故事上下文与语境

      2. 删除无明显作用的字词，在不影响表达的前提下把文案压缩到最短

      3. 尽量符合中文用语习惯，少用被动语态

      4. 不可折行，不可省略

2. 指示器：指示当前选中的切换项

3. 容器（可选）

行为

四大状态

切换选项

• 点击切换项后选中，取消之前选中的项，保证有且只能选中其中** 1** 个

• 点击切换项后，与之关联的容器切换到该切换项相应的内容

• 已经选中的切换项，不可再点击

• 必要时可搭配Tooltip 帮助用户了解更多信息

查看更多选项

点击「更多」展开切换项，选择其中一个切换项后，高亮「更多」。

样式

布局

• 横向切换器通常出现在内容区域的左上方

• 纵向切换器通常出现在内容区域的左侧

• Toggle 通常出现在内容区域的右上方或正中央作为标题使用