details

LIVE DEMO

details is an expandable panel used to show and hide content.

  • XML element: details

  • Java class: JmixDetails

Basics

Use details to hide additional information or optional controls. details can contain any component or layout.

<details id="details" summaryText="View details">
        <span text="Additional information or components may be added here."/>
</details>
details basic

Theme Variants

LIVE DEMO

Use themeNames attribute to set a component theme.

Variant Description Supported By

filled

Applies a filled background style.

Aura, Lumo

reverse

Displays the toggle icon after the summary text.

Aura, Lumo

small

Makes the component smaller.

Aura, Lumo

no-padding

Removes the default padding from the content area.

Aura

Attributes

id - alignSelf - classNames - colspan - css - enabled - height - maxHeight - maxWidth - minHeight - minWidth - opened - summaryText - themeNames - visible - width

opened

Specifies whether the panel is opened.

summaryText

Vaadin

Specifies the text that provides a summary of what is hidden in the component.

themeNames

Sets a different theme to change the component’s appearance. See Theme Variants for the available built-in variants.

Handlers

AttachEvent - DetachEvent - OpenedChangeEvent

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

OpenedChangeEvent

OpenedChangeEvent is sent every time the opened attribute of the component changes.

Elements

tooltip

See Also

See the Vaadin Docs for more information.