Repliable

Un repliable est un unique <details> — l’élément dont un accordéon est fait, sans aucun de ses ornements. Prenez-le pour un détail facultatif au milieu d’une page ; prenez accordion() quand il y en a toute une série.

Il ne demande aucun script, et comme le contenu reste dans le document, il se trouve avec la recherche dans la page du navigateur comme avec un moteur de recherche.

Repliable de base

Voir la config générée

Tout ce que sitelo écrit quand vous lancez le build sans fichier de config à vous.

collapsible({ trigger: 'Voir la config générée' },
  text({ variant: 'small' }, 'Tout ce que sitelo écrit quand vous lancez le build sans fichier de config à vous.'),
)

Ouvert par défaut

Pourquoi ça existe

Parce qu’une page qui cache son explication derrière un clic est une page que personne ne lit.

collapsible({ trigger: 'Pourquoi ça existe', open: true },
  text({ variant: 'small' }, 'Parce qu’une page qui cache son explication derrière un clic est une page que personne ne lit.'),
)

Contenu riche

Voir la sortie complète
dist/index.htmldist/404.htmldist/sitemap.xml
collapsible({ trigger: 'Voir la sortie complète' },
  stack({ gap: 'sm' },
    code('dist/index.html'),
    code('dist/404.html'),
    code('dist/sitemap.xml'),
  ),
)

À l’intérieur d’autres choses

Un repliable se loge sans peine dans une carte, une alerte ou une cellule de tableau.

Build échoué

2 liens cassés

Voir les liens fautifs
  • /docs/old-routing
    lié depuis /docs
  • /blog/draft
    lié depuis /blog
stack({ gap: 'md' },
  card(
    cardHeader({ title: 'Build échoué', subtitle: '2 liens cassés' }),
    cardBody(
      collapsible({ trigger: 'Voir les liens fautifs' },
        list({ plain: true },
          listItem({ title: '/docs/old-routing', description: 'lié depuis /docs' }),
          listItem({ title: '/blog/draft', description: 'lié depuis /blog' }),
        ),
      ),
    ),
  ),
  alert({ color: 'warning', title: 'Page lente' },
    stack({ gap: 'sm' },
      text({ variant: 'small' }, 'Une page a mis plus de 500 ms à se rendre.'),
      collapsible({ trigger: 'Voir les temps' },
        text({ variant: 'small' }, '/examples/wordpress — 512 ms'),
      ),
    ),
  ),
)

Le déclencheur

Tenez-vous-en au texte et aux icônes. Un <summary> est déjà interactif : un bouton ou un lien à l’intérieur imbrique deux contrôles là où il n’y a qu’une action — la même règle que suit menu().

Repliable ou accordéon ?

Une seule révélation isolée : collapsible(). Toute une série, encadrée et regroupée, éventuellement avec une seule ouverte à la fois : accordion().

Props

PropTypeDéfautDescription
triggerChild—Le contenu du résumé. Texte et icônes uniquement.
openbooleanfalseS’il démarre déplié.