SAPUI5

Question

我创建了一个 sap.m.table 及其 header header 工具栏。

在header中，我把标题和两个SelectList用一个ToolbarSpacer隔开。

问题是当屏幕尺寸较小时，header工具栏上的元素不会返回到下一行并被截断...

在大屏幕上：

在小屏幕上：

我希望 header 能够响应，也就是说，如果没有足够的 space，元素应该转到下一行。

代码如下：

<headerToolbar height="auto">

 <Toolbar height="auto">

          <content>

            <Title id="tableHeader" text="..."/>

            <ToolbarSpacer />

             <Label text="..." lableFor="sl1"/>
              <SelectList id="sl1"
                enabled="true">
                <core:Item key="..." text="..." />
                <core:Item key="..." text="..." />
              </SelectList>

              <ToolbarSpacer />

             <Label text="..." lableFor="sl2"/>
              <SelectList id="sl2"
                enabled="true">
                <core:Item key="..." text="..." />
                <core:Item key="..." text="..." />
              </SelectList>

              <ToolbarSpacer />

                </content>

          </Toolbar>

        </headerToolbar>

Answer 1

您可以在 css:

中启用水平 table 滚动

.enableTableScrolling {
    overflow-x: scroll;
}

之后table不会被截断

Answer 2

为什么不使用 OverflowToolbar 而不是 Toolbar？是官方的响应式工具栏 https://sapui5.hana.ondemand.com/explored.html#/sample/sap.m.sample.OverflowToolbarFooter/preview

如果您不喜欢它并想要您描述的这种 "pop-in" 行为，我想您可以在工具栏中放置一个 FlexBox 并根据 [=20] 设置方向属性 =] 模型。使用表达式绑定将是这样的：

new sap.m.FlexBox({
    direction: "{= ${device>/isPhone} ? 'Column' : 'Row' }",
    items: [
        //Your content goes here            
    ]
})

更多信息：https://sapui5.hana.ondemand.com/#docs/guide/69a8e469fbde46e7b8916250080effbd.html

SAPUI5 - 响应 sap.m.Table

SAPUI5 - Responsive sap.m.Table

header

toolbar

responsive