Question

我在UI5应用程序的标题中的2个图像之间有2个图像和5个按钮。在使用Overflowtoolbar时，溢出（...）显示在最右端，我如何使之出现在两者之间，正好考虑将两个图像的溢出优先级都调整为“从不溢出”，并且它们永远不会溢出。另一种方法：是否可以在标题中引入一个操作表/面包屑菜单，并使其仅在达到特定屏幕断点时才可见，然后使所有其他按钮消失。以某种方式-根据断点级别使某些控件可见/隐藏。

目标是使两个图像均可见，直到可能为止，然后将每个图像都放置在...中，最好在这些图像之间。否则我看不到这些……，在小屏幕上只显示2张图像。

XML.view

    <OverflowToolbar design="Transparent">

    <Image src="images/abc.png" height="3.5rem">
            <layoutData>
            <OverflowToolbarLayoutData priority="High"/>
        </layoutData>
        </Image>
    <Button id="1">
        <layoutData>
            <OverflowToolbarLayoutData priority="Low"/>
        </layoutData>
    </Button>
    <Button id="2">
        <layoutData>
            <OverflowToolbarLayoutData priority="Low"/>
        </layoutData>
    </Button>
    <Button id="3">
        <layoutData>
            <OverflowToolbarLayoutData priority="Low"/>
        </layoutData>
    </Button>
    <Button id="4">
        <layoutData>
            <OverflowToolbarLayoutData priority="Low"/>
        </layoutData>
    </Button>
    <Button id="5">
        <layoutData>
            <OverflowToolbarLayoutData priority="Low"/>
        </layoutData>
    </Button>
    <ToolbarSpacer></ToolbarSpacer>
    <Image src="images/logo.png" height="2rem">
            <OverflowToolbarLayoutData priority="NeverOverflow"/>
        </layoutData>
    </Image>
    <ToolbarSeparator></ToolbarSeparator>
    <core:Icon id="loginInfo" src="sap-icon://customer" size="2rem"/>
</OverflowToolbar>

Answer 1

这是两个图像的示例，两个图像之间有一个操作表/面包屑菜单：

<OverflowToolbar asyncMode="true">
  <Image src="..." />
  <Breadcrumbs currentLocationText="Laptop">
    <layoutData>
      <ToolbarLayoutData shrinkable="true" />
    </layoutData>
    <links>
      <!-- ... -->
    </links>
  </Breadcrumbs>
  <Image src="..." />
</OverflowToolbar>

^{来自https://jsbin.com/humuxew/edit?js,output}

为了使面包屑在工具栏中变小，需要将<ToolbarLayoutData shrinkable="true"/>添加到layoutData聚合中。

Answer 2

您将无法使用OverflowToolbar解决任务，因为...始终显示为最后一个元素（请参见Renderer: Line 23）。

您可以使用Event API for screen width changes，在事件处理程序中修改视图模型并将可视属性绑定到该视图模型，如Device Adaptation中所述。

达到屏幕布局断点时使一些控件可见-UI5

2 个答案: