hbox

hbox располагает вложенные компоненты горизонтально.

XML-элемент

hbox

Java-класс

HorizontalLayout

Обзор

hbox basic

Основы

ДЕМО

В примере несколько компонентов расположены в одну строку и выровнены по поперечной оси с помощью alignItems:

<hbox alignItems="CENTER" wrap="true">
    <span text="Span"/>
    <textField placeholder="TextField"/>
    <button text="Button"/>
    <button text="Button"/>
</hbox>

Слоты начала, середины и конца

ДЕМО

Используйте элементы startSlot, middleSlot и endSlot, чтобы разместить компоненты в соответствующих позициях по доступной ширине:

<layout>
    <hbox width="100%">
        <startSlot>
            <span text="Span"/>
        </startSlot>
        <middleSlot>
            <textField placeholder="TextField"/>
            <button text="Button"/>
        </middleSlot>
        <endSlot>
            <button text="Button"/>
        </endSlot>
    </hbox>
</layout>

Выравнивание содержимого

Режимы выравнивания определяют, как элементы распределяются в доступном горизонтальном пространстве. Поддерживаются следующие режимы:

  • START (по умолчанию)

    Выравнивает элементы по левому краю (для языков с письмом слева направо) или по правому краю (для языков с письмом справа налево).

  • CENTER

    Выравнивает все элементы по центру контейнера по горизонтали.

  • END

    Выравнивает элементы по правому краю (для языков с письмом слева направо) или по левому краю (для языков с письмом справа налево).

  • BETWEEN

    Равномерно распределяет доступное пространство между элементами. Дополнительное пространство не добавляется перед первым или после последнего элемента.

  • AROUND

    Равномерно распределяет пространство вокруг элементов. Пространство перед первым элементом и после последнего равно половине пространства между соседними элементами.

  • EVENLY

    Равномерно распределяет пространство между всеми элементами, включая перед первым и после последнего, обеспечивая одинаковые промежутки.

Используйте атрибут justifyContent для установки режима выравнивания содержимого контейнера.

Примеры использования приведены в разделе Правила компоновки.

Атрибуты

В Jmix существует множество общих атрибутов, которые служат одной цели для всех компонентов.

Следующие атрибуты специфичны для hbox:

Имя Описание По умолчанию

boxSizing

Задает способ вычисления общей ширины и высоты элемента. Возможные значения: UNDEFINED, CONTENT_BOX, BORDER_BOX. Смотрите также: страницу MDN о box-sizing.

UNDEFINED

expand

Задаёт идентификатор дочернего компонента, для которого значение flex-grow устанавливается в 1. Благодаря этому компонент занимает оставшееся пространство по горизонтали.

—

justifyContent

Определяет, как браузер распределяет пространство между элементами содержимого и вокруг них. Смотрите Выравнивание содержимого.

START

margin

Добавляет внешние отступы со всех четырёх сторон контейнера. См. описание margin на MDN.

false

padding

Добавляет внутренние отступы со всех четырёх сторон контейнера. См. описание padding на MDN.

false

spacing

Добавляет между дочерними компонентами интервалы, заданные темой.

true

wrap

Если установлено значение true, переносит компоненты в новую строку, когда заканчивается пространство по горизонтали. См. раздел Wrapping в документации Vaadin.

false

Обработчики

Имя Описание

AttachEvent

Срабатывает при присоединении контейнера к UI.

ClickEvent

Срабатывает при нажатии на контейнер.

DetachEvent

Срабатывает при отсоединении контейнера от UI.

Элементы

hbox может содержать компоненты напрямую или группировать их в элементах startSlot, middleSlot и endSlot.

Смотрите также