SAP UI5 sap.ui.layout.Grid 控件概述

简介: SAP UI5 sap.ui.layout.Grid 控件概述

这个控件的命名空间:sap.ui.layout.Grid



一个布局控件,将其子控件放置在 12 列流布局中。


根据可用的屏幕大小,可以指定 Grid 控件的子控件采用可变数量的列。 借助此控件,可以实现超大、大、中、小尺寸屏幕的灵活布局和换行,例如大型台式机、台式机、平板电脑和移动设备。


Grid 控件的宽度可以基于百分比或像素,并且其列之间的间距可以设置为各种预定义值。


注意:


  • 子控件的可见性不影响它所占据的水平空间,这意味着即使控件不可见,它的水平空间仍然存在,即使它是空的。


  • 如果它变宽,则列的内容被设计为溢出其尺寸之外。 应向控件添加一个额外的 sapUiRespGridOverflowHidden CSS 类,以隐藏它的溢出部分。


一个例子:



其 defaultSpan 属性的类型:sap.ui.layout.GridSpan,这个类型是一个字符串类型,表示大、中、小屏幕的 Grid 的跨度值。


允许的值由空格字母 L、M 或 S 分隔,后跟容器必须采用的从 1 到 12 的列数,例如:L2 M4 S6、M12、s10 或 l4 m4。


注意:参数必须按顺序提供。


默认值为:XL3 L3 M6 S12


意思是,在小屏幕上,Label 用一个完整的行,即 12 来显示。在中等屏幕的尺寸上,Label span 为 6,因为中等屏幕每一等份的宽度较小,所以增大 M 的值来确保 Label 的显示不会被截断。


下图是一个例子:




我们在 Chrome 开发者工具里将 defaultSpan 中的 L6 改成 L1,意思是在 Large 屏幕下,仅仅用一份宽度来显示 Label,可以预见这会导致 Label 的显示被截断:



同时触发 Grid 的重新布局。




相关文章
|
14小时前
|
C# 开发者 Windows
基于Material Design风格开源、易用、强大的WPF UI控件库
基于Material Design风格开源、易用、强大的WPF UI控件库
|
14小时前
|
算法 API C++
【Qt UI】QT 窗口/控件置顶方法详解
【Qt UI】QT 窗口/控件置顶方法详解
82 0
|
14小时前
|
算法 前端开发 C++
【Qt UI相关】Qt设置窗体或控件的背景色透明
【Qt UI相关】Qt设置窗体或控件的背景色透明
32 0
|
14小时前
|
API
在阿里云RPA中,你可以使用"SetForegroundWindow"函数来将SAP控件置顶
【2月更文挑战第28天】 在阿里云RPA中,你可以使用"SetForegroundWindow"函数来将SAP控件置顶
26 1
|
14小时前
|
前端开发 搜索推荐 开发者
SAP UI5 sap.m.Column 控件的 minScreenWidth 属性介绍
SAP UI5 sap.m.Column 控件的 minScreenWidth 属性介绍
33 0
|
14小时前
|
JavaScript 前端开发 开发者
SAP UI5 控件 sap.m.ListBase 的 inset 属性的作用介绍
SAP UI5 控件 sap.m.ListBase 的 inset 属性的作用介绍
18 0
|
13小时前
|
机器学习/深度学习 搜索推荐 UED
SAP Commerce Cloud Context Driven Services 概述
SAP Commerce Cloud Context Driven Services 概述
7 0
|
13小时前
|
机器学习/深度学习 人工智能 搜索推荐
SAP Commerce Cloud 智能销售服务 (Intelligent Selling Services)概述
SAP Commerce Cloud 智能销售服务 (Intelligent Selling Services)概述
6 0
|
14小时前
|
XML Java Android开发
Android之UI基础控件
Android之UI基础控件
|
14小时前
什么是 SAP ABAP 里的 Subscreen
什么是 SAP ABAP 里的 Subscreen
16 1
什么是 SAP ABAP 里的 Subscreen

热门文章

最新文章