Une spécification pour les composants d'interface utilisateur fonctionnels
https://standard-components.com
Les bibliothèques de composants d'interface utilisateur se présentent sous toutes les formes et tailles. Cette spécification est destinée à standardiser les conventions de dénomination et les API accessoires afin de créer un écosystème de composants d'interface utilisateur interchangeables et d'encourager une plus grande réutilisabilité du code.
Afin de créer des bibliothèques de composants d'interface utilisateur interchangeables, la convention de dénomination suivante doit être utilisée. Cette liste est intentionnellement limitée et est censée être un point de départ pour la démonstration. Plus de composants seront probablement ajoutés au fil du temps.
Le composant de la boîte est un composant de disposition de modèle de boîte primitif qui gère la marge, le rembourrage, la largeur et d'autres styles de disposition.
Le composant Flex est une extension du composant Box avec des propriétés spécifiques à Flexbox.
Le composant texte est un composant typographique primitif qui gère la taille de la police, le poids, la hauteur de ligne, l'alignement et d'autres styles typographiques.
Le composant d'en-tête est une extension du composant texte destiné aux titres.
Le composant d'image est un composant de contenu qui affiche des images.
Le fond de fond est une extension du composant de la boîte avec des accessoires pour afficher des images d'arrière-plan.
Le composant du bouton est un composant interactif avec des styles qui ressemblent à un bouton.
Le composant de liaison est un composant interactif destiné à la navigation.
Les accessoires de style sont une abstraction de niveau supérieur en plus du CSS destiné à la flexibilité et à répondre aux préoccupations de style par instance. Les accessoires de style sont largement basés sur les propriétés CSS, avec des accessoires raccourcis pour la marge et le rembourrage.
Certains composants, tels que les boutons, utilisent des variantes de style pour rendre différentes versions, telles que les styles de boutons primary et secondary . Les variantes doivent être manipulées avec un accessoire variant , avec des accessoires booléens coiffants pour les variantes primary et secondary .
Voir les accessoires pour en savoir plus.
Les thèmes sont des objets qui définissent les valeurs utilisées par les accessoires de style. Les thèmes garantissent une marge, un rembourrage, des couleurs, des tailles de police et d'autres constantes d'interface utilisateur.
Voir les thèmes pour en savoir plus.
En adhérant à une structure de type composante stricte, les composants d'un système peuvent se soucier d'un objectif singulier et permettre une plus grande interchangeabilité entre les bibliothèques.
Composants de disposition Largeur de contrôle, hauteur et espacement. Ils n'essaient pas de contrôler la typographie ou d'autres considérations.
Les composants typographiques se préoccupent des familles de polices, des tailles, des poids, des dirigeants, du suivi et d'autres propriétés. Les composants typographiques ne sont pas concernés par la mise en page.
Les composants de contenu affichent des choses comme les images, les vidéos et les diagrammes sans affecter la mise en page, la typographie ou d'autres problèmes de style.
Les éléments interactifs, tels que les liens, les boutons et les éléments de formulaire, nécessitent une entrée utilisateur et ne gèrent généralement pas la mise en page ou les préoccupations typographiques.
Les composants de style gèrent d'autres styles d'interface utilisateur, tels que les bordures, les rayons, les ombres et les gradients sans affecter la disposition ou la typographie.
Les composants de position retirent leurs enfants du flux de document normal et doivent être utilisés avec parcimonie.
Fabriqué par le compositeur | Github | Licence MIT