标签

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

Tabs cover

资源

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

亮点

  • 标签可以水平滚动。UI 可以根据需要包含任意数量的标签。
  • 标签将内容组织成类别,以帮助用户快速找到不同类型的信息。
  • 标签作为同级元素并排显示,处于同等重要的类别中。

变体

有两种类型的标签指示器

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

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

结构

Tabs anatomy

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

状态

Tabs states

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

规格

Tabs anatomy

行为

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