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">
    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.
</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)">
        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.
    </pc-details>
    <pc-details variant="filled outlined" summary="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.
    </pc-details>
    <pc-details variant="filled" summary="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.
    </pc-details>
    <pc-details variant="plain" summary="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.
    </pc-details>
</div>

Code

Edit

Disabled#

Use the disabled attribute to prevent the details from expanding.

<pc-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.
</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>

    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.
</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>

    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.
</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>
        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.
    </pc-details>

    <pc-details summary="Second">
        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.
    </pc-details>

    <pc-details summary="Third">
        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.
    </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
(default)	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.
`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, kopiere dieses Code‐Snippet und füge es in dein HTML ein.

  <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, kopiere dieses Code‐Snippet und füge es in deine JavaScript‐Datei ein.

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

Um diese Komponente manuell via npm zu importieren, kopiere dieses Code‐Snippet und füge es in deine JavaScript‐Datei ein.

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

Abhängigkeiten#

Diese Komponente importiert automatisch folgende Komponenten:

Icon