SAP Fiori 设计准则里的 Responsive 表格概述
SAP 设计 表格 概述 准则 Fiori Responsive
2023-06-13 09:17:28 时间
Responsive Table 是 SAP Fiori 中的默认表控件。 它包含一组 Line item 并且完全响应(fully responsive)。 根据具体情况,用户还可以从行项目导航到更多详细信息页面。
一个行项目包含多个数据点(data point),这些数据点被分类到列中。 数据点是指一个信息单位(unit of information),如数字、文本、度量单位等,可以用来构成表格、窗体或其他控件的内容。
一个数据点通常由控件显示,例如文本、对象状态或输入字段。 一个控件可以显示多个数据点,例如,通过连接文本。
与传统表格相比,响应式表格的“单元格(cell)”不限于只显示一个控件,因此单个单元格可以呈现远不止一个数据点
。
responsive table 的使用场景
- 应用程序有使用 Table 显示数据的需求。响应表是 SAP Fiori 中的默认表。
- 您需要在行项目内使用各种控件,例如微型图表。 相比之下,分析表仅支持一组非常有限的控件。
- 重点是 Line item 即行项目,而不是单元格。 响应表针对在所有设备上查看完整项目进行了优化。
- 选择一个或多个项目是一个主要用例,详细信息在行项目被选择后才显示。
- 行项相互独立,不需要跨列操作。
- 希望所有设备只有一种表格实现,不需要为不同的设备进行不同的表格内容呈现方式开发。
响应式表格针对一次查看一个行项目进行了优化,无需滚动或仅垂直滚动,无论显示宽度如何。
在智能手机上,只有最重要的数据保留在一列或两列的表格中,而所有其他数据都移动到两个项目行之间的空间,称为 “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 的设备上显示的例子:
相关文章
- SAP UI5 应用中的 sap.ui.require.toUrl 使用场景
- SAP UI5 sap.ui.base.ManagedObject 的构造函数参数讲解
- SAP 电商云 Spartacus UI Angular UI 和 Accelerator JSP UI 的混合使用
- SAP UI5 sap.ui.Device.media.RANGESETS 的使用介绍
- SAP UI5 sap.ui.Device.media 公有方法介绍
- SAP MM模块-主要的采购业务
- 通过一个实际例子,理解 SAP UI5 sap.ui.model.odata.v2.ODataModel API 中 BindingContext 绑定上下文的概念和用法试读版
- SAP OData 框架里的缓存(Cache)设计专题讲座试读版
- SAP UI5 应用里 FlexBox 控件的设计原理
- SAP MM 公司间退货STO,item里是可以勾选GR-bsd IV的
- SAP Fiori 设计准则里的 Responsive 表格不太适合的场景介绍
- 澄清一些对 SAP UI5 响应式表格 sap.m.Table 的常见理解误区试读版
- 如何找出 SAP Fiori Launchpad 里点击 tile 之后,读取业务数据调用的是哪个 SAP 后台系统的 OData 服务试读版
- SAP OLE中常用的一些方法和属性详解编程语言
- 如何给指定用户发送SAP系统消息-TH_POPUP详解编程语言
- SAP 传输请求报错—-***在本系统中被修理(Object ****** is in repair status. Therefore, it cannot be imported).详解编程语言
- SAP 权限与角色设计详解编程语言
- SAP MM 如何得到委外加工采购订单中需要发给subcontractor的物料的信息详解编程语言
- SAP修改已经释放了的请求号详解编程语言
- 深度比较:SAP vs Oracle(sap与oracle比较)
- 对比:Oracle 与 SAP的优势(oracle 与 sap)
- 比拼Oracle与SAP的优劣对比(oracle与sap优劣)
- Oracle与SAP金蝶谁更具竞争力(oracle sap金蝶)
- Oracle SAP系统深入探索管理系统之魅力(oracle sap系统)