Documentation

Documentation

Details

Source: TypeScript / Java
Styling API reference for the Details component.

CSS Selectors

The following CSS selectors can be used in stylesheets to target the various parts and states of the component. See the Styling documentation for more details on how to style components.

Root element

vaadin-details

States

Opened panel

vaadin-details[opened]

Disabled panel

vaadin-details[disabled]

Summary

Panel header (a.k.a. summary)

vaadin-details-summary

Toggle

vaadin-details-summary::part(toggle)

Toggle icon

vaadin-details-summary::part(toggle)::before

Summary content wrapper

vaadin-details-summary::part(content)

Opened details summary

vaadin-details-summary[opened]

Disabled details summary

vaadin-details-summary[disabled]

Content

Collapsible content wrapper

vaadin-details::part(content)