组件 列表控件

列表控件

列表控件为列表项提供信息和操作。

列表控件提供列表项的信息、指示状态或显示操作。列表控件以图标形式显示在列表项文本的左侧或右侧。

列表控件位置:

  • 状态和主操作放在列表项的左侧。
  • 副操作和信息放在列表项的右侧。
类型

复选框
开关
重新排序
展开/折叠
滑动提示

菜单控件

选中
内联信息
嵌套菜单标识

Material Design 的列表控件用于提供列表项信息和操作

用法 Expand and collapse content An arrow that points down when collapsed and points up when expanded.

列表控件分为四类:

  • 状态
  • 主操作(包括文本字符串)
  • 副操作
  • 副信息

列表项中需要区分的元素应放在左侧,以符合用户从左到右的阅读顺序,反之亦然。状态和主操作放在列表项的左侧。列表项中的文本也应视为主操作目标的一部分。

不要把两个图标或操作紧挨着放在一起,例如复选框和头像。

如果列表项的主要操作是导航,那么就不要使用图标。列表项本身及其上下文应足以传达目的地信息。

副操作和信息应放在标题的右侧。副操作始终是独立于主操作的单独点击目标,因为用户越来越期望每个图标都能触发一个动作。

Material Design 列表控件:状态、操作和信息布局

状态和主操作放在列表项的左侧。副操作和副信息放在标题的右侧。

列表控件类型 Expand and collapse content An arrow that points down when collapsed and points up when expanded.

复选框

复选框可以作为主操作,也可以作为副操作。

类型:主操作/状态

桌面端的复选框应该只在鼠标悬停和获得焦点时显示。

Material Design 中的复选框作为主操作和状态标识符

在这个列表中,复选框是主操作和状态标识符。

类型:副操作

单独可点击

当控制一系列变量而不仅仅是一个变量时,考虑使用开关控件代替。

Material Design 中的复选框作为副操作

在这个列表中,复选框是副操作。

开关

类型:副操作

单独可点击

Material Design 中的开关作为副操作,支持单独点击

开关是副操作,单独可点击。

重新排序

类型:副操作

通常是单独可点击的,具体取决于当前列表所处的模式。

该操作允许用户将列表项拖动到列表中的其他位置。通常出现在列表编辑模式下。

Material Design 中用于列表项的重新排序图标

重新排序图标是列表项的副操作。

展开/折叠

类型:副操作

单独可点击

垂直展开或折叠列表视图,以显示或隐藏现有列表项的详细信息。

Material Design 中通过触摸展开的列表控件

触摸列表控件,用户可以展开列表。

Material Design 中已展开的列表

列表已展开。

Material Design 中折叠的单行列表项

折叠的单行列表项

Material Design 中展开的单行列表项

展开的单行列表项

滑动提示

类型:其他

滑动提示用于说明将列表项滑开后会执行何种操作。滑动提示可以转换为一项操作。

从任一方向滑动列表项都会露出一个表示该操作的图标。滑动后,还可以在列表项的空间内显示一个后续文本按钮操作。

Material Design:向左滑动显示操作图标

从右向左滑动列表项会显示一个表示该操作的图标。

Material Design:滑动显示操作图标

从左向右滑动列表项会显示一个表示该操作的图标。

菜单控件类型 Expand and collapse content An arrow that points down when collapsed and points up when expanded.

菜单是一种特殊类型的列表。在菜单中,使用适合下拉菜单、溢出菜单等的控件。不要在常规列表中使用这些控件,请改用常规列表控件。

选中

类型:状态

非单独可点击。

仅适用于菜单。表示当前列表项已被选中。

Material Design 勾选标记表示已选中的列表项

勾选标记表示列表项已被选中。

内联信息

类型:副信息

非单独可点击。

仅适用于菜单。内联信息是与行标题相关的一小段文本,可以提供信息或提示(如键盘快捷键)。它不能被截断。

Material Design 中加粗、斜体和下划线的键盘快捷键

加粗、斜体和下划线的内联信息提供了键盘快捷键。

嵌套菜单标识

类型:主操作

非单独可点击。

仅适用于菜单。该符号表示子菜单会在鼠标悬停、聚焦或选择时弹出。

Material Design 菜单项表示交互时弹出子菜单

菜单项中的符号表示子菜单会在鼠标悬停、聚焦或选择时弹出。