Intro 简介

标题工具栏始终显示在页面头部。标题栏的一个主要优点是，始终可见，并且不会滚动离开。它包含了与整个页面相关的操作。
我们的一般准则是，只使用图标按钮或文本按钮。图标和文本不应合并为一个按钮。按钮始终右对齐。
按钮从经常使用到很少使用进行排序，这样可以确保最重要的按钮最后进入 overflow（溢出状态）。

Usage 用法

请使用标题工具栏，如果：

• 页面中包含多个控件，这些操作对整个页面有效。

请不要使用标题工具栏，如果：

• 您有影响整个页面的关闭或完成操作。请将它们放在页脚工具栏中。
• 您有属于某个特定 UI 元素的操作。请将它们放在离相应对象尽可能近的位置（例如，在表格中或者图表工具栏中）。
  
  

Responsiveness and Adaptiveness 响应性和适应性

要启用响应性，请使用 Overflow Toolbar 控件。更多相关信息，请参阅 toolbar overview 文章中的相应部分。

在桌面（紧凑模式）、平板电脑和智能手机（舒适模式）上，工具栏的高度会相应变化。有关舒适模式和紧凑模式的更多信息，请参阅 content density（内容密度）。

Header Toolbar on Object page – Size S
Header Toolbar on Object page – Size M
Header Toolbar on Object page – Size L

Components 组件

标题工具栏可包含以下组件：

• 应用程序特定的操作
• 通用操作

以下操作可视为通用操作：

• 添加
• 标记和收藏
• 分享菜单
• 溢出（overflow）
• 分页
  
  

Behavior and Interaction 行为和交互

应用程序特定的操作

若有需要，应用团队可为应用自定义操作。在这种情况下，文本按钮应当包含简短、明确的文本，用于解释按钮所执行的操作。按钮文本通常是一个单词的动词（比如，Share（分享））。请注意，翻译成其它语言后，UI 中的文本字符串长度可能会增加。

只有当您确信用户无需借助工具提示就可轻松理解图标的含义时，才使用图标按钮。使用标准和易于识别的图标，例如，表示附件的回形针。 App-specific icon button in header toolbar

添加（通用）

添加（项目或行）操作可显示为通用的图标按钮或更详细地描述该操作的文本。将操作放置尽可能靠近内容的位置。请注意，如果您使用的是图标按钮而不是文本，那么请将图标放置在文本操作的右侧。 dd as icon button (+) in full screen mode

如果应用开发团队想要使用多个操作（例如，添加、编辑和删除等）的组合，我们建议使用文本按钮。只有这样，按钮才能并排排列。

如果「添加」操作是主要功能，则不应将其移入 overflow 中。
如果应用中包含 2 个以上的「添加」操作，或者图标的含义不够明确，那么请使用文本按钮。

编辑和删除（通用）

如果要执行全局编辑操作，请使用「编辑」按钮。
如果要执行全局删除操作，请使用「删除」按钮。

Edit and Delete in header toolbar

收藏和标记（通用）

用户可将某个对象标记为「收藏」或者「标记」，以便快速进行后续检索。用户通过点击标题栏中相关的通用「收藏」或「标记」按钮来执行此操作。更多相关信息，请参阅 flag and favorite。

Favorite action in header toolbar

分享（通用）

「分享」菜单允许用户在当前使用的应用程序之外处理内容。它可包含各种操作。所有的按钮要么只包含文本，要么包含图标和文本的组合。每个应用程序都可以使用和补充以下操作：

• 发送电子邮件（图标：电子邮件）
• 在 SAP Jam 中讨论（图标：讨论-2）
• 在 SAP Jam 中分享（图标：分享-2）
• 发送消息（图标：发送）
• 保存为磁贴（图标：添加收藏）
• 打印（图标：打印）
• 导出为 Excel（图标：Excel 附件）
• 导出为 PDF（图标：pdf 附件）
• 导出为…
• 在…中打开
  如果您希望用户经常使用「在…中打开」功能，那么请将其直接放在标题工具栏中。

「分享」操作可出现在 the full screen 或者 the details screen 中，并且永远不会移入 overflow 菜单中。它始终是右对齐。overflow 从「分享」图标的右侧开始。 Possible actions in the Share menu Share in Header Toolbar

Overflow（通用）

如果应用程序使用 overflow 工具栏，则自动生成 overflow。如果没有足够的空间可容纳工具栏上的所有操作，或者某些操作被认为不如其他操作重要，则激活 overflow。在这种情况下，应用团队可决定仅在 overflow 中显示某些特定的操作。
应用团队还可决定某些操作是否重要到永远都不应被移入 overflow。
从版本 1.30 开始，overflow 工具栏就增加了新的功能。现在，「…」（overflow）按钮是一个切换按钮，用于控制 overflow 菜单的开启和关闭。
用户点击 overflow 按钮来打开气泡浮层。在这个动作面板中，所有的图标按钮都带有文字标签，用户可 overflow 以下控件：

• sap.m.SegmentedButton 分段按钮——显示在 overflow 中时，分段按钮处于选择模式，看起来像一个选择按钮，尽管在技术上，它仍旧是一个分段按钮。
• sap.m.Select 选择器——显示在 overflow 中时，它始终处于默认模式，以利用额外空间的优势，尽管它在工具栏中被设置为图标模式。
• sap.m.ToggleButton 开关
• sap.m.Checkbox 复选框
• sap.m.Input 输入框
• sap.m.SearchField 搜索框
• sap.m.ComboBox 组合框
• sap.m.DateTimeInput 日期时间输入框

分屏布局有自己的 overflow 菜单。

所有按钮从右到左进入 overflow 菜单。这样可确保最重要的按钮是最后一个被移入 overflow 菜单。 Header toolbar on desktop with open overflow

分页（通用）

如果您想导航至上一个或下一个对象，请使用「分页」按钮。
如果您正使用「分享」按钮，那么请将「分页」按钮放在「分享」按钮的右侧。

Paging buttons in header toolbar

Styles 样式

按钮样式应当用于帮助用户，而不是用于装饰。
应当为用户主要使用的操作（例如，编辑、创建和保存）定义它们。
使用正向、负向，或者强调样式的按钮。避免在同一个屏幕上同时使用这两种样式。

• 例外 1：出现「消息」按钮时。
• 例外 2：对象被标记为「已标记」或「收藏」。
  更多相关信息，请参阅 button。
  
  

Guidelines 准则

请参阅 toolbar overview（工具栏概述） 文章中的「指南」部分。

原文：Header Toolbar | SAP Fiori Design Guidelines
备注：文章内容翻译自 SAP - Fiori Design Guidelines。翻译包含个人理解，仅作为个人学习笔记使用。如有错误，求指正呀，非常感谢 ^^