对于 SAP UI5 响应式表格来说,不应暗藏名称和状态列是列的默认行为,所以让咱们让默认值(minScreenWidth:"" 和 demandPopin:false)发挥作用。

下图是一个例子:

如果 visible 设置成 false 后,column 从屏幕上隐没:

对于小型设施,型号列(Model Number)应该被暗藏,所以咱们的断点是 minScreenWidth:"Small" 和 demandPopin:false(默认值)。

数量、单价和最终价格列应该进入咱们的弹出区域,因而咱们的断点依然是 minScreenWidth:"Small" 但当初应用 demandPopin:true 以在弹出区域中显示该列。

例如,在平板电脑和更宽的设施上,咱们将有更多可用空间,因而咱们能够显示“最终价格”列,但对于更小的设施,咱们将复原为弹出模式。 所以这里咱们的断点应该是 minScreenWidth:"Tablet" 和 demandPopin:true。

什么是 SAP UI5 sap.m.Column 的 minScreenWidth 属性?

SAP UI5中的sap.m.Column是用于在Table和ColumnListItem控件中创立列的UI元素。minScreenWidth是该控件的一个属性,用于定义列应在哪个屏幕宽度下暗藏。

当minScreenWidth设置为某个特定屏幕宽度(例如“600px”)时,如果设施的屏幕宽度小于该值,则该列将被暗藏。这能够帮忙在小屏幕设施上进步用户体验,使表格内容更加易于查看和操作。当用户应用大屏幕设施时,该列将主动显示进去。

例如,假如您有一个具备五个列的表格,您能够为其中的某些列设置minScreenWidth属性。如果用户在小屏幕设施上查看该表格,只会显示设置了minScreenWidth属性为较大值的列,其余列将被暗藏。当用户在大屏幕设施上查看该表格时,所有列都将显示进去。

上面是一个例子:

<mvc:View xmlns:mvc="sap.ui.core.mvc" xmlns="sap.m">  <Table id="myTable">    <columns>      <Column>        <Text text="Column 1" />      </Column>      <Column minScreenWidth="600px">        <Text text="Column 2" />      </Column>    </columns>    <items>      <ColumnListItem>        <cells>          <Text text="Data 1" />          <Text text="Data 2" />        </cells>      </ColumnListItem>    </items>  </Table></mvc:View>

在这个例子中,Column元素中的minScreenWidth属性设置为"600px",这意味着在设施屏幕宽度小于600像素时,该列将被暗藏。另外一个Column元素没有设置minScreenWidth属性,这意味着该列将始终显示,无论屏幕宽度大小。