当前位置: 首页 > Web前端 > JavaScript

SAPUI5sap.ui.layout.Grid控件概述

时间:2023-03-26 23:49:48 JavaScript

此控件的命名空间:sap.ui.layout.Grid将其子控件放置在12列流布局中的布局控件。根据可用的屏幕大小,可以指定Grid控件的子控件以采用可变数量的列。该控件可以为超大、大、中、小尺寸屏幕(例如大型桌面、台式机、平板电脑和移动设备)实现灵活的布局和环绕。Grid控件的宽度可以基于百分比或像素,并且其列之间的间距可以设置为各种预定义值。注意:子控件的可见性不影响它占据的水平空间,也就是说即使控件不可见,它的水平空间仍然存在,即使它是空的。如果它变得更宽,则该列的内容将超出其尺寸。应向控件添加一个额外的sapUiRespGridOverflowHiddenCSS类以隐藏其溢出。举个例子:它的defaultSpan属性的类型:sap.ui.layout.GridSpan,这个类型是字符串类型,代表Grid对于大中小屏幕的span值。允许值由空格字母L、M或S分隔,后跟容器必须占用的从1到12的列数,例如:L2M4S6、M12、s10或l4m4。注意:必须按顺序提供参数。默认值为:XL3L3M6S12表示在小屏幕上,Label以整行显示,即12。在中等尺寸屏幕上,Label跨度为6,因为每行的宽度相等中屏部分较小,增加M的值,保证Label的显示不会被截断。下图是一个例子:我们在Chrome开发者工具中将defaultSpan中的L6改为L1,也就是说在大屏下,只用一个宽度来显示Label。可以预见,这会导致Label的显示被截断:同时触发Grid的重新布局。