div

LIVE DEMO

div is a container that groups related components together.

XML Element

div

Java Class

Div

Attributes

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

Handlers

AttachEvent - ClickEvent - DetachEvent

Basics

The following example shows div with nested components:

<div>
    <h2 text="Sample Title"/>
    <p text="This is a sample paragraph inside a div."/>
</div>
Use the html component to include raw HTML.

Themes

The component can apply a predefined theme to nested components. For that, combine badge and another themeNames value:

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

Attributes

Common attributes serve the same purpose for all components. The following attributes are specific to div:

Name

Description

Default

themeNames

Adds a theme to the component. Possible values: badge, normal, success, error, contrast, primary, small, pill. For a theme to take effect, combine badge with another value as shown above.

Predefined themes are sets of CSS classes that may affect other styling options of the component or its nested components.

-

Handlers

Common handlers are configured in the same way for all components. The following handlers are specific to div:

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).

Name

Description

ClickEvent

The com.vaadin.flow.component.ClickEvent is fired when the component is clicked. This handler must specify one of the three subjects to detect the number of clicks:

click – fires the event whenever the component is clicked.

singleClick – fires the event after a timeout to ensure it is not a double click.

doubleClick – fires the event when the component is double-clicked.