关于前端:SAP-Fiori-设计准则里的-Responsive-表格概述

3次阅读

共计 1054 个字符,预计需要花费 3 分钟才能阅读完成。

Responsive Table 是 SAP Fiori 中的默认表控件。它蕴含一组 Line item 并且齐全响应(fully responsive)。依据具体情况,用户还能够从行我的项目导航到更多详细信息页面。

一个行我的项目蕴含多个数据点(data point),这些数据点被分类到列中。数据点是指一个信息单位(unit of information),如数字、文本、度量单位等,能够用来形成表格、窗体或其余控件的内容。

一个数据点通常由控件显示,例如文本、对象状态或输出字段。一个控件能够显示多个数据点,例如,通过连贯文本。

与传统表格相比,响应式表格的“单元格 (cell)”不限于只显示一个控件,因而单个单元格能够出现 远不止一个数据点

responsive table 的应用场景

  1. 应用程序有应用 Table 显示数据的需要。响应表是 SAP Fiori 中的默认表。
  2. 您须要在行我的项目内应用各种控件,例如微型图表。相比之下,剖析表仅反对一组十分无限的控件。
  3. 重点是 Line item 即行我的项目,而不是单元格。响应表针对在所有设施上查看残缺我的项目进行了优化。
  4. 抉择一个或多个我的项目是一个次要用例,详细信息在行我的项目被抉择后才显示。
  5. 行项互相独立,不须要跨列操作。
  6. 心愿所有设施只有一种表格实现,不须要为不同的设施进行不同的表格内容出现形式开发。

响应式表格针对一次查看一个行我的项目进行了优化,无需滚动或仅垂直滚动,无论显示宽度如何。

在智能手机上,只有最重要的数据保留在一列或两列的表格中,而所有其余数据都挪动到两个我的项目行之间的空间,称为 “pop-in area.

在此区域中,相应单元格的数据以标签 / 值对的模式提供。标签由列题目定义,值取自相应的单元格。标签能够显示在值旁边或值上方。

在弹出区域内,标签 / 值对能够通过以下形式显示(sap.m.Table,属性:PopinLayout):

  • block:标签 / 值垂直方向一个接一个显示。
  • GridSmall:标签 / 值对在等间距的网格单元格中彼此相邻显示。每 13 rem 可用宽度显示一个附加列(默认浏览器设置为 208 像素)。如果网格单元的数量超过可用宽度,则网格单元会换行。在 S 尺寸上,此布局会主动转换为块布局。
  • GridLarge:显示逻辑与 GridSmall 雷同,但网格列的最小宽度更大(26 rem 而不是 13 rem)。

上面是 Responsive Table 在手机上显示的例子:

在 Tablet 即 Screen size 为 M 上显示的例子:

Responsive Table 在桌面浏览器及 Size 为 L 的设施上显示的例子:

正文完
 0