代码之家  ›  专栏  ›  技术社区  ›  THI

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

  •  2
  • THI  · 技术社区  · 6 年前

    在UI5应用程序的标题中,我在这两个图像之间有两个图像和5个按钮。在使用Overflowtoolbar时,溢出(…)如最右边所示,我如何使其出现在两者之间?考虑到我会将两个图像的溢出优先级调整为“永不溢出”,并且它们永远不会溢出。 另一种方法:是否可以在标题中引入一个操作表/面包屑菜单,并使其仅在达到某个屏幕断点时可见,同时使所有其他按钮消失。在某种程度上,使某些控件基于断点级别可见/隐藏。

    我们的目标是让这两个图像都能看到,直到它可能出现为止,然后把所有的东西都放进去。。。最好在这些图像之间。否则我就看不到那些。。。,小屏幕上只显示两幅图像。

    XML。看法

        <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>
    
    1 回复  |  直到 6 年前
        1
  •  1
  •   Boghyon Hoffmann    5 年前

    下面是一个例子 两张图片之间有一个动作表/面包屑菜单:

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

    ui5 overflowtoolbar with shrinkable breadcrumbs
    从…起 https://jsbin.com/humuxew/edit?js,output

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

        2
  •  0
  •   A.vH    6 年前

    由于。。。始终作为最后一个元素渲染(请参见 Renderer: Line 23 ).

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