hbox

ДЕМО

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

XML-элемент

hbox

Java-класс

HorizontalLayout

Атрибуты

id - alignItems - alignSelf - boxSizing - classNames - clickShortcut - colspan - css - enabled - expand - height - justifyContent - margin - maxHeight - maxWidth - minHeight - minWidth - padding - spacing - themeNames - visible - width

Обработчики

AttachEvent - ClickEvent - DetachEvent

Элементы

endSlot - middleSlot - startSlot

Основы

Пример расположения трех компонентов в одной строке:

<hbox id="hbox">
    <textField placeholder="TextField"/>
    <button text="OK"/>
    <button text="Cancel"/>
</hbox>
hbox basic

Горизонтальное выравнивание

Горизонтальное выравнивание элементов может быть достигнуто двумя способами: выравниванием отдельных элементов или выравниванием содержимого (justification).

Выравнивание отдельных элементов

hbox позволяет добавлять дочерние компоненты в различные слоты. Эти элементы могут быть выровнены по началу, центру или концу контейнера.

hbox slots

Компоненты могут быть размещены в различных слотах выравнивания с использованием следующих подходов:

  • XML конфигурация

    <hbox id="horizontalBox" width="100%" height="100%">
    <startSlot>
        <textField label="Start component"/>
    </startSlot>
    <middleSlot>
        <textField label="Middle component"/>
    </middleSlot>
    <endSlot>
        <textField label="End component"/>
    </endSlot>
</hbox>

    Чтобы добавить слот в Jmix Studio, выберите hbox в XML-дескрипторе экрана или на панели структуры Jmix UI и нажмите кнопку Add на панели инспектора Jmix UI.

  • Программная настройка

    @ViewComponent
private HorizontalLayout horizonsBox;

@Autowired
private UiComponents uiComponents;

@Subscribe
public void onInit(final InitEvent event) {
    horizonsBox.addToStart(createTextField("Start component"));
    horizonsBox.addToMiddle(createTextField("Middle component"));
    horizonsBox.addToEnd(createTextField("End component"));
}

private TypedTextField<String> createTextField(String label) {
    TypedTextField<String> textField = uiComponents.create(TypedTextField.class);
    textField.setLabel(label);
    return textField;
}

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

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

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

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

  • CENTER

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

  • END

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

  • BETWEEN

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

  • AROUND

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

  • EVENLY

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

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

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

Атрибуты

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

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

Название

Описание

Значение по умолчанию

boxSizing

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

-

expand

Указывает компонент внутри контейнера, который должен быть расширен для использования всего доступного пространства. В случае hbox этот атрибут устанавливает ширину компонента на 100%.

-

justifyContent

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

START

margin

Определяет отступ между внешними границами и содержимым контейнера. Возможные значения: true, false. Смотрите также: страницу MDN о margin.

false

padding

Устанавливает внутренние отступы со всех четырех сторон элемента одновременно. Возможные значения: true, false. Смотрите также: страницу MDN о padding.

false

spacing

Устанавливает промежутки между компонентами внутри контейнера. Возможные значения: true, false.

false

Обработчики

AttachEvent - ClickEvent - DetachEvent

Чтобы сгенерировать заглушку обработчика в Jmix Studio, используйте вкладку Handlers панели инспектора Jmix UI, или команду Generate Handler, доступную на верхней панели контроллера экрана и через меню Code → Generate (Alt+Insert / Cmd+N).

ClickEvent

com.vaadin.flow.component.ClickEvent отправляется, когда пользователь кликает на контейнер.

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

Дополнительную информацию смотрите в документации Vaadin.