【问题标题】:XML: how to align the items (Buttons of an HBox/Vbox) to the RightXML:如何将项目(HBox/Vbox 的按钮)向右对齐
【发布时间】:2020-02-12 03:22:35
【问题描述】:

如标题所述。

我的尝试:

<VBox>  
    <HBox alignItems="Right" id="Tabelle">
        <Button visible="true" enabled="true" icon="sap-icon://navigation-right-arrow" />
        <Button visible="true" enabled="true" icon="sap-icon://open-command-field" />
        <Button visible="true" enabled="true" icon="sap-icon://process" />
    </HBox>
</VBox>

在右侧添加一个alignItems -> 以便Hbox 的元素将放在VBox 的右侧,但它似乎不起作用。

为什么不工作?

【问题讨论】:

    标签: javascript xml icons sapui5 right-align


    【解决方案1】:

    我可以推荐的最佳控件FlexBox

    <FlexBox
        alignItems="Center"
        justifyContent="End">
        <items>
            <Button enabled="true" icon="sap-icon://navigation-right-arrow" class="sapUiSmallMarginEnd"/>
            <Button enabled="true" icon="sap-icon://open-command-field" class="sapUiSmallMarginEnd"/>
            <Button enabled="true" icon="sap-icon://process" />
        </items>
    </FlexBox>
    

    输出

    【讨论】:

    • 感谢您的贡献!我需要它与 HBox 和 HBox justifyContent 一起工作
    【解决方案2】:

    HBox(和 VBox)基本上是一个 Flexbox,要正确放置内容,请使用 justifyContent 而不是 alignContentalignItems

    <HBox justifyContent="End" id="Tabelle">
        <Button visible="true" enabled="true" icon="sap-icon://navigation-right-arrow" />
        <Button visible="true" enabled="true" icon="sap-icon://open-command-field" />
        <Button visible="true" enabled="true" icon="sap-icon://process" />
    </HBox>
    

    Example

    flexbox定位的好参考:https://css-tricks.com/snippets/css/a-guide-to-flexbox/

    编辑 1:添加示例 编辑 2:语法和错别字

    【讨论】:

      【解决方案3】:

      尝试使用alignContent 而不是alignItems 或两者的组合。似乎两者都有一些影响。

      您也可以查看HBox API 文档

      【讨论】:

      • 感谢您的贡献!对于 HBox justifyContent 的功能比 alignContent 更好
      猜你喜欢
      • 1970-01-01
      • 2015-05-15
      • 2017-06-13
      • 1970-01-01
      • 2011-04-12
      • 1970-01-01
      • 2014-01-28
      • 1970-01-01
      • 2017-06-18
      相关资源
      最近更新 更多