跳到主要内容

Tabs 标签页

用于承载同一层级下不同页面或类别的组件,方便用户在同一个页面框架下进行快速切换。


开发说明
  • 相对原生少了一个大尺寸。
  • 其他样式上的变化。
  • 基础标签

    使用选项卡切换内容模块,操作后不会进行页面跳转。

    图标标签

    在基础选项卡基础上,在每个标签前添加图标,方便用户快速理解。

    不同方向

    横向、竖向。

    不同尺寸

    中-48px、小-40px(默认)两种尺寸。

    基础页签

    另一种样式的页签,不提供对应的垂直样式。

    增删页签

    用户可添加、删除页签,满足自定义场景。

    交互状态

    当标签项目处于活动状态时,容器将显示该选项卡的内容。一个选项卡组中只能有一个选项卡项处于活动状态。

    何时使用

    • 当内容过多时需要将不同类型内容进行扁平化收纳。

    搭配指南

    • 可根据实际使用情况(空间有限,或有特殊诉求的场景等),在内容模块的上下左右不同位置放置选项卡。
    • 不同层级的类型搭配使用,可以更好区分不同主次内容的层级。
    • 当标签过多无法在一行展示完整时,不要让选项卡换行,可以考虑使用滑动展示。
    • 切换选项卡时在同一页面内进行,建议不要跳转新启页面。