Details

<wa-details> Since 2.0 stable

Details show a brief summary and expand to show additional content.

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. 
<wa-details summary="Toggle Me">
  Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna
  aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
</wa-details>

Examples

Disabled

Use the disabled attribute to prevent the details from expanding.

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. 
<wa-details summary="Disabled" disabled>
  Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna
  aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
</wa-details>

Customizing the Summary Icon

Use the expand-icon and collapse-icon slots to change the expand and collapse icons, respectively. To disable the animation, override the rotate property on the icon part as shown below.

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. 
<wa-details summary="Toggle Me" class="custom-icons">
  <wa-icon name="square-plus" slot="expand-icon" variant="regular"></wa-icon>
  <wa-icon name="square-minus" slot="collapse-icon" variant="regular"></wa-icon>

  Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna
  aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
</wa-details>

<style>
  /* Disable the expand/collapse animation */
  wa-details.custom-icons::part(icon) {
    rotate: none;
  }
</style>

HTML in Summary

To use HTML in the summary, use the summary slot. Links and other interactive elements will still retain their behavior:

Some text a link more text Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. 
<wa-details>
  <span slot="summary">
    Some text
    <a href="https://webawesome.com" target="_blank">a link</a>
    more text
  </span>

  Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna
  aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
</wa-details>

Right-to-Left Languages

The details component automatically adapts to right-to-left languages:

استخدام طريقة لوريم إيبسوم لأنها تعطي توزيعاَ طبيعياَ -إلى حد ما- للأحرف عوضاً عن 
<wa-details summary="تبديلني" lang="ar" dir="rtl">
  استخدام طريقة لوريم إيبسوم لأنها تعطي توزيعاَ طبيعياَ -إلى حد ما- للأحرف عوضاً عن
</wa-details>

Appearance

Use the appearance attribute to change the element’s visual appearance.

<div class="wa-stack">
  <wa-details summary="Outlined (default)">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna
    aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
  </wa-details>
  <wa-details summary="Filled" appearance="filled">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna
    aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
  </wa-details>
  <wa-details summary="Filled + Outlined" appearance="filled outlined">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna
    aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
  </wa-details>
  <wa-details summary="Plain" appearance="plain">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna
    aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
  </wa-details>
</div>

Grouping Details

Use the name attribute to create accordion-like behavior where only one details element with the same name can be open at a time. This matches the behavior of native <details> elements.

<div class="wa-stack">
  <wa-details name="group-1" summary="Section 1" open>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna
    aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
  </wa-details>

  <wa-details name="group-1" summary="Section 2">
    Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam,
    eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.
  </wa-details>

  <wa-details name="group-1" summary="Section 3">
    At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque
    corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident.
  </wa-details>
</div>

Slots

Learn more about using slots.

Name Description
(default) The details' main content.
summary The details' summary. Alternatively, you can use the summary attribute.
expand-icon Optional expand icon to use instead of the default. Works best with <wa-icon>.
collapse-icon Optional collapse icon to use instead of the default. Works best with <wa-icon>.

Attributes & Properties

Learn more about attributes and properties.

Name Description Reflects
open
open
Indicates whether or not the details is open. You can toggle this attribute to show and hide the details, or you can use the show() and hide() methods and this attribute will reflect the details' open state.
Type boolean
Default false
summary
summary
The summary to show in the header. If you need to display HTML, use the summary slot instead.
Type string
name
name
Groups related details elements. When one opens, others with the same name will close.
Type string
disabled
disabled
Disables the details so it can't be toggled.
Type boolean
Default false
appearance
appearance
The element's visual appearance.
Type 'filled' | 'outlined' | 'plain'
Default 'outlined'

Methods

Learn more about methods.

Name Description Arguments
show() Shows the details.
hide() Hides the details

Events

Learn more about events.

Name Description
wa-show Emitted when the details opens.
wa-after-show Emitted after the details opens and all animations are complete.
wa-hide Emitted when the details closes.
wa-after-hide Emitted after the details closes and all animations are complete.

CSS custom properties

Learn more about CSS custom properties.

Name Description
--spacing
The amount of space around and between the details' content. Expects a single value.
--show-duration
The show duration to use when applying built-in animation classes.
Default 200ms
--hide-duration
The hide duration to use when applying built-in animation classes.
Default 200ms

CSS parts

Learn more about CSS parts.

Name Description
base The inner <details> element used to render the component. Styles you apply to the component are automatically applied to this part, so you usually don't need to deal with it unless you need to set the display property.
header The header that wraps both the summary and the expand/collapse icon.
summary The container that wraps the summary.
icon The container that wraps the expand/collapse icons.
content The details content.

Dependencies

This component automatically imports the following elements. Sub-dependencies, if any exist, will also be included in this list.

Importing

The autoloader is the recommended way to import components. If you prefer to do it manually, use one of the following code snippets.

CDN npm React

To manually import this component from the CDN, use the following code. 

import 'https://early.webawesome.com/[email protected]/dist/components/details/details.js';

To manually import this component from NPM, use the following code. 

import '@awesome.me/webawesome/dist/components/details/details.js';

To manually import this component from React, use the following code. 

import '@awesome.me/webawesome/dist/react/details';
Need a hand? Report a bug Ask for help
    No results