框选列表#

../../_images/boxed-lists.png ../../_images/boxed-lists-dark.png

框选列表是一种常见的列表类型,可以包含控件和信息。例如,应用程序首选项或选择器中的近期文档列表。

框选列表模式适用于相对较小且静态的列表。对于大型或动态列表,请参阅 列表视图

指南#

根据 菜单的组织方式,语义化地组织列表。可以在同一个视图中包含多个列表,作为不同的部分。如有必要,可以为每个列表添加标题。

框选列表的行可以包含纯粹的信息内容或控件。它们也可以充当指向另一个视图的链接(执行此操作的行应在末尾放置一个 go-next-symbolic 箭头)。

包含控件的行通常只应有一个,最多两个。当存在控件时,单击列表背景应触发该控件。控件应可聚焦,但列表行不应可聚焦,允许直接在控件和先前/后续行之间切换键盘焦点。

列表具有许多样式和布局方面的考虑事项

  • 如果列表行包含多个文本元素,请使用 文本大小、粗细和颜色 来区分它们。

  • 如果列表行包含图标,它们通常应具有 符号样式。这些图标的视觉足迹较小,意味着它们不会在视觉上过度加载或主导您的列表。

  • 列表应具有最小和最大宽度,以便支持 自适应缩放

预定义列表行#

为了方便起见,GNOME 提供了许多预定义的列表行。这些也可以用作您自己的自定义行设计的依据。

开关行 包含标题、副标题和一个开关

../../_images/switch-row.png ../../_images/switch-row-dark.png

操作行 包含标题、副标题和一个控件

../../_images/action-row.png ../../_images/action-row-dark.png

组合行 包含一个下拉列表,从中可以选择一个选项

../../_images/combo-row.png ../../_images/combo-row-dark.png

输入行 允许文本输入和编辑

../../_images/entry-row.png ../../_images/entry-row-dark.png

微调行 包含一个可以使用加号和减号按钮进行编辑或调整的数字

../../_images/spin-row.png ../../_images/spin-row-dark.png

属性行 包含一个属性名称和一个值

../../_images/property-row.png ../../_images/property-row-dark.png

展开行 展开以显示下方的其他行

../../_images/expander-row.png ../../_images/expander-row-dark.png

可编辑列表#

存在用于可编辑框选列表的设计约定,允许用户添加、删除和重新排序行。

  • 可以使用显示在列表顶部的添加按钮,或放置在列表末尾的添加按钮行来添加行。

  • 在每行的末尾放置一个删除按钮。

  • 如果需要更改列表顺序
    • 在行的开头包含拖动句柄,以允许移动它们。

    • 与其在每行的末尾显示删除按钮,不如包含一个按钮菜单,其中包含“上移”、“下移”和“删除”项目(出于可访问性目的,移动操作的菜单项是必需的)。

添加按钮#

您可以包含带有列表的操作,例如添加、删除、清除或重置。通常通过添加 药丸按钮 或按钮行来完成此操作。

当需要引起注意或与上方内容区分时,使用药丸按钮。在其他情况下,通常使用按钮行。当按钮本身是列表的一部分时,例如在将项目添加到列表时,也可以使用按钮行。

按钮行 包含标题、起始图标和结束图标

../../_images/button-rows.png ../../_images/button-rows-dark.png

按钮行标签应遵循 按钮 的标准指南,包括使用 省略号。但是,如果该行打开新视图,则应将省略号替换为尾随向右箭头。

API 参考#