List controls display information and actions for list items.

【翻译】
列表控制列表项的显示信息和操作。

List controls provide information, indicate a state, or present actions for list items. List controls appear as icons to the left or right of list text.

【翻译】
列表控件提供列表项的信息，指示状态或显示操作。列表控件在列表文本的左侧或右侧显示为图标。

List control placement:

States and primary actions are placed on the left side of a list tile.
Secondary actions and info are placed on the right side of the tile.

【翻译】
列表控件展示位置：
状态和主要操作放置在列表图块的左侧。
次要动作和信息放在图块的右侧。

Types - 类型

Checkbox
Switch
Reorder
Expand/collapse
Leave-behinds

【翻译】
复选框
开关
重新排序
展开/折叠
留下

Menu controls - 菜单控件

Check
Inline information
Nested menu indicator

【翻译】
检查
内联信息
嵌套菜单指示器

Usage - 用法

List controls fall under four categories:

State
Primary action (including text strings)
Secondary action
Secondary info

【翻译】
列表控件分为四类：
状态
主要操作（包括文本字符串）
次要行动
次要信息

Distinguishing elements of list tiles need to be on the left for left-to-right interfaces, and vice versa. States and primary actions are placed on the left side of a list tile. Text within a list item should be considered part of the primary action target.

Don’t place two icons or actions next to one another, such as a checkbox next to an avatar.

If the primary action of the list item is navigational, don’t use an icon. The list item itself and its context should be sufficient to communicate the destination.

Secondary actions and info should be placed on the right side of the title. Secondary actions are always a separate target from the primary action, as users increasingly expect every icon to trigger an action.

【翻译】
列表图块的区分元素需要在左侧用于从左到右的接口，反之亦然。 状态和主要操作放置在列表图块的左侧。 列表项中的文本应被视为主要操作目标的一部分。
不要将两个图标或操作彼此相邻放置，例如头像旁边的复选框。
如果列表项的主要操作是导航，则不要使用图标。列表项本身及其上下文应足以传达目的地。
次要操作和信息应放置在标题的右侧。次要操作始终是与主要操作不同的目标，因为用户越来越期望每个图标触发操作。

[图片上传失败...(image-c2de6c-1552294894386)]
States and primary actions are placed on the left side of a list tile. The secondary action and secondary info should be placed on the right side of the title.

【翻译】
状态和主要操作放置在列表图块的左侧。次要操作和辅助信息应放置在标题的右侧。

Types of list controls - 列表控件的类型

Checkbox - 复选框

A checkbox can either be a primary action or a secondary action.

Type: primary action/state

Desktop checkboxes should appear only on hover and focus.

【翻译】
复选框可以是主要操作或辅助操作。
类型：主要操作/状态
桌面复选框只应在悬停和焦点上显示。

[图片上传失败...(image-11f7ba-1552294894386)]
The checkbox is the primary action and the state indicator for the list item.

【翻译】
复选框是列表项的主要操作和状态指示器。

Type: secondary action

Separate target

When controlling a family of variables, consider using switches instead.

【翻译】
类型：二级动作
单独目标
当控制一系列变量时，请考虑使用开关。

[图片上传失败...(image-4c63e3-1552294894386)]
The checkbox is the secondary action for the list item.

【翻译】
该复选框是列表项的辅助操作。

Switch - 开关

Type: secondary action

Separate target

【翻译】
类型：二级动作
单独目标

[图片上传失败...(image-8983cd-1552294894386)]
The switch is the secondary action and a separate target.

【翻译】
开关是辅助操作和单独的目标。

Reorder - 重新排序

Type: secondary action

Usually a separate target, depending on which mode list it is in.

Allows dragging of the list item to other locations within the list. It usually appears in list editing mode.

【翻译】
类型：二级动作
通常是一个单独的目标，取决于它在哪个模式列表。
允许将列表项拖动到列表中的其他位置。它通常出现在列表编辑模式。

[图片上传失败...(image-d1cc82-1552294894386)]
The reorder icon is the secondary action for the list item.

【翻译】
重新排序图标是列表项的辅助操作。

Expand/collapse - 展开/折叠

Type: secondary action

Separate target

Expands and collapses a list view vertically to show and hide details of existing list items.

【翻译】
类型：二级动作
单独目标
垂直扩展和折叠列表视图以显示和隐藏现有列表项的详细信息。

[图片上传失败...(image-d2f1e3-1552294894386)]
By touching the list control, the user expands the list.

【翻译】
通过触摸列表控件，用户将展开列表。

[图片上传失败...(image-e9ddf7-1552294894386)]
The list is expanded.

【翻译】
列表被扩展。

[图片上传失败...(image-8bfb3b-1552294894386)]
Collapsed single-line item

【翻译】
折叠的单行项目

image

Expanded single-line item

【翻译】
展开的单行项目

Leave-behinds

Type: Other

A leave-behind is an informative hint as to what swiping a list item away will do to that item. The leave-behind can transform into an action.

Swiping on a list item from either direction will reveal an icon indicating the action. After swiping, a follow-up action can appear as a text button within the space of the list item.

【翻译】
类型：其他
留下是一个提示性的提示，即清除项目将会对该项目执行什么操作。留下的东西可以变成一个动作。
从任一方向在列表项上滑动将显示指示动作的图标。在滑动后，后续操作可以作为列表项目空间中的文本按钮显示。

[图片上传失败...(image-f83c90-1552294894386)]
Swiping on a list item from right to left will reveal an icon indicating the action.

【翻译】
从右向左滑动列表项将显示一个表示操作的图标。

[图片上传失败...(image-a47af-1552294894386)]
Swiping on a list item from left to right will reveal an icon indicating the action.

【翻译】
在列表项上从左向右滑动将显示指示操作的图标。

Types of menu controls - 菜单控件的类型

A menu is a special type of list. In menus, use controls that are appropriate for dropdown menus, overflow menus, and so on. Don’t use these controls in regular lists. Use the regular list controls instead.

【翻译】
菜单是一种特殊类型的列表。在菜单中，使用适用于下拉菜单，溢出菜单等的控件。不要在常规列表中使用这些控件。请改用常规列表控件。

Check - 检查

Type: state

Not a separate target.

Menus only. Indicates that the list item has been selected. The selection is done through a different control.

【翻译】
类型：状态
不是一个单独的目标。
仅菜单。表示已选择列表项。通过不同的控制来进行选择。

[图片上传失败...(image-3bcc11-1552294894386)]
The check indicates that the list item has been selected.

【翻译】
检查表示已选择列表项。

Inline information - 内联信息

Type: secondary info

Not a separate target.

Menus only. Inline information is a small snippet of text related to the line title that can provide information or a tip, like a keyboard shortcut. It cannot be truncated.

【翻译】
类型：次要信息
不是一个单独的目标。
仅菜单。内联信息是与线标题相关的一小段文本，可提供信息或提示，如键盘快捷键。它不能被截断。

[图片上传失败...(image-c5dac1-1552294894386)]
The inline information for Bold, Italic and Underline provide keyboard shortcuts.

【翻译】
Bold，Italic和Underline的内联信息提供键盘快捷键。

**Nested menu indicator - 嵌套菜单指示器 **

Type: primary action

Not a separate target.

Menus only. The glyph indicates that a secondary menu will fly out upon hover, focus, and/or selection.

【翻译】
类型：主要操作
不是一个单独的目标。
仅菜单。字形表示当悬停，聚焦和/或选择时，辅助菜单将飞出。

[图片上传失败...(image-cbc97-1552294894386)]
The glyphs for the menu items indicate that a secondary menu will fly out upon hover, focus, and/or selection.

【翻译】
菜单项的字形表示当悬停，聚焦和/或选择时，辅助菜单将飞出。