标签页

标签页可以整理不同屏幕、数据集和交互中的内容。标签页可用于在不同且相关的信息组视图之间切换。

Tabs cover

资源

类型 链接 状态
设计 设计源 (Figma) 可用
实现 Jetpack Compose 可用

亮点

  • 标签页可以水平滚动。一个界面可以包含所需数量的标签页。
  • 标签页将内容整理成不同类别,帮助用户快速找到不同类型的信息。
  • 标签页作为同级元素并排显示,重要性相同。

变体

标签页指示器有两种类型

Tabs Pill Tabs Underline
  1. 药丸式指示器
  2. 条形指示器

根据强调程度选择合适的类型。药丸式指示器标签页建议用于组织完整页面。它们显示主要内容目的地。条形指示器标签页用于内容区域内,以进一步区分相关内容并建立层级。

解剖结构

Tabs anatomy

  1. 图标(可选)
  2. 标签
  3. 活动指示器
    1. 药丸
    2. 条形
  4. 容器

状态

Tabs states

  1. 默认
  2. 聚焦
  3. 已选择

规格

Tabs anatomy

行为

从一个标签页移动到下一个时,下方的内容也会根据标签页的移动向左或向右滑动。