标签页

标签页是总是成组出现的按钮,并且彼此依赖:在任何给定时间只能有一个标签页处于活动状态。

标注图标
按钮组件
非标签式按钮可以独立于其他按钮运行。

解剖学

1. 活动标签图标
2. 非活动标签图标
3. 活动标签页
4. 非活动标签页

规格

应用栏中嵌套的标签页 - 左对齐

标注图标
应用栏和标题组件
规格、样式指南等。

应用栏内嵌套标签页——灵活对齐

通过灵活的对齐方式,卡扣配置可以拉伸或压缩以适应可用空间。

应用栏中的标签页已折叠 – 抽屉菜单

标注图标
应用栏和标题组件
规格、样式指南等。

独立标签栏 – 左对齐

独立标签栏 – 灵活对齐

通过灵活的对齐方式,卡扣配置可以拉伸或压缩以适应可用空间。

标签页字符串溢出

缩放布局

这些参考布局展示了如何调整标签页以适应不同宽度和高度的屏幕。请注意,所有像素值均为渲染像素值,未进行任何下采样或上采样。

短高度范围内的标准屏幕与宽屏

标准高度范围内的标准屏幕与宽屏

高高度范围内的标准屏幕与宽屏的比较

各种高度的超宽屏和超宽屏

款式

排版

字体样式字体重量大小(dp)
3M 机身机器人中等的24
身体 3机器人常规的24

颜色

元素颜色(日间模式)颜色(夜间模式)
主要类型/图标白色的白色 @ 88%
次要类型/图标白色 @ 72%白色 @ 60%
标签栏背景黑色的黑色的
标签栏背景滚动黑色 @ 84%黑色 @ 88%
标签页图标 - 激活状态白色的白色 @ 88%
标签页图标 - 非活动状态白色 @ 56%白色 @ 50%

浆纱

元素大小(dp)
主图标44
辅助图标36
图标触摸目标76

示例

标签页已折叠。


应用栏中嵌套的标签页。

独立标签栏。