flexLayout

ДЕМО

Компонент flexLayout - это контейнер, который реализует модель Flexbox. Он обеспечивает гибкий и адаптивный способ размещения и стилизации дочерних компонентов внутри контейнера с помощью CSS. flexLayout использует значение flex-direction по умолчанию и не имеет предопределенной ширины или высоты.

XML-элемент

flexLayout

Java-класс

FlexLayout

Атрибуты

id - alignItems - alignSelf - classNames - clickShortcut - colspan - contentAlignment - css - enabled - expand - flexDirection - flexWrap - height - justifyContent - maxHeight - maxWidth - minHeight - minWidth - visible - width

Обработчики

AttachEvent - clickListener - doubleClickListener - singleClickListener - DetachEvent

Расположение содержимого

Атрибут contentAlignment сопоставляется с CSS-свойством align-content. Это свойство управляет выравниванием строк внутри flex-контейнера вдоль поперечной оси, когда есть дополнительное пространство. Оно работает аналогично тому, как justify-content выравнивает отдельные элементы вдоль главной оси.

Это свойство влияет только на многострочные flex-контейнеры, где flex-wrap установлен в wrap или wrap-reverse. Однострочный flex-контейнер (т.е. где flex-wrap установлен в значение по умолчанию no-wrap) не будет затронут свойством align-content.

START

Элементы располагаются в начале контейнера.

flex layout start
XML code 
<flexLayout contentAlignment="START"
            css="gap: 0.5em; border: 1px solid #ccc;"
            width="20em"
            minHeight="10em"
            flexWrap="WRAP">
    <button text="Button" width="9em"/>
    <button text="Button" width="9em"/>
    <button text="Button" width="9em"/>
</flexLayout>

CENTER

Элементы располагаются по центру контейнера.

flex layout center
XML code 
<flexLayout contentAlignment="CENTER"
            css="gap: 0.5em; border: 1px solid #ccc;"
            width="20em"
            minHeight="10em"
            flexWrap="WRAP">
    <button text="Button" width="9em"/>
    <button text="Button" width="9em"/>
    <button text="Button" width="9em"/>
</flexLayout>

END

Элементы располагаются в конце контейнера.

flex layout end
XML code 
<flexLayout contentAlignment="END"
            css="gap: 0.5em; border: 1px solid #ccc;"
            width="20em"
            minHeight="10em"
            flexWrap="WRAP">
    <button text="Button" width="9em"/>
    <button text="Button" width="9em"/>
    <button text="Button" width="9em"/>
</flexLayout>

STRETCH

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

flex layout stretch
XML code 
<flexLayout contentAlignment="STRETCH"
            css="gap: 0.5em; border: 1px solid #ccc;"
            width="20em" minHeight="10em"
            flexWrap="WRAP">
    <button text="Button" width="9em" height="AUTO"/>
    <button text="Button" width="9em" height="AUTO"/>
    <button text="Button" width="9em" height="AUTO"/>
</flexLayout>

SPACE_BETWEEN

Элементы распределяются равномерно внутри контейнера. Первый элемент выравнивается по началу, последний - по концу.

flex layout space between
XML code 
<flexLayout contentAlignment="SPACE_BETWEEN"
            css="gap: 0.5em; border: 1px solid #ccc;"
            width="20em" minHeight="10em"
            flexWrap="WRAP">
    <button text="Button" width="9em"/>
    <button text="Button" width="9em"/>
    <button text="Button" width="9em"/>
</flexLayout>

SPACE_AROUND

Элементы распределяются равномерно внутри контейнера. По обеим сторонам элементов остается пространство, равное половине их размера.

flex layout space around
XML code 
<flexLayout contentAlignment="SPACE_AROUND"
            css="gap: 0.5em; border: 1px solid #ccc;"
            width="20em" minHeight="10em"
            flexWrap="WRAP">
    <button text="Button" width="9em"/>
    <button text="Button" width="9em"/>
    <button text="Button" width="9em"/>
</flexLayout>

Expand

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

<flexLayout id="flexLayout"
            flexDirection="COLUMN"
            expand="button"
            height="100%"
            width="100%">
    <button text="Button"/>
    <button id="button" text="Button"/>
    <button text="Button"/>
</flexLayout>
flex layout expand

Расположение flex-элементов

Атрибут flexDirection сопоставляется с CSS-свойством flex-direction. Это свойство определяет направление размещения flex-элементов внутри flex-контейнера, которое определяет главную ось и направление (прямое или обратное).

ROW

Элементы отображаются горизонтально, как строка.

flex direction row
XML code 
<flexLayout flexDirection="ROW"
            css="gap: 0.5em">
    <button text="Button 1"/>
    <button text="Button 2"/>
    <button text="Button 3"/>
</flexLayout>

ROW_REVERSE

Элементы отображаются горизонтально, как строка в обратном порядке.

flex direction row reverse
XML code 
<flexLayout flexDirection="ROW_REVERSE"
            css="gap: 0.5em">
    <button text="Button 1"/>
    <button text="Button 2"/>
    <button text="Button 3"/>
</flexLayout>

COLUMN

Элементы отображаются вертикально, как столбец.

flex direction column
XML code 
<flexLayout flexDirection="COLUMN">
    <button text="Button 1"/>
    <button text="Button 2"/>
    <button text="Button 3"/>
</flexLayout>

COLUMN_REVERSE

Элементы отображаются вертикально, как столбец в обратном порядке.

flex direction column reverse
XML code 
<flexLayout flexDirection="COLUMN_REVERSE">
    <button text="Button 1"/>
    <button text="Button 2"/>
    <button text="Button 3"/>
</flexLayout>

Перенос flex-элементов

Атрибут flexWrap сопоставляется с CSS-свойством flex-wrap. Он определяет, будут ли flex-элементы располагаться на одной строке или могут переходить на несколько строк. Если разрешен перенос, он также задает направление, в котором строки будут располагаться друг над другом.

NOWRAP

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

flex wrap nowrap
XML code 
<flexLayout flexWrap="NOWRAP"
            css="gap: 0.5em; border: 1px solid #ccc;"
            width="20em">
    <button text="Button 1" width="9em"/>
    <button text="Button 2" width="9em"/>
    <button text="Button 3" width="9em"/>
</flexLayout>

WRAP

Flex-элементы переходят на несколько строк.

flex wrap wrap
XML code 
<flexLayout flexWrap="WRAP"
            css="gap: 0.5em; border: 1px solid #ccc;"
            width="20em">
    <button text="Button 1" width="9em"/>
    <button text="Button 2" width="9em"/>
    <button text="Button 3" width="9em"/>
</flexLayout>

WRAP_REVERSE

Flex-элементы переходят на несколько строк в обратном порядке.

flex wrap wrap reverse
XML code 
<flexLayout flexWrap="WRAP_REVERSE"
            css="gap: 0.5em; border: 1px solid #ccc;"
            width="20em">
    <button text="Button 1" width="9em"/>
    <button text="Button 2" width="9em"/>
    <button text="Button 3" width="9em"/>
</flexLayout>

Режим JustifyContent

Атрибут justifyContent соответствует CSS-свойству justify-content. Это свойство определяет, как браузер распределяет пространство между и вокруг элементов контента вдоль главной оси flex-контейнера.

Значение

Описание

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

Элементы размещаются в начале контейнера.

CENTER

Элементы размещаются в центре контейнера.

END

Элементы размещаются в конце контейнера.

BETWEEN

Элементы размещаются с пространством между строками; первый элемент на начальной линии, последний элемент на конечной линии.

AROUND

Элементы равномерно размещаются в линии с равным пространством вокруг них. Обратите внимание, что промежутки в начале и конце равны половине размера пространства между каждым элементом.

EVENLY

Элементы размещаются так, чтобы пространство между любыми двумя элементами (и пространство до краев) было равным.

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

Атрибуты

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

Ниже приведены атрибуты, специфичные для flexLayout.

Название

Описание

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

contentAlignment

Устанавливает стандартное выравнивание, которое будет использоваться для всех линий гибкого контейнера. Смотрите Расположение содержимого.

STRETCH

expand

Указывает идентификатор компонента, который может расширяться, чтобы занять любое оставшееся пространство в макете. Смотрите Expand.

flexDirection

Устанавливает свойство контейнера flex-direction. Смотрите Расположение flex-элементов.

ROW

flexWrap

Устанавливает свойство контейнера flex-wrap. Смотрите Перенос flex-элементов.

NOWRAP

justifyContent

Устанавливает режим выравнивания содержимого, используемый этим контейнером. Смотрите Режим JustifyContent.

START

Обработчики

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

Ниже приведены обработчики, специфичные для flexLayout:

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

Название

Описание

clickListener

Вызывает событие com.vaadin.flow.component.ClickEvent с объектом click. Это событие срабатывает при каждом клике по контейнеру. Для програмной регистрации обработчика события используйте метод компонента addClickListener().

doubleClickListener

Вызывает событие com.vaadin.flow.component.ClickEvent с объектом doubleClick. Это событие срабатывает, когда пользователь дважды кликает по контейнеру с небольшим интервалом времени. Для програмной регистрации обработчика события используйте метод компонента addDoubleClickListener().

singleClickListener

Вызывает событие com.vaadin.flow.component.ClickEvent с объектом singleClick. Событие срабатывает после таймаута, чтобы убедиться, что это не двойной клик. Чтобы зарегистрировать обработчик события программно, используйте метод компонента addSingleClickListener().