hbox

LIVE DEMO

hbox lays out all nested components in a single horizontal row.

  • XML element: hbox

  • Java class: HorizontalLayout

Basics

An example of arranging three components in a single row:

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

Attributes

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

alignItems

MDN

Controls the alignment of all items within the layout. Possible values are:

  • START

  • END

  • CENTER

  • STRETCH

  • BASELINE

  • AUTO

boxSizing

MDN

Sets how the total width and height of an element is calculated. Possible values are:

  • UNDEFINED

  • CONTENT_BOX

  • BORDER_BOX

expand

Specifies a component within the layout that should be expanded to use all available space. In the case of hbox, this attribute sets the component’s width to 100%.

justifyContent

MDN

Defines how the browser distributes space between and around content items. Possible values are:

  • START

  • END

  • CENTER

  • BETWEEN

  • AROUND

  • EVENLY

margin

MDN

Defines indentation between the outer borders and the container content. Possible values — true, false. Default is false.

padding

MDN

Sets the padding area on all four sides of an element at once. Possible values — true, false. Default is false.

spacing

Sets spacing between components within a layout. Possible values — true, false. Default is false.

Handlers

AttachEvent - ClickEvent - DetachEvent

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

ClickEvent

com.vaadin.flow.component.ClickEvent is sent when the user clicks the layout.