SAP Fiori 设计准则里的 Responsive 表格概述

简介: SAP Fiori 设计准则里的 Responsive 表格概述

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


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


一个数据点通常由控件显示,例如文本、对象状态或输入字段。 一个控件可以显示多个数据点,例如,通过连接文本。


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

4b83ed287ecc0a358a6970e53b7d4a56_646b7d4fc67e505ba0862c38a9bb0a48.png

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 的设备上显示的例子:


相关文章
|
2月前
|
IDE JavaScript 开发工具
什么是 SAP Fiori tools 的 environment check 功能
什么是 SAP Fiori tools 的 environment check 功能
26 0
|
1月前
SAP UI5 Link 控件的使用方法介绍 - 后续学习 Fiori Elements Smart Link 的基础试读版
SAP UI5 Link 控件的使用方法介绍 - 后续学习 Fiori Elements Smart Link 的基础试读版
15 0
|
1月前
|
UED
什么是 SAP Fiori 的 Technical Catalog 和 Business Catalog
什么是 SAP Fiori 的 Technical Catalog 和 Business Catalog
36 0
|
1月前
|
前端开发 UED
SAP Fiori 到底指什么
SAP Fiori 到底指什么
38 0
|
1月前
|
XML 前端开发 JavaScript
SAP Fiori Launchpad Custom Fields tile 里的 ABAP 语法高亮显示
SAP Fiori Launchpad Custom Fields tile 里的 ABAP 语法高亮显示
14 0
|
2月前
|
XML 存储 JavaScript
关于 SAP Fiori Elements List Report 里的 TableCell.fragment.xml 头部声明
关于 SAP Fiori Elements List Report 里的 TableCell.fragment.xml 头部声明
22 0
|
2月前
SAP Fiori Elements 应用里图片字段(Image)的显示原理介绍试读版
SAP Fiori Elements 应用里图片字段(Image)的显示原理介绍试读版
17 0
|
1月前
|
前端开发 搜索推荐 开发者
SAP UI5 sap.m.Column 控件的 minScreenWidth 属性介绍
SAP UI5 sap.m.Column 控件的 minScreenWidth 属性介绍
27 0
|
1月前
|
JavaScript 前端开发 开发者
SAP UI5 控件 sap.m.ListBase 的 inset 属性的作用介绍
SAP UI5 控件 sap.m.ListBase 的 inset 属性的作用介绍
15 0
|
1月前
|
Web App开发 数据采集 前端开发
纯技术讨论:如何让 SAP UI5 应用无法被别人在浏览器里调试 - 这种做法不推荐试读版
纯技术讨论:如何让 SAP UI5 应用无法被别人在浏览器里调试 - 这种做法不推荐试读版
15 0