Vaadin WC API reference

Details

View as MD

Description

<vaadin-details> is a Web Component which the creates an expandable panel similar to <details> HTML element.

<vaadin-details>
  <vaadin-details-summary slot="summary">Expandable Details</vaadin-details-summary>
  <div>
    Toggle using mouse, Enter and Space keys.
  </div>
</vaadin-details>

Styling

The following shadow DOM parts are exposed for styling:

Part name Description
content The wrapper for the collapsible details content.

The following attributes are exposed for styling:

Attribute Description
opened Set when the collapsible content is expanded and visible.
disabled Set when the element is disabled.
focus-ring Set when the element is focused using the keyboard.
focused Set when the element is focused.

See Styling Components documentation.

Properties

autofocus

Type: boolean

Specify that this control should have input focus when the page loads.

disabled

Type: boolean

If true, the user cannot interact with this element.

opened

Type: boolean

If true, the collapsible content is visible.

summary

Type: string | null | undefined

A text that is displayed in the summary, if no element is assigned to the summary slot.

Events

opened-changed

Type: DetailsOpenedChangedEvent

Fired when the opened property changes.

Types

DetailsOpenedChangedEvent 

/**
 * Fired when the `opened` property changes.
 */
export type DetailsOpenedChangedEvent = CustomEvent<{ value: boolean }>;