首页 > 其他分享 >SAP UI5 SimpleForm layout 设计的一些推荐做法

SAP UI5 SimpleForm layout 设计的一些推荐做法

时间:2022-09-18 11:47:12浏览次数:69  
标签:layout 标题 标签 网格 表单 UI5 使用 SAP 页面

如果表单仅包含一个组,请不要使用组标题 - 而是使用表单标题。
看个具体的例子:

如果表单是页面上的唯一元素并且它有多个组,则可以使用组标题来标识每一个组。

如果表单是页面上的几个元素之一,例如表格和列表,请使用表单标题作为其标题。

One Page, Many Forms

如果您想强调某些组非常不同,请在一个页面上使用多个表单,而不是使用一个包含多个组的表单。 从视觉上看,这看起来比使用具有多个组的单个表单更加分离。 给每个表格一个有意义的标题。 如有必要,您也可以使用组来构建每个表单。 在这种情况下,还要给组一个标题。

下图是一个页面上拥有若干个 form 的例子:

下面是一个 form 拥有若干个 group 的例子:

Form 在不同尺寸类型下的布局

Size S (Smartphones and Dialogs)

保留默认行为(标签字段比率为 12:12:0 的单列布局)。

Size M (Tablet) – Full Screen

如果将表单放在分屏的详细信息部分,请使用标签字段比例为 4:7:1 的单列布局(标签使用 4 个网格列,字段使用 7 个网格列,1 空列使用的网格列)。

如果将表单放置在全屏应用程序中,请使用标签字段比例为 3:5:4 的单列布局(标签使用 3 个网格列,字段使用 5 个网格列,以及 4 个网格列 由空列使用)。

正如在响应性(断点)部分中已经解释的那样,大小 M 下降到 601 像素。 在这种尺寸下,3:5:4 的方法可能不够宽,无法容纳更长的标签和字段。 因此,如果您期望长标签或输入值,请使用标签字段比率 4:8:0(标签使用 4 个网格列,字段使用 8 个网格列,空列使用 0 个网格列)。

下面是一个效果:

标签:layout,标题,标签,网格,表单,UI5,使用,SAP,页面
From: https://www.cnblogs.com/sap-jerry/p/16704508.html

相关文章

  • SAP UI5 SimpleForm 在 size XL 下的布局开发
    如果表单包含单个表单组,请使用标签字段比例为3:5:4的单列布局(标签使用3个网格列,字段使用5个网格列,以及空列)。如果将表单放入全屏应用程序中,您还可以使用属性sing......
  • SAP UI5 SimpleForm 的 two-column layout 布局
    如果您将表单放置在全屏应用程序中并且它包含多个表单组,请使用标签字段比例为12:12:0的两列布局(标签使用12个网格列,标签使用12个网格列字段和空列使用的0个网格列......
  • SAP UI5 SimpleForm M 和 L 型表单的 label 和 input 分配讲解
    本文介绍SAPUI5ResponsiveGridLayout布局原理。默认情况下,表单和简单表单的大小M在响应式网格布局中也具有单列布局。但是,在大小为M的情况下,标签与相应的输入......
  • SAP 角色如何传输
    1PFCG创建角色  2,utilities-----masstransport   3,输入角色。(注意模板角色与子角色的区别)  4,执行后会要求输入请求号.。  5,SE10释放请求号。......
  • 【论文笔记】LayoutLMv2:将视觉信息加入到预训练阶段的跨模态文档预训练模型
    概述LayoutLMv2是对LayoutLM的改进,主要有以下几点区别:将视觉信息加入到了预训练阶段,而不是LayouLM中的微调阶段删除了MDC,添加了text-imagealignment和text-imgaematc......
  • 【论文笔记】LayoutLM:首次结合文本和版式信息的文档预训练模型
    概述LayoutLM是一个基于Bert,结合了文本和版式信息的文档预训练模型,在多个下游任务中都达到了当时SOTA的结果。模型模型的总体结构如图1所示:图1LayoutLM总体结构La......
  • QT布局QGridLayout QHBoxLayout QVBoxLayout简要分析
    在分析之前,先吐槽下M$的MFC,竟然没有相对布局!(至少我不知道,每次都是代码中控制布局),(2022-09-07星仔批注,MFC从VS2015开始就有布局了,功能精炼)M$这么多年,也不发展......
  • csapp-链接
    链接:将各种代码和数据片段收集并组合成一个单一文件的过程,这个文件可被加载到内存并执行。链接可执行于编译时、加载时、运行时。代码示例:静态链接:编译器驱动程序gc......
  • SAP UI5 应用中 MockServer 的实例化方法
    我们在SAPUI5应用代码中,使用如下代码创建一个MockServer实例:this.oVocabularyMockServer=newMockServer({rootUri:"/sap/opu/odata/SAP/vocabulary_srv/"});......
  • 浅谈 SAP ABAP 系统里的 ALV 输出方式实现
    由于国情原因,ABAPALV相关的报表开发在国内众多SAP技术交流群里永远都是一个热门话题。最近Jerry和朋友的技术交流群里,郭爷向大家介绍了ALVIntegratedDataAccess,能够轻......