div

div is a container that wraps related components together. If there are no attributes or nested components it represents nothing — users will see an empty space.

  • XML element: div

  • Java class: Div

Basics

The following example shows div that applies a standard theme to its nested component:

<div themeNames="badge">
    <p text="This paragraph is styled as a badge."/>
</div>
div basic

Variants

To use different styles, combine badge and another themeNames value. The following example shows success theme applied to the nested paragraph:

<div themeNames="badge, success">
    <p text="This paragraph has green text and a light green background."/>
</div>
div success

Attributes

id - alignSelf - classNames - colspan - css - enabled - height - maxHeight - maxWidth - minHeight - minWidth - text - themeNames - title - visible - whiteSpace - width

themeNames

Adds a theme to the component. Possible values are:

  • badge

  • normal

  • success

  • error

  • contrast

  • primary

  • small

  • pill

For theme to take effect, use a combination of badge and another value as shown above.

whiteSpace

MDN

Defines the component’s white-space style value. Possible values are:

  • NORMAL

  • NOWRAP

  • PRE

  • PRE_WRAP

  • PRE_LINE

  • BREAK_SPACES

  • INHERIT

  • INITIAL

Handlers

AttachEvent - ClickEvent - DetachEvent

To generate a handler stub in Jmix Studio, use the Handlers tab of the Jmix UI inspector panel or the Generate Handler action available in the top panel of the view class and through the Code → Generate menu (Alt+Insert / Cmd+N).

ClickEvent

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