Docs

Docs

Details

Details is an expandable panel for showing and hiding content from the user.

Details is useful for making a UI less cluttered.

<Details summary="Contact information" opened>
  <VerticalLayout>
    <span>Sophia Williams</span>
    <span>sophia.williams@company.com</span>
    <span>(501) 555-9128</span>
  </VerticalLayout>
</Details>

Composition

Details is composed of a summary area and a content area. They’re described in the subsections that follow.

Summary Area

The Summary is the part of the Details component that’s always visible. It typically describes the contents, succinctly — for example, with a title. Clicking on the summary toggles the visibility of the content area.

The summary supports rich content and can contain any component. This can be used, for example, to display the status of the corresponding content.

Content Area

This is the collapsible part of Details. When the content area is collapsed, the content is invisible and inaccessible by keyboard or screen reader. Incidentally, it can contain any component.

<VerticalLayout>
  <Details summary="Analytics" opened>
    <VerticalLayout>
      <a href="#">Dashboard</a>
      <a href="#">Reports</a>
      <a href="#">Data sources</a>
    </VerticalLayout>
  </Details>

  <Details summary="Customers">
    <VerticalLayout>
      <a href="#">Accounts</a>
      <a href="#">Contacts</a>
    </VerticalLayout>
  </Details>

  <Details summary="Finances">
    <VerticalLayout>
      <a href="#">Invoices</a>
      <a href="#">Transactions</a>
      <a href="#">Statements</a>
    </VerticalLayout>
  </Details>
</VerticalLayout>
Important
 You can find more information in the corresponding article on vaadin.com.