标签页可以对同一页面上对同类信息进行分组展示,可以在有限的显示区域内展示更多信息。

类型

标签页 - 图1

使用详解

基础标签页:
基础标签页整体左对齐,很少会居中对齐,不会右对齐。
通常基础标签页会用于模块的头部,统领下面全部的内容。这时,它是左右通栏的。
标签页 - 图2

标签页 - 图3

基础标签页也可用于模块中间,这时,为了不打乱整个页面的层级,它不是左右通栏的。
标签页 - 图4

基础型:
每个Tab字段长度不太一致,标签页的长度跟随tab字段的长度自适应变化。
标签页 - 图5

定宽型:
有些场景会出现跟随数量的选项。标签页长度选取最长tab字段的长度作为定宽,作用于每个Tab字段。
标签页 - 图6

胶囊标签页:
有两级tab时,无法同时使用基础标签页,通常二级tab将会使用胶囊标签页。
标签页 - 图7

胶囊标签页也常用于需要节约空间的卡片。
标签页 - 图8

胶囊标签页的排版更加灵活,可以根据实际情况灵活变化。
标签页 - 图9

样式

选项型:
基础标签页的选项宽度由选项字段的长短决定,字段不宜超过6个字。
标签页 - 图10

胶囊型:
胶囊型标签页的选项有最小宽度,字段多时,宽度自适应拉伸。选项宽度由最长选项决定,其他选项与最长选项保持一致。
标签页 - 图11

状态及全尺寸:
标签页 - 图12