Design · 2 min
Composants
La poignée qui vaut d'être réutilisée, et pourquoi il n'y en a qu'une poignée.
Il n'y a pas de bibliothèque de composants ici. Il y a onze composants, et la plupart existent parce qu'ils portent un comportement, pas parce qu'ils portent des styles.
Les deux que vous réutiliserez
ui/Card est la forme du panneau : bordure sur une surface surélevée,
espacement cohérent, titre et chapeau facultatifs. Tout dans le tableau de bord
en est un.
<Card title="Facturation" lead="Vos achats et les clés qu'ils ont générées.">
<Receipts rows={orders} />
</Card>ui/Field est un champ étiqueté, avec son indication et son erreur au bon
endroit et le label réellement associé au contrôle, ce que tout le monde saute.
<Field label="Nom d'utilisateur GitHub" note="Les invitations vont à ce compte.">
<input name="github_login" />
</Field>Ceux qui portent un comportement
| Composant | Ce qu'il sait |
|---|---|
SignInForm | L'aller-retour du lien magique et ses trois états |
SignOutButton | Rafraîchir avant de pousser, pour que le serveur voie le cookie effacé |
LocaleSwitcher | Écrit le cookie que le serveur lira au rendu suivant |
CopyField | Le presse-papiers, plus la confirmation que le clic est censé donner |
Logo, Icons | Du SVG au trait, dimensionné en em pour suivre le texte |
Pourquoi pas davantage
Une base de code qui livre deux cents composants livre deux cents opinions que vous devrez contredire. Ceux qui sont ici sont ceux qui seraient sinon copiés-collés avec un bug dans la troisième copie.
Quand vous aurez besoin d'une vraie primitive, une boîte de dialogue avec piège de focus, une combobox, un sélecteur de date, installez Radix ou Base UI et habillez-les avec vos tokens. N'écrivez pas votre propre dialogue. La gestion accessible du focus est réellement difficile et entièrement résolue.
En ajouter un
Composant serveur par défaut. Ajoutez "use client" seulement s'il vous faut de
l'état, un effet ou un gestionnaire d'événement, et poussez-le aussi bas que
possible dans l'arbre : un composant client rend client tout ce qu'il contient.
Une erreur ou un manque sur cette page ? Dites-le-nous.