Material Design 设计语言（十三）标签

标签（Tabs）

选项卡标签组织并允许在相关且处于相同层次结构的内容组之间进行导航。

每个选项卡中应包含与集合中其他选项卡不同的内容。例如，标签可以呈现新闻的不同部分，不同类型的音乐或不同的文档主题。

原则

1、可扩展

由于标签可以水平滚动，因此UI可以根据需要使用多个标签。

2、信息化

选项卡将内容组织到类别中，以帮助用户轻松查找不同类型的信息。

3、同一行

选项卡标签之间彼此相邻显示。

类型

1、固定标签

固定选项卡同时显示集中的所有选项卡。最适合快速切换相关内容，例如地图设置切换。

点按单个标签，可在固定标签之间导航，或在内容区域中向左或向右滑动。

特别注意

固定标签的宽度相等，可以按以下方式计算：

· 屏幕宽度除以标签数量

· 按照最宽标签的宽度

使用固定标签时，请确保可以在移动设备上看到它们，而不会截断文本。一次不要使用4个以上的固定标签。

聚合固定标签

聚合固定标签在屏幕上不是平均分配。可以在标签栏中居中放置，也可右对齐或左对齐。

应在更宽水平布局中使用聚合固定选项卡，例如横屏模式。

2、可滚动标签

当一组选项卡在屏幕上不够完全展示时，请使用可滚动选项卡。可滚动选项卡可以使用更长的文本标签和更多的选项卡。它最适合在触摸界面上浏览。