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

article/2025/10/12 18:54:16

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


http://chatgpt.dhexx.cn/article/isbLRfU5.shtml

相关文章

Responsive Web测试

什么是Responsive Web设计 Ethan Marcotte曾于2010年5月25日在A List Apart发表了文章《Responsive Web Design》,首次提出了RWD(Responsive Web Design)的概念。其理念是,Web页面的设计能够自适应多种设备、平台和浏览器,同时减少缩放、平移…

CSS之Responsive设计的关键三步

下面我们就通过这篇教程,帮助大家从三个步骤来了解和学习“Responsive”设计 第一步:Meta标签 大家都知道,现在智能手机上浏览web页面会让页面适应屏幕的大小,显示在屏幕上。不过我们可以通过“meta”标签对他进行重置&#xff…

CSS之Responsive网页设计的三个特性

Responsive网页设计无疑是网页设计中的一个热门话题。某种程度上,他将是一个最受欢迎的网页设计概念,因为随着网站用户日渐多样化的访问方法,比如说“iPad”、“iPhone”、“Android移动设备”、“平板电脑”、“台式机”以及“ 笔记本”等不…

下载Django中文官方文档

点击?地址,2.2是版本号,后续更新需自行更改对应的版本 https://docs.djangoproject.com/zh-hans/2.2/ 点击下载 HTML,即可下载全中文官方文档 有部分没有中文翻译的页面,请自行安装谷歌翻译插件

Django 文档 | Django

项目介绍 一款 Python 语言基于Django、Layui、MySQL等框架精心打造的一款模块化、高性能、企业级的敏捷开发框架,本着简化开发、提升开发效率的初衷触发,框架自研了一套个性化的组件,实现了可插拔的组件式开发方式:单图上传、多…

Django文档4.0(通俗易懂)

欢迎访问个人博客http://www.jkraise.top 初识 django project 01. 进入虚拟环境 创建Django 工程 使用django-admin.py 来创建 xxx 项目 django-admin startproject xxxx 创建完成后 我们查看 项目结构 目录说明: test——djgo_001: 项目容器 manage.py: 一…

Django技术文档

安装Django 安装python环境并添加到系统环境中 注意:安装的时候尽量避免路径中含有中文 virtualenv虚拟环境的使用 安装virtualenv pip install virtualenv创建virtualenv虚拟环境 CMD创建虚拟环境 cmd进入自己创建的虚拟环境文件夹输入virtualenv 虚拟环境名…

django-rest-framework文档导读

django-rest-framework文档导读 技巧反序列化校验数据保存数据ModelSerializer简化代码 APIViewrequest/responseGenericAPIViewMixinListAPIViewCreateAPIViewRetrieveAPIViewDestroyAPIViewUpdateAPIViewListCreateAPIViewRetrieveUpdateAPIViewRetrieveDestroyAPIViewRetrie…

Django Rest Framework中文文档:Serializer relations

文章目录 一,django模型间的关系二,检查序列化器实例详情三,序列化关系字段(一)StringRelatedField(二)PrimaryKeyRelatedField(三)HyperlinkedRelatedField(…

Django官方文档

一、文档地址 https://docs.djangoproject.com/zh-hans/3.2/ 1.1 编写你的第一个 Django 应用,第 1 部分 1.1.1 创建项目 使用django的系统工具django-admin执行指令,即可创建 django-admin startproject mysite 目录结构显示如下 mysite/manage.…

WPF:WPF原生布局说明

前言 WPF在国内讨论度很小,我在这里记录一下WPF简单的原生控件是如何使用的,顺便回忆一下WPF的基础知识,有些忘记的比较厉害了 WPF简介 WPF是微软推出的桌面UI软件,是我觉得最早实现MVVM(数据驱动事务)&…

WPF界面美化(整体作用到控件),一步步教你使用FirstFloor.ModernUI

开发工具:VS2015 1、获取相关DLL(通过NuGet或者GitHub上下载的源码中获得),并在项目中添加引用 FirstFloor.ModernUI.dll Microsoft.Windows.Shell.dll UIShell.OSGi(这个是我运行程序时报的错误"未能加载文件或程序集",然后在…

WPF 极简风格登录界面

UI使用MaterialDesign,先看界面 一、界面 极简登录界面 二、下载MaterialDesign包 我使用的是VS2019,选择要引入MaterialDesign包的项目,鼠标右击选择NuGet程勋包 在浏览页签中输入MaterialDesign,下载MaterialDesignColors和Ma…

WPF绘制自定义窗口

简介: 原文:WPF绘制自定义窗口 WPF是制作界面的一大利器,下面就用WPF模拟一下360的软件管理界面,360软件管理界面如下: 界面不难,主要有如下几个要素: 窗体的圆角 自定义标题栏及按钮 自定义状态栏 窗体的半…

WPF简单UI菜单设计

UI效果如下&#xff1a; XAML 设计&#xff1a; <Window x:Class"简单菜单设计.MainWindow"xmlns"http://schemas.microsoft.com/winfx/2006/xaml/presentation"xmlns:x"http://schemas.microsoft.com/winfx/2006/xaml"xmlns:d"http://…

WPF真入门教程05--UI布局2

这一节&#xff0c;来学习下ComboBox下拉框&#xff0c;Border边框控件&#xff0c;Image图片控件&#xff0c;CheckBox复选框&#xff0c; 这些发挥着不同的作用&#xff0c;是布局基础组成部分&#xff0c;从左侧拖控件到右边&#xff0c;完成以下代码&#xff1a; <Wind…

WPF基本介绍

WPF基本介绍 WPF&#xff08;Windows Presentation Foundation&#xff09;是&#xff08;微软推出的&#xff09;基于Windows的用户界面框架&#xff0c;属于.NET Framework 3.0的一部分。WPF提供了统一的编程模型&#xff0c;语言和框架&#xff0c;做到了分离界面设计人员与…

WPF UI介面的革新

透過 Microsoft 對 Windows Vista 及 WPF 的強力行 銷&#xff0c;相信許多讀者對於WPF的UI能力只有驚豔二字可以形容&#xff0c;對於如何使用WPF來達到這些效果&#xff0c;基於雜誌與網路上已有相當多的文章討論&#xff0c;筆者於此就不再重述了&#xff0c;直接將主軸放在…

WPF界面设计—撸大师

WPF界面设计,模仿了金山卫士,360,鲁大师的界面! <!--无边框窗体--><Style x:Key="NoResize_window" TargetType="{x:Type Window}"> <Setter Property="AllowsTransparency" Value="true"/> <Setter Prope…

WPF - 简单的UI框架

实现了一个简单的WPF应用程序UI框架 &#xff0c;分享出来。界面效果图如下&#xff1a; 运行效果如下&#xff1a; 打算持续更新&#xff0c;将左侧面板所有功能模块全给实现了。 喜欢的可以下载源码体验&#xff1a;https://github.com/DuelWithSelf/WPFEffects 左侧分类导览…