vbox

LIVE DEMO

vbox lays out all nested components in a single vertical column.

  • XML element: vbox

  • Java class: VerticalLayout

Basics

An example of arranging three components in a single column:

<vbox id="vbox" >
    <textField placeholder="TextField"/>
    <button text="OK"/>
    <button text="Cancel"/>
</vbox>
vbox 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 vbox, this attribute sets the component’s height 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.