Breadcrumb 面包屑 | SAP Fiori

Intro 简介

面包屑导航（Breadcrumb 或 breadcrumb trail）是一种辅助导航，用于显示当前页面在其应用层次结构中的位置。它通常用于向下钻取挖掘的场景，用户在其中浏览相关对象页面、表格和图表。

Usage 用法

在以下情况下使用面包屑：

• 您希望在对象页面上显示辅助导航
• 您希望在表格中显示导航
• 您希望在图表中显示导航

仅当向下钻取的场景指向相关对象页面时才使用面包屑：父对象页面 / 子对象页面 1 / 子对象页面 2 / 子对象页面 3。

如果出现以下情况，请勿使用面包屑：

• 您的层次结构仅包含一个层级

面包屑路径中不应包含以下元素：

• 其他 floorplan，例如概览页面和列表报告
• 跨应用导航至其他对象页面
• 独立的对象页面，例如情况说明书
  SAPFiori 2.0 的全局导航概念将介绍这些情况。
  
  

Responsiveness and Adaptiveness 响应性和适应性

面包屑是响应的。如果水平空间不足，面包屑路径中的链接可折叠放在下拉菜单中：

• 面包屑中的第一个链接（起点）首先折叠，然后是层次结构中的下一个链接。
• 面包屑中的最后一个元素始终是可见的，并且永远都不会被折叠进下拉菜单中。
• 如果水平空间不足，则截断显示最后一个元素。

面包屑 - Size L

面包屑 - Size M

面包屑 - Size S

面包屑 - Size S（下拉菜单）

Layout 布局

面包屑的水平布局永远保持不变。链接总是紧挨着显示。

Types 类型

面包屑有两种类型：

• 标准面包屑
  标准的面包屑将当前页面作为最后一项显示。最后一项只包含纯文本，而不是链接。
• 不包含当前页面的面包屑
  仅在对象页面中使用此面包屑。面包屑显示了对象页面在应用中的位置，不显示当前页面。面包屑中的所有项目都是链接。

标准面包屑

不显示当前页面的面包屑

Components 组件

面包屑可包含链接和文本（标准面包屑），或者只包含链接（不包含当前页面的面包屑）。

Behavior and Interaction 行为与交互

导航

面包屑的目的是触发导航。当用户点击面包屑路径中的链接时，将触发此操作。
有关链接的行为和交互，请参阅 链接。

Styles 样式

要了解不同的链接样式，请参阅 链接。

Guidelines 指南

在桌面和平板设备的下拉菜单中，仅显示面包屑路径中不可见的链接。
在智能手机的下拉菜单中，按层级顺序显示面包屑路径中的所有链接。

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