XML: как выровнять элементы (кнопки HBox / Vbox) вправо

Question

Как гласит заголовок.

Моя попытка:

<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 но, похоже, не работает.

Почему не работает?

Answer 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>

Выход

Answer 2

Попробуйте с alignContent вместо alignItems ИЛИ комбинацией обоих. Кажется, что оба имеют некоторое влияние.

Вы также можете проверить документацию HBox API

Answer 3

HBox (и VBox) - это, по сути, Flexbox, для правильного использования содержимого justifyContent, а не alignContent или alignItems.

<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>

Пример

Хорошая ссылка для позиционирования flexbox: https://css -tricks.com / snippets / css / a-guide-to-flexbox /

Правка 1: Добавлен пример Править 2: Грамматика и опечатки