Header Bars#

../../_images/header-bar.png ../../_images/header-bar-dark.png

Header bars 是位于窗口顶部的标准元素。它们允许拖动窗口,是窗口管理功能的所在地,并包含应用程序控件。

Header bars 通常包括

  • 按钮,用于主要的用戶操作,例如新建添加打开返回。这些按钮放置在 header bar 的开头(在从左到右的语言环境中,位于左侧)。

  • 窗口标题,放置在中心(有时会被 视图切换器 替换)。

  • 菜单,通常放置在末尾。

指南#

  • 根据左、中、右三个对齐点在 header bar 中排列控件。

  • Header bars 应该只包含少量控件。这有助于人们理解窗口提供的核心功能,并确保窗口可以调整到较窄的宽度。

  • Header bars 的内容可以并且应该随着视图或模式的改变而更新,以便根据窗口的内容显示不同的控件。这确保了 header bar 控件始终与当前上下文相关。

  • 始终确保 header bar 中留有一些空白空间,以便可以拖动它。

  • 主要的窗口 header bar 控件都应该具有 工具提示

按钮样式#

../../_images/header-bar-buttons.png

尽可能地,header bar 按钮应该显示为没有可见背景或边框。这种样式会自动应用于已知有效工作的按钮类型,包括仅包含图标的按钮、包含图标和标签的按钮以及分割按钮。

在 header bar 中自动调整外观的按钮类型不包括

这些按钮类型通常应避免用于主要的窗口 header bars,因为这会导致复杂且不一致的视觉外观。为了实现这一点,可以将图标添加到仅包含标签的按钮,并使用间距代替链接样式(见下文)。请注意,这些指南不适用于 操作对话框,后者可以安全地保留其仅包含标签的按钮。

有关更多信息,请参阅 工具栏样式类文档

按钮分组#

可以将在 header bar 中对按钮进行分组,以传达它们之间的功能关系。这在具有相互关联的按钮对(例如浏览器中的后退/前进按钮)时最常见。

可以通过在按钮组之间添加间距来实现按钮分组。这可以使用具有 spacer 样式类 的分隔符来实现。以这种方式使用间距建议作为使用链接按钮的替代方案,因为链接按钮在 header bar 中不会被移除背景。

分割按钮,它结合了一个按钮和关联的下拉菜单,是另一种在 header bar 中对按钮进行分组并确保一致外观的方式。

API 参考#