乐趣区

关于sap:SAP-UI5-里响应式表格的-minScreenWidth-属性讲解

响应式网页设计 (Responsible Web Designer) 的最大挑战之一是出现表格数据。蕴含很多列的大表格基本不适宜较小的屏幕,并且没有简略的办法应用 CSS 和 Media Query 从新格式化表格内容,以取得可承受的视觉显示。

为了解决这个问题,SAP UI5 框架提供了基于列的解决方案(列暗藏)和基于行的解决方案(弹出行为)以响应式显示表格,并且这两个选项同时实用。这听起来可能相当简单,让咱们通过一个具体例子来理解:

在挪动设施上,咱们晓得咱们没有足够的空间来显示所有这些列,所以咱们须要问问本人哪些列最重要。比方说:

  • 产品和价格是最重要的。所以他们不应该被暗藏。
  • 供应商、尺寸和分量不是特地重要,因而咱们只会在弹出区域显示它们。

因而这个表格在手机上显示如下:

Responsive Column Control

咱们能够应用 sap.m.Column 的 API 来管制响应式表格设计。

此控件提供两个属性来解决列暗藏和弹出行为。

  • minScreenWidth:此值定义列可见性的断点。例如:Apple iPhone 5 设施具备 568px x 320px 分辨率(dip/ 设施宽度),因而如果咱们调配 400px(或基于 16px 的 25em),则此列对于纵向(portrait) 模式(宽度 320px)将不可见,但会在横向模式下可见(宽度 568px)。

除了以 px 或 em 为单位指定之外,您还能够调配预约义的 sap.m.ScreenSize 类型之一,例如平板电脑(600 像素)或桌面电脑(1024 像素)。

此属性的默认值为空字符串,这意味着此列将始终可见。

  • demandPopin:依据你的 minScreenWidth,能够在不同的屏幕尺寸下暗藏该列。将此属性设置为 true 会在弹出区域中显示此列而不是将其暗藏。默认值为 false.
退出移动版