Tabs - 标签

Tabs make it easy to explore and switch between different views.

【翻译】
标签可以方便地浏览和切换不同的视图。

Tabs enable content organization at a high level, such as switching between views, data sets, or functional aspects of an app.

Present tabs as a single row above their associated content. Tab labels should succinctly describe the content within.

Because swipe gestures are used for navigating between tabs, don't pair tabs with content that also supports swiping.

【翻译】
标签可以在高级别启用内容组织，例如在视图，数据集或应用程序的功能方面之间切换。
将标签显示为其关联内容上方的单个行。 标签标签应简明扼要地描述其中的内容。
由于滑动手势用于在选项卡之间导航，请不要将选项卡与也支持滑动的内容配对。

Types - 类型

Fixed
Scrollable

【翻译】
固定
可滚动

Tab labels - 标签文本

Tab labels may be either all icons or all text.

【翻译】
标签文本可以是所有图标或所有文本。

Color - 颜色

Apply your app’s accent color, or a contrasting color, to text fields and the text field cursor.

【翻译】
将应用的强调颜色或对比颜色应用于文本字段和文本字段光标。

Usage - 用法

A tab provides the affordance for displaying grouped content. A tab label succinctly describes the tab’s associated grouping of content.

【翻译】
选项卡提供了显示分组内容的能力。标签标签简洁地描述了标签的相关内容分组。

Mobile tabs - 移动标签
[图片上传失败...(image-480e08-1552293304414)]
Default app bar and fixed tab bar

【翻译】
默认应用栏和固定标签栏

image

Extended app bar and fixed tab bar

【翻译】
扩展应用栏和固定标签栏

image

Fixed tab bar pinned to top with scrolled content

【翻译】
固定标签栏固定到顶部与滚动内容

[图片上传失败...(image-62a36f-1552293304414)]
Inset search, app bar, and fixed tab bar

【翻译】
插入搜索，应用栏和固定标签栏

[图片上传失败...(image-96e0e1-1552293304414)]
Default app bar and scrollable tab bar

【翻译】
默认应用栏和可滚动的标签栏

image

The text color is the same as the tab indicator.

【翻译】
文本颜色与制表符指示符相同。

image

Default app bar and fixed tab bar with icons

【翻译】
默认应用栏和带有图标的固定标签栏

[图片上传失败...(image-1a7bb4-1552293304414)]
The icon color is the same as the tab indicator.

【翻译】
图标颜色与选项卡指示符相同。

Desktop tabs - 桌面选项卡

[图片上传失败...(image-86de82-1552293304414)]
Default app and tab bars

【翻译】
默认应用和标签栏

[图片上传失败...(image-fbb8ce-1552293304414)]
Tabs with a More dropdown menu

【翻译】
带有更多下拉菜单的标签页

[图片上传失败...(image-82dc2b-1552293304414)]
Tabs with an expanded More dropdown menu

【翻译】
带有展开的更多下拉菜单的标签页

image

Tabs with Books selected from a More dropdown menu

【翻译】
从更多下拉菜单中选择了图书的标签页

[图片上传失败...(image-f70ab5-1552293304414)]
Tabs with overflow pagination

【翻译】
标签页溢出分页

[图片上传失败...(image-5cb0e8-1552293304414)]
Tabs with overflow pagination scrolled

【翻译】
带有溢出分页的标签滚动

image

Tab bar centered

【翻译】
标签栏居中

When to use - 何时使用
Use tabs to organize content at a high level, for example, to present different sections of a newspaper. Don’t use tabs for carousels or pagination of content. Those use cases involve viewing content, not navigating between groups of content.
For more detail about using tabs for navigating top-level views, see “Tabs” in Navigation - Patterns.
Don't use tabs with content that supports the swipe gesture, because swipe gestures are used for navigating between tabs. For example, avoid using tabs in a map where content is pannable, or a list where items can be dismissed with a swipe.
Fixed tabs should be used with a limited number of tabs and when consistent placement will aid muscle memory. Scrollable tabs should be used when there are many or a variable number of tabs.

【翻译】
使用选项卡可以高级组织内容，例如，显示报纸的不同部分。 不要使用选项卡用于轮播或内容分页。 这些用例涉及查看内容，而不是在内容组之间导航。
有关使用选项卡导航顶级视图的更多详细信息，请参阅导航 - 模式中的“选项卡”。
不要使用包含支持滑动手势内容的选项卡，因为滑动手势用于在选项卡之间导航。 例如，请避免在地图中使用内容可选的标签，或者可以通过滑动来解除项目的列表。
固定的标签应该与有限数量的标签一起使用，并且当一致的放置将帮助肌肉记忆。 当有很多或可变数量的标签时，应使用可滚动标签。

[图片上传失败...(image-c57781-1552293304414)]
Do.
The tabs switch between equally important facets of store content.

【翻译】
正确的示范
标签在商店内容的同等重要方面之间切换。

错误的示范

Don't.
The tabs switch between destinations of varied importance within the store.

【翻译】
错误的示范
标签在商店内在不同重要性的目的地之间切换。

Tab characteristics - 标签特性

Tabs control the display of content in a consistent location.

【翻译】
标签控制内容在一致位置的显示。

Formatting specifications:

Present tabs as a single row. Wrap tab labels to a second line if needed, and then truncate.
Do not include a set of tabbed content within a tab.
Highlight the tab corresponding to the visible content.
Group tabs together hierarchically. Connect a group of tabs with its content.
Keep tabs adjacent to their content to maintain the relationship between the two.

【翻译】
格式规格：
将制表符显示为单行。 如果需要，将选项卡标签包装到第二行，然后截断。
不要在标签中包含一组标签内容。
突出显示与可见内容对应的选项卡。
将选项卡分层组合在一起。 将一组标签页与其内容相关联。
保持标签与其内容相邻，以保持两者之间的关系。

[图片上传失败...(image-ede8bc-1552293304414)]
Do.
Tabs are presented as a single row.

【翻译】
正确的示范
制表符显示为单行。

错误的示范

Don't.
Tabs are not presented as a single column.

【翻译】
错误的示范
标签不显示为单个列。

正确的示范

Do.
Use a content hierarchy such that tabs relate to the currently displayed content.

【翻译】
正确的示范
使用内容层次结构，使选项卡与当前显示的内容相关。

[图片上传失败...(image-401ad4-1552293304414)]
Don't.
Tabs should not be nested.

【翻译】
错误的示范
标签不应嵌套。

Content - 内容

Content presented in tabs can vary widely, even between tabs. For example, tabs showing different years of an artist’s portfolio or tabs containing different types of settings.

All content within a set of tabs should be related under a larger organizing principle (for example, Settings or Directions), with each tab’s content mutually exclusive of the others'.

Tab labels should provide meaningful distinctions that logically organize associated content.

Tab labels may be either all icons or all text. When choosing a text label, use short titles.

Avoid the need for cross-tab comparison of content. Significant cross-tab comparison may indicate the content would benefit from a different organization or presentation that places the content closer together.

【翻译】
标签中显示的内容可能有很大差异，甚至在标签之间也是如此。 例如，显示艺术家投资组合不同年份的标签或包含不同类型设置的标签。
一组选项卡中的所有内容应根据更大的组织原则（例如，设置或方向）相关联，每个选项卡的内容与其他选项卡的内容互斥。
标签标签应提供有意义的区别，从逻辑上组织相关内容。
标签标签可以是所有图标或所有文本。 选择文本标签时，请使用短标题。
避免需要对交叉表进行内容比较。 重要的交叉表比较可以指示内容将受益于将内容更靠近在一起的不同组织或表示。

[图片上传失败...(image-b77b72-1552293304414)]
Do.
A long label exceeding the maximum width of a tab may wrap to a second line before being truncated.

【翻译】
正确的示范
超过标签最大宽度的长标签可能会在截断之前包装到第二行。

[图片上传失败...(image-2a4589-1552293304414)]
Don't.
Wrap labels before truncating them. Truncating labels too early can impede comprehension.

【翻译】

错误的示范
在截断标签之前包装标签。过早截断标签可能会妨碍理解。

[图片上传失败...(image-66ebe7-1552293304414)]
Don't.
Don't resize single-line labels. If labels are too long, wrap text across two lines or use scrollable tabs

【翻译】
错误的示范
不要调整单行标签的大小。如果标签太长，请将文本跨两行或使用可滚动标签

[图片上传失败...(image-46e6b2-1552293304414)]
Don't.
Do not combine text labels with icons. Use either all text labels or all icon labels.

【翻译】
错误的示范
不要将文本标签与图标组合。使用所有文字标签或所有图标标签。

Types of tabs - 选项卡的类型

Depending on the platform and the context of use, tabbed content can be presented as either fixed tabs or scrollable tabs.

【翻译】
根据平台和使用的上下文，标签内容可以呈现为固定标签或可滚动标签。

Fixed tabs - 固定标签

Fixed tabs display all tabs concurrently and are best used with content that benefits from quick pivots between tabs in fixed positions, such as switching transportation methods for directions in Google Maps.

Fixed tabs have equal width, calculated either as the view width divided by the number of tabs, or based on the widest tab label. To navigate between fixed tabs, touch the tab or swipe the content area left or right.

【翻译】
固定标签同时显示所有标签，最适合使用固定位置标签之间快速转换的内容，例如在Google地图中切换路线的交通方式。
固定标签具有相等的宽度，计算方式为视图宽度除以标签数量，或基于最宽的标签标签。 要在固定标签之间导航，请触摸标签或向左或向右滑动内容区域。

[图片上传失败...(image-134786-1552293304414)]
Fixed tabs on mobile

【翻译】
在移动设备上固定标签

[图片上传失败...(image-69117e-1552293304414)]
Fixed tabs on mobile

【翻译】
在移动设备上固定标签

Scrollable tabs - 可滚动的标签页

Scrollable tabs display a subset of tabs at any given moment. They can contain longer tab labels and a larger number of tabs than fixed tabs. Scrollable tabs are best used for browsing contexts in touch interfaces when users don’t need to directly compare the tab labels.

To navigate between scrollable tabs, touch the tab or swipe the content area left or right. To scroll the tabs without navigating, swipe the tabs left or right.

【翻译】
可滚动标签在任何给定时刻显示标签的子集。 它们可以包含较长的选项卡标签和比固定选项卡更多的选项卡。 可滚动选项卡最适合用于在用户不需要直接比较选项卡标签时在触摸界面中浏览上下文。
要在可滚动的标签页之间导航，请触摸标签页或向左或向右滑动内容区域。 要滚动标签页而不导航，请向左或向右滑动标签页。

Scrollable tabs on mobile

【翻译】
在移动设备上滚动标签

image

[图片上传失败...(image-5e328a-1552293304414)]
Examples of scrollable tabs

【翻译】
可滚动标签页的示例

Fixed tabs - 固定标签

The width of each tab can be calculated by taking the width of the view and dividing it by the number of tabs. Alternatively, make all tabs the width of the largest tab.

If the margin between the tab edge and view edge is 16dp or less, use full-width tabs instead of centered tabs.

【翻译】
每个选项卡的宽度可以通过获取视图的宽度并除以选项卡的数量来计算。 或者，使所有选项卡的最大选项卡的宽度。

如果标签边缘和视图边缘之间的边距为16dp或更小，请使用全角标签而不是居中标签。

Width minimum and maximum (inclusive of padding)

Maximum: 264dp
Minimum: 160dp for larger views, 72 dp for smaller views
Height

48dp
Padding

12dp left and right of text
20dp from bottom for a single line of text, 12dp from bottom for two lines of text
Alignment

Full-width for smaller views
Centered for larger views
Indicator

Height: 2dp
Color: #fff or accent color

【翻译】
宽度最小值和最大值（包括填充）
最大：264dp
最小值：160dp（较大视图），72 dp（较小视图）
高度
48dp
填充
12dp左右文本
20dp从底部为单行文本，12dp从底部为两行文本
对准
全角的较小视图
中心为更大的视图
指示符
身高：2dp
颜色：#fff或强调颜色

Tabs with text only - 仅包含文字的标签

Text

14sp Roboto Medium
12sp when wrapped across a maximum of two lines
All caps
Horizontally and vertically centered
Active color: #fff or accent color
Unfocused tab color: #fff 70%

【翻译】
文本
14sp Roboto Medium
12sp当包裹在最多两行
所有上限
水平和垂直居中
活动颜色：#fff或强调颜色
未聚焦的标签颜色：#fff 70％

image

Mobile landscape example of same tabs aligned with left keyline

【翻译】
相同选项卡的移动横向示例与左键盘对齐

image

Mobile landscape example of same tabs centered

【翻译】
相同标签的移动横向示例居中

Tabs with icons and text - 带有图标和文本的标签

Height

72dp
Icon

24 x 24dp
Content alignment

Text and icon are centered horizontally in the tab
Padding

10dp between icon and text
16dp under text

【翻译】
高度
72dp
图标
24 x 24dp
内容对齐
文本和图标在选项卡中水平居中
填充
10dp之间的图标和文本
16dp下的文本

[图片上传失败...(image-ce73ec-1552293304414)]
Fixed tabs on mobile, icons and text

【翻译】
固定在移动，图标和文本上的标签

[图片上传失败...(image-86a2f8-1552293304414)]
Fixed tabs on mobile, icons and text

【翻译】
固定在移动，图标和文本上的标签

Tabs with icons only - 只有图标的标签

Height

48dp
Icon

24 x 24dp
Content alignment

Icon is centered horizontally and vertically in the tab
Padding

12dp under icon

【翻译】
高度
48dp
图标
24 x 24dp
内容对齐
图标在标签中水平和垂直居中
填充
12dp下的图标

[图片上传失败...(image-440274-1552293304414)]
Fixed tabs on mobile, icons only

【翻译】

固定移动设备上的标签，仅限图标

[图片上传失败...(image-25ebf9-1552293304414)]
Fixed tabs on mobile, icons only

【翻译】
固定移动设备上的标签，仅限图标

Scrollable tabs - 可滚动的标签页

The left-most tab content aligns with the keyline. Alignment varies between landscape and portrait to match the different keylines.

The width of each tab is independently calculated.

Width minimum and maximum (inclusive of padding)

Maximum (whichever fits and is smaller): 264dp or (the value of view size minus 56dp)
Minimum: 160dp for larger views, 72 dp for smaller views
Height

48dp
Padding

12dp left and right of text
20dp from bottom for a single line of text, 12dp from bottom for two lines of text
Indicator

Height: 2dp
Color: #fff or accent color

【翻译】
最左侧的选项卡内容与关键字对齐。 对齐在风景和肖像之间变化，以匹配不同的键。
独立计算每个标签的宽度。
宽度最小值和最大值（包括填充）
最大值（取较小值）：264dp或（视图大小减去56dp的值）
最小值：160dp（较大视图），72 dp（较小视图）
高度
48dp
填充
12dp左右文本
20dp从底部为单行文本，12dp从底部为两行文本
指示符
身高：2dp
颜色：#fff或强调颜色

image

Scrollable tab

【翻译】
可滚动标签

image

Extremely long tab labels, as shown here, should be avoided. This max-width scrollable tab contains wrapped text.

【翻译】
应避免极长的选项卡标签，如此处所示。此最大宽度可滚动标签包含换行文本。

Text

14sp Roboto Medium
12sp when wrapped across a maximum of two lines
All caps
Vertically and horizontally centered
Active color: #fff or accent color
Unfocused tab color: #fff 70%

【翻译】
文本
14sp Roboto Medium
12sp当包裹在最多两行
所有上限
垂直和水平居中
活动颜色：#fff或强调颜色
未聚焦的标签颜色：#fff 70％

image

Extremely long tab labels, as shown here, should be avoided. These max-width tabs, depicted in landscape mode on mobile, are aligned with the left keyline.

【翻译】
应避免极长的选项卡标签，如此处所示。这些最大宽度标签（在移动设备上以横向模式描绘）与左键盘对齐。

Desktop - 桌面

Width minimum and maximum (inclusive of padding)

Maximum (whichever fits and is smaller): 264dp or (the value of view size minus 56dp)
Minimum: 160dp for larger views, 72 dp for smaller views
Height

48dp
Alignment

Centered or aligned with left keyline
Text

13sp Roboto Medium
All caps
Horizontally and vertically centered
Wraps across a maximum of two lines
Active color: #fff or accent color
Unfocused tab color: #fff 70%
Padding

24dp left and right of text
20dp from bottom for a single line of text, 12dp from bottom for two lines of text
First tab text left padding: 80dp
Indicator

Height: 2dp
Color: #fff or accent color

【翻译】
宽度最小值和最大值（包括填充）
最大值（取较小值）：264dp或（视图大小减去56dp的值）
最小值：160dp（较大视图），72 dp（较小视图）
高度
48dp
对准
以左键盘为中心或对齐
文本
13sp Roboto Medium
所有上限
水平和垂直居中
最多包含两行
活动颜色：#fff或强调颜色
未聚焦的标签颜色：#fff 70％
填充
24dp左右文本
20dp从底部为单行文本，12dp从底部为两行文本
第一个标签文本左边填充：80dp
指示符
身高：2dp
颜色：#fff或强调颜色

[图片上传失败...(image-3c2618-1552293304414)]
Desktop tabs

【翻译】
桌面选项卡

**Tab touch target animation - 标签触摸目标动画 **

Note: Implementations of this component may vary by platform. By using standard platform implementations, you will receive related future improvements.

【翻译】
注意：此组件的实现可能因平台而异。通过使用标准平台实现，您将收到相关的未来改进。

Animation of tab touch target.

【翻译】
选项卡触摸目标的动画。