Skip to content
Getting StartedComponentsStylesClamp Codeberg

Details

Composant Details (sh-details)

Le composant sh-details encapsule un unique élément HTML <details> dans le shadow DOM, avec des slots pour le résumé et le contenu, une icône dans le <summary>, et un groupement optionnel par attribut name (accordéon entre plusieurs instances).

Usage

<sh-details> <span slot="summary">Titre</span> <div slot="content">Contenu repliable.</div> </sh-details>

Attributs et propriétés

  • open (booléen) : ouvre le panneau lorsqu’il est présent. Réactif après chargement (attribut ou propriété element.open).
  • name (chaîne) : nom de groupe. Plusieurs sh-details avec le même name se comportent comme un accordéon : une seule instance ouverte à la fois (fermeture des autres à l’ouverture). La portée est le document entier.
  • icon-position (optionnel) : start ou end (défaut : end, y compris pour toute valeur invalide). Propriété element.iconPosition.

Slots

  • summary : contenu du résumé. Contenu de phrasé uniquement. Un <summary> porte un role="button" implicite, et la règle ARIA Children Presentational: True retire ses descendants interactifs de l’arbre d’accessibilité : un lien ou un contrôle imbriqué y est inatteignable pour les technologies d’assistance. Placez le contenu interactif dans content.
  • content : contenu repliable.
  • icon : icône optionnelle dans le summary. Si absent, un sh-icon par défaut est affiché.

Événement toggle

Comme <details>, le host émet un événement toggle avec bubbles: false, composed: false et cancelable: false — il ne franchit pas la frontière du shadow DOM, écoutez-le directement sur l’élément. C’est une ToggleEvent avec oldState / newState lorsque le navigateur la supporte, sinon un CustomEvent portant la même charge dans detail.

el.addEventListener("toggle", (e) => { console.log(e.newState ?? e.detail.newState); // "open" | "closed" });

Styling avec ::part

  • details : l’élément <details> racine.
  • summary : l’élément <summary>.
  • content : le <div> qui enveloppe le slot content.
  • icon : le <span> qui enveloppe le slot icon.
  • icon-svg : le SVG interne du sh-icon par défaut, ré-exporté.
sh-details::part(details) { border-radius: 4px; }

Exemples

Ouvert par défaut

<sh-details open> <span slot="summary">Déjà ouvert</span> <div slot="content">Texte visible au chargement.</div> </sh-details>

Accordéon (plusieurs composants)

<sh-details name="faq"> <span slot="summary">Question 1</span> <div slot="content">Réponse 1</div> </sh-details> <sh-details name="faq"> <span slot="summary">Question 2</span> <div slot="content">Réponse 2</div> </sh-details>

JavaScript

import "@shachi-ui/components/details"; const el = document.createElement("sh-details"); el.innerHTML = ` <span slot="summary">Résumé</span> <div slot="content">Corps</div> `; document.body.appendChild(el); el.open = true; el.name = "section-a";

CSS custom properties

Le thème brutal définit --sh-details-border-color sur sh-details (voir le package styles). Vous pouvez la surcharger pour personnaliser l’apparence.

sh-details { --sh-details-border-color: #e1e5e9; }