Details

<pc-details>

0.5.1

experimental

Dieser Inhalt ist noch nicht in deiner Sprache verfügbar.

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

<pc-details summary="Toggle me">
    This section contains additional details that are hidden by default. Use details to progressively disclose content that isn’t required immediately, such as explanations, hints or secondary settings.
</pc-details>

Code

Edit

Demos

Variants

Use the variant attribute to change the details’ variant.

<div class="pc-stack">
    <pc-details variant="outlined" summary="Outlined (default)">
        Additional information is hidden until the summary is activated. This variant uses an outlined container to separate it from surrounding content.
    </pc-details>

    <pc-details variant="filled outlined" summary="Filled + Outlined">
        This variant combines a filled background with an outline. Use it when details need stronger visual emphasis.
    </pc-details>

    <pc-details variant="filled" summary="Filled">
        Filled details visually group related information and help distinguish expandable content from the rest of the page.
    </pc-details>

    <pc-details variant="plain" summary="Plain">
        The plain variant removes most visual styling and is best used in dense layouts or inline documentation.
    </pc-details>
</div>

Code

Edit

Disabled

Use the disabled attribute to prevent the details from expanding.

<pc-details summary="Disabled" disabled>
    This content cannot be expanded because the Details component is currently disabled. Disabled details remain visible but non‐interactive.
</pc-details>

Code

Edit

Customise 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 summary-icon part as shown below.

<pc-details summary="Toggle me" class="custom-icons">
    <pc-icon
        library="default"
        icon-style="solid"
        name="plus"
        slot="expand-icon"
    ></pc-icon>
    <pc-icon
        library="default"
        icon-style="solid"
        name="minus"
        slot="collapse-icon"
    ></pc-icon>

    You can replace the default summary icon using slots. This example uses plus and minus icons and disables the rotation animation.
</pc-details>

<style>
    pc-details.custom-icons::part(summary-icon) {
        rotate: none;
    }
</style>

Code

Edit

HTML in summary

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

<pc-details>
    <span slot="summary">
        Ooh, look at
        <a href="https://example.com" rel="noreferrer noopener" target="_blank">
            this link</a>!
    </span>

    Interactive elements inside the summary slot retain their default behaviour. Use this sparingly and ensure the summary remains clear and concise.
</pc-details>

Code

Edit

RTL language support

The details component automatically adapts to RTL languages with the lang and dir attributes.

<pc-details summary="مزيد من المعلومات" lang="ar" dir="rtl">
    يتم استخدام عنصر التفاصيل لعرض محتوى إضافي يمكن إظهاره أو إخفاؤه حسب الحاجة، مع دعم كامل للغات من اليمين إلى اليسار.
</pc-details>

Code

Edit

Group details

Details are designed to function independently, but you can simulate a group or “accordion” where only one is shown at a time by listening for the pc-show event.

<div class="details-group pc-stack">
    <pc-details summary="First" open>
        Only one details element in this group can be open at a time. Opening another will automatically close the others.
    </pc-details>

    <pc-details summary="Second">
        This behaviour is implemented by listening to the <code>pc-show</code> event and updating the open state programmatically.
    </pc-details>

    <pc-details summary="Third">
        Grouping details like this is useful for FAQs, settings panels or step‐by‐step explanations.
    </pc-details>
</div>

<script>
    const container = document.querySelector(".details-group");

    container.addEventListener("pc-show", (event) => {
        if (event.target.localName === "pc-details") {
            [...container.querySelectorAll("pc-details")].map((details) => {
                details.open = event.target === details;
            });
        }
    });
</script>

Code

Edit

Eigenschaften

Name	Beschreibung	Standard
`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()` or `hide()` methods and this attribute will reflect the details’ open state. Typ: `boolean`	`false`
`summary`	The summary to show in the header. If you need to display HTML, use the `summary` slot instead. Typ: `string \| undefined`	‐
`variant`	The details’ variant. Typ: `"filled" \| "outlined" \| "plain"`	`"outlined"`
`disabled`	Disables the details so it can’t be toggled. Typ: `boolean`	`false`
`updateComplete`	Ein schreibgeschütztes Promise, das erfüllt ist, sobald die Komponente fertig aktualisiert wurde.	‐

Erfahre mehr über Attribute und Eigenschaften.

Slots

Name	Beschreibung
(Standard)	The details’ main content.
`summary`	The details’ summary. Alternatively, you can use the `summary` attribute.
`expand-icon`	An optional expand icon to use instead of the default. Works best with `<pc-icon>`.
`collapse-icon`	An optional collapse icon to use instead of the default. Works best with `<pc-icon>`.

Erfahre mehr über die Benutzung von Slots.

Methoden

Name	Beschreibung	Argumente
`show()`	Shows the details.	‐
`hide()`	Hides the details.	‐

Erfahre mehr über Methoden.

Events

Name	Beschreibung	Event‐Detail
`pc-show`	Emitted when the details opens.	‐
`pc-after-show`	Emitted after the details opens and all animations are complete.	‐
`pc-hide`	Emitted when the details closes.	‐
`pc-after-hide`	Emitted after the details closes and all animations are complete.	‐

Erfahre mehr über Events.

Parts

Name	Beschreibung
`base`	The component’s base wrapper.
`header`	The header that wraps both the summary and the expand/collapse icon.
`summary`	The container that wraps the summary.
`summary-icon`	The container that wraps the expand/collapse icons.
`body`	The container of the details’ content.
`content`	The details’ content.

Erfahre mehr über das Anpassen von CSS‐Parts.

Animationen

Name	Beschreibung
`details.show`	The animation to use when showing details. You can use both `height: auto` and `block-size: auto` with this animation.
`details.hide`	The animation to use when hiding details. You can use `height: auto` and `block-size: auto` with this animation.

Erfahre mehr über das Anpassen von Animationen.

Importieren

Wenn du den Autoloader oder den Standard‐Loader nutzt, kannst du diesen Abschnitt überspringen. Falls du „Cherry Picking“ betreibst, kannst du die folgenden Snippets verwenden, um diese Komponente zu importieren.

CDN (Skript‐Tag)

CDN (Import)

npm (Import)

Um diese Komponente manuell vom CDN zu importieren, kannst du dieses Code‐Snippet kopieren und es in dein HTML einfügen.

  <script type="module" src="https://cdn.jsdelivr.net/npm/placer-toolkit@1.0.0-alpha.3/cdn/components/details/details.js"></script> 

Um diese Komponente manuell vom CDN zu importieren, kannst du dieses Code‐Snippet kopieren und es in deine JavaScript‐Datei einfügen.

  import "https://cdn.jsdelivr.net/npm/placer-toolkit@1.0.0-alpha.3/cdn/components/details/details.js"; 

Um diese Komponente manuell von npm zu importieren, kannst du dieses Code‐Snippet kopieren und es in deine JavaScript‐Datei einfügen.

import "placer-toolkit/dist/components/details/details.js";

Abhängigkeiten

Diese Komponente importiert automatisch folgende Komponenten:

Icon