不适用:
站点内不同模块之间的导航,此时应该用 Navigation
存在顺序关系的内容,此时应该用 Steppers
一种轻量的方式来组织多个相同性质但又分别独立的内容;通常用于页面内某个模块中,方便用户在同一个模块内,快速切换多个内容,起导航的作用。
尽量避免 Tabs
内再嵌套 Tabs
不要将需要同时查看的内容放在不同的切换项中,切换项需彼此独立
切换项的数量不宜过多,切换项的总数建议不要超过 7 个
单次只允许一个切换项被选中,默认选中左起第 1 个
当某个切换项不可用时,呈 disable 态,可搭配 Tooltip
解释原因
同一组切换项的样式需要保持一致(比如都是图标+文字)
切换项不能只是图标;文字需完整展示,不可省略或折行
类型 | 何时使用 |
---|---|
常规/水平 | 默认使用的类型,横向布局,受空间限制,不适合切换项特别多的时候。 |
常规/垂直 | 纵向布局,适合切换项个数较多的时候。 |
Toggles | 属于横向 Tabs 的特定使用方式,除样式/布局不同以外,其切换项数量也必须 <= 4 个,属于非常轻量的方式。另外,它不是按钮组,其和其它 tabs组件一样都会有一个默认选中项。 |
注意:当空间不足时,自适应将切换项收到「更多」中。
图标+文本
图标可选,仅可放在文字左侧
文本
选用文案时需要体察当前场景,结合用户故事上下文与语境
删除无明显作用的字词,在不影响表达的前提下把文案压缩到最短
尽量符合中文用语习惯,少用被动语态
不可折行,不可省略
指示器:指示当前选中的切换项
徽标(可选):仅可放在文字的右侧,徽标和图标不可搭配使用
图标+文本
图标与文本可同时使用,或单独使用
图标仅可放在文本左侧
文本
选用文案时需要体察当前场景,结合用户故事上下文与语境
删除无明显作用的字词,在不影响表达的前提下把文案压缩到最短
尽量符合中文用语习惯,少用被动语态
不可折行,不可省略
指示器:指示当前选中的切换项
容器(可选)
点击切换项后选中,取消之前选中的项,保证有且只能选中其中** 1** 个
点击切换项后,与之关联的容器切换到该切换项相应的内容
已经选中的切换项,不可再点击
必要时可搭配Tooltip
帮助用户了解更多信息
点击「更多」展开切换项,选择其中一个切换项后,高亮「更多」。
横向切换器通常出现在内容区域的左上方
纵向切换器通常出现在内容区域的左侧
Toggle 通常出现在内容区域的右上方或正中央作为标题使用