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.

Snippet

Un bloc de code qui désigne un vrai fichier de votre projet, lu à la génération de la page, pour que l'exemple ne puisse pas se périmer.

Hero

Le bandeau en tête de page — un nom, une phrase, et par où commencer.

Calendar

Un mois de dates et ce qui s'y passe — construit à la génération, navigable une fois le script de la page chargé.

Sans JavaScript

Aucun composant ne charge de script, sauf un : Calendar, dont les flèches entre les mois viennent du fichier client de la version — et seulement sur les pages qui contiennent un calendrier. Tout le reste de ce qui demande une interaction passe 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.

Le site, lui, peut ajouter un comportement à une page — copyCode pose un bouton de copie sur chaque bloc de code — mais c'est un champ que vous activez, il arrive dans un fichier partagé par la version, et seules les pages qui l'emploient le chargent.

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.