列表控件显示列表项的信息和操作。
列表控件提供信息,指示列表项的状态或显示操作。列表控件显示为列表文本左侧或右侧的图标。
列表控件放置:
- 状态和主要操作位于列表图块的左侧。
- 辅助操作和信息放置在图块的右侧。
用法
列表控件分为四类:
- 状态
- 主要操作(包括文本字符串)
- 次要操作
- 次要信息
列表块的区分元素需要在左侧用于从左到右的接口,反之亦然。状态和主要操作位于列表图块的左侧。列表项中的文本应被视为主要操作目标的一部分。
不要将两个图标或动作放在一起,例如头像旁边的复选框。
如果列表项的主要操作是导航,请不要使用图标。列表项本身及其上下文应足以传达目的地。
辅助操作和信息应放在标题的右侧。辅助操作始终是与主操作不同的目标,因为用户越来越希望每个图标都触发操作。
![ab6ab4b3d2ec95344ce2c02376364ae5.png](https://i-blog.csdnimg.cn/blog_migrate/96e8f7c5fc857483075fce584a2f6f10.jpeg)
列表控件的类型
复选框
复选框可以是主要操作,也可以是次要操作。
类型:主要行动/状态
桌面复选框应仅在悬停和焦点上显示。
![af64bcf247f2ea55f4517dbf51fb6de7.png](https://i-blog.csdnimg.cn/blog_migrate/f1633c853889e0848ff0a14d90897402.jpeg)
类型:辅助行动
单独的目标
在控制变量族时,请考虑使用开关。
![403a8bfaa15e162345e48f4057cda563.png](https://i-blog.csdnimg.cn/blog_migrate/145285437acd4b36c76d66ebae126ce0.jpeg)
开关
类型:辅助行动
单独的目标
![e202724c9fdb8b85d9d38ed76988128b.png](https://i-blog.csdnimg.cn/blog_migrate/be257aef3e16d64e836182b71af9c476.jpeg)
重新排序
类型:辅助行动
通常是一个单独的目标,具体取决于它所在的模式列表。
允许将列表项拖动到列表中的其他位置。它通常出现在列表编辑模式中。
![61bc67ff81c60767e1ad562d432a8b48.png](https://i-blog.csdnimg.cn/blog_migrate/5cd7dc7dfee7986dc09205135e7369ef.jpeg)
展开/收起
类型:辅助行动
单独的目标
垂直展开和折叠列表视图以显示和隐藏现有列表项的详细信息。
![b6de8049917c6bcde1d257dc6e9b154b.png](https://i-blog.csdnimg.cn/blog_migrate/357251744fb85d2da410a0492b53c93b.jpeg)
![82ecfa145d9b0d4f17dc9b282fb450cc.png](https://i-blog.csdnimg.cn/blog_migrate/c92337114afe5a002f5839c0503c1e35.jpeg)
遗留信息
类型:其他
遗留信息是一个提供信息的提示,指示清除列表项目将对该项目执行的操作。遗留信息可以转化为行动。
从任一方向滑动列表项将显示指示操作的图标。在滑动之后,后续操作可以在列表项的空间内显示为文本按钮。
菜单控件的类型
菜单是一种特殊类型的列表。在菜单中,使用适用于下拉菜单,溢出菜单等的控件。不要在常规列表中使用这些控件。请改用常规列表控件。
校验
类型:状态
不是一个单独的目标。
仅限菜单。表示已选择列表项。选择通过不同的控制完成。
![6d9eee38ff661d629e7c07a52be487c3.png](https://i-blog.csdnimg.cn/blog_migrate/0d646216d32aea51f8b9be33091c332c.jpeg)
内联信息
输入:辅助信息
不是一个单独的目标。
仅限菜单。内联信息是与线标题相关的一小段文本,可以提供信息或提示,如键盘快捷键。它不能被截断。
![1d591a6b0eba4359c50a0ecf1aa0fcb5.png](https://i-blog.csdnimg.cn/blog_migrate/9d2ae64c94ec79304802c2b1632df3b6.jpeg)
嵌套菜单指示器
类型:主要操作
不是一个单独的目标。
仅限菜单。字形表示辅助菜单在悬停,聚焦和/或选择时将飞出。
![997de982e244e52a77bf27d2ceeea428.png](https://i-blog.csdnimg.cn/blog_migrate/1f62ac95c1c1171585294187987c2d67.jpeg)