如何使用

  • 当内容需要分组,并在不同模块页面中展示,可使用 Tabs 标签栏
  • 标签栏中的标签卡条目应该相对平级
  • 当页面内出现多个标签栏嵌套时,建议采用不同布局和样式类型的标签栏组件,避免混淆

解构

类型
  1. 已选中标签卡 :当页面内出现多个标签栏嵌套时,建议采用不同布局和样式类型的标签栏组件;
  2. 未选中标签卡 未选中标签卡,按指定顺序依次展示;
  3. 标签栏辅助操作(可选) 标签栏辅助功能(添加新标签卡,个数超限折叠等)入口,置于最后一个标签卡之后;

组件 Demo

✅ ️ Figma Variants

标签栏样式类型

标签栏组件提供三种不同标签栏样式,对于页面内的每个标签栏组件,必需明确其中一种样式。通常建议使用卡片式/线条式的标签栏决定更高的页面层级。
线条式

按钮式

卡片式

标签卡样式类型

在明确标签栏类型后,设计师可根据空间大小,以及对标签卡的强调程度选择标签卡样式。若无法满足特殊需求,也可进行自定义。
线条式

按钮式

卡片式

标签卡折叠

如需在有限空间下显示数量较多的标签卡,展示不下的标签卡将折叠收起。用户可通过左右箭头切换,或悬浮下拉菜单访问被收起的标签卡。