details

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

XML Element

details

Java Class

JmixDetails

Overview

details basic

Basics

LIVE DEMO

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

<details summaryText="Details with FormLayout" width="100%">
    <formLayout>
        <textField label="Field 1"/>
        <textField label="Field 2"/>
        <textField label="Field 3"/>
    </formLayout>
</details>

Theme Variants

LIVE DEMO

Use the 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

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

Name Description Default

opened

Controls whether the content is expanded.

false

summaryText

Sets the summary that remains visible when the content is collapsed.

—

themeNames

Applies one or more variants listed in Theme Variants.

—

Handlers

Name Description

AttachEvent

Fires when the component is attached to the UI.

DetachEvent

Fires when the component is detached from the UI.

OpenedChangeEvent

Fires when the component is expanded or collapsed.

Elements

A details element can contain one or more components or layouts as its content and tooltip as a nested element.

See Also