Details
The details component allows you to display a summary and a detailed description.
Usage
Details component can be used to display a summary and a detailed description.
// create element
const details = document.createElement('monster-details');
// insert element into the DOM
document.getElementById('body').appendChild(details);
In order to display the summary, the attribute data-monster-button-label
must be set.
Details-Content
The content of the overlay can be set via slotted content. The content is displayed in the body of the summary. In this example, the content is a simple text.
<monster-details>
<p>I am the content of the overlay.</p>
</monster-details>
It is also possible to load the content from an external file. For this purpose, the reload component is used.
<monster-details>
<monster-reload data-monster-url="./nav.html"></monster-reload>
</monster-details>
Accordion
Combine multiple details into one Accordion.
<monster-details>
<div>lorem ipsum dolor st amet, consteitur sadpselit, sed dam noum eiimocie naboeyminvit ut </div>
</monster-details>
<monster-details>
<div>ineimad imnimevinam, qusi nostrud exerci tation ullacmorper susicpti lobrotis nsil uta lquiip</div>
</monster-details>
If you do not want to use the accordion, you can set the feature flag features.accordion
to false
.
Events
The following events are fired by the component.
- monster-details-before-open
- monster-details-open
- monster-details-before-close
- monster-details-closed
Layout
The select control can be customized to your own needs. For this purpose, the control can be designed via CSS.
The different parts of the control can be designed using CSS. Since the internals of the component are in a shadow tree, access is via css pseudo-element parts.
To change the color of the open button, the following CSS can be used.
details::part(container) {
border: 1px solid red;
}
The individual parts are shown in the following picture.