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

SAPUI5Form中的断点

时间:2023-03-26 22:07:01 JavaScript

ResponsiveGridLayoutFormResponsiveGridLayout布局是一种使用了响应式网格的表单。组呈现在一列或多列中,标签呈现在与字段相同的行或字段上方,具体取决于可用空间。此行为可能受此布局控件的属性影响。通过使用响应式网格布局,Forms提供了基于12列网格的响应式布局。有两个断点,导致支持三种尺寸:L、M、S。这些断点不是页面的L、M、S断点。与响应屏幕宽度的页面断点相反,响应式网格布局断点响应表单的宽度。注意:出于向后兼容的原因,表单和简单表单的默认表单布局控件是列布局,而不是响应式网格布局。因此,响应式网格布局需要使用layout属性手动分配给每个表单或简单表单。给定一个表单宽度,如果您知道它属于哪种类型的宽度怎么办?答案可以在下表中找到:formwidth<=600:Sformwidth>600and<=1024:Mformwidth>1024and<=1440:Lformwidth>1440:XLsizeS达到600像素。这意味着一旦表单的宽度达到601px,它就会从S变为M,因为breakpointM的默认值为600。breakpointM的值是较小尺寸的第一个值。属性breakpointL在大小L和M之间以相同的方式工作:大小M从601像素变为1024像素。这意味着一旦表单的宽度达到1025px,它将从M变为L,因为breakpointL的默认值为1024。此外,尺寸L和XL之间的属性breakpointXL与以前相同:sizeLfrom1025px到1440像素。这意味着一旦表单的宽度达到1441px,它就会从L变为XL,因为breakpointXL的默认值是1440。一般情况下,如果页面宽度变小,通常会碰到表单宽度在页面宽度达到该大小的断点之前的下一个较小的断点。比如表单的宽度在页面宽度到达M到S的断点之前就达到了M到S的断点。这是由于放置表单的容器的padding造成的。下面是一个示意图: