Composants

Ces composants s'emploient dans n'importe quelle page .mdx sans import.

Ils apportent la structure — enveloppes, séparateurs, espacements. L'apparence se règle avec className.

Avec le thème Tailwind, un className porte des utilitaires, compilés depuis ceux qu'emploient vos pages :

<Card className="max-w-sm">
  <CardHeader className="text-center font-bold">Titre</CardHeader>
</Card>

Les classes des composants vivent dans la couche components, sous les utilitaires : un className posé à l'emploi l'emporte toujours.

Chaque exemple est montré dans les termes du thème du site, par ForTheme : changer theme.framework dans la configuration change aussi les exemples.

Disponibles

Card

Une carte structurée, avec en-tête, corps, pied et image.

Columns

Une grille de colonnes, égales ou en douzièmes.

TimeTimer

Afficher un contenu pendant une période, avec des replis avant et après.

Tooltip

Une infobulle au survol et au clavier, sans JavaScript.

Tree

Une arborescence repliable, bâtie sur des éléments natifs.

ScrollToTop

Retour en haut de page, posé par la coquille ou à la main.

Skill

Une jauge de niveau, remplie en CSS.

LogoIcon

Une icône SVG posée dans la page à la génération.

ForTheme

Du contenu réservé à un seul thème.

Cards

Des grilles de cartes cliquables, construites depuis les pages de la version.

Un menu de liens posé n'importe où dans une page, replié derrière un bouton sur écran étroit.

Admonition

Un bloc mis à part du texte, qui dit comment le lire — et les types qu'un projet ajoute.

Sans JavaScript

Aucun composant ne charge de script. Tout ce qui demande une interaction passe donc par des éléments natifs ou par le CSS : details pour déplier, un lien pour se déplacer, animation-timeline pour apparaître au défilement.

Quand le navigateur ne connaît pas encore l'une de ces propriétés, le composant reste utilisable dans son état le plus simple — visible, plein, déplié. Aucun n'attend une capacité pour fonctionner.