Composants HowTo
"Guide : Composants" est un ensemble de composants Web qui implémentent des modèles d'UI courants. Ces implémentations sont destinées à servir de ressources pédagogiques. Vous pouvez lire l'implémentation des différents composants avec de nombreux commentaires et en tirer des enseignements. Notez qu'il ne s'agit PAS d'une bibliothèque d'UI et qu'elles ne doivent PAS être utilisées en production.
Composants
<howto-checkbox>
: représente une option booléenne dans un formulaire. Le type de case à cocher le plus courant est un type dual qui permet à l'utilisateur de basculer entre deux choix : coché et non coché.<howto-tabs>
: limite le contenu visible en le divisant en plusieurs panneaux.<howto-tooltip>
: fenêtre pop-up qui affiche des informations sur un élément lorsque celui-ci reçoit le focus du clavier ou que la souris le survole.
Objectifs
Notre objectif est de vous montrer les bonnes pratiques à suivre pour écrire des composants robustes, accessibles, performants, faciles à gérer et faciles à styliser. Chaque composant est entièrement autonome et peut servir d'implémentation de référence.
Accessibilité
Les composants suivent de près les bonnes pratiques d'écriture WAI-ARIA, qui sont un guide expliquant et illustrant ARIA, la norme pour les applications Web enrichies accessibles. Si vous ne connaissez pas ARIA, consultez notre présentation sur WebFundamentals. Chaque composant renvoie à la section correspondante des bonnes pratiques d'écriture. Bien que cela ne soit pas strictement nécessaire, nous vous recommandons de lire la section sur les bonnes pratiques d'écriture avant de vous attaquer au code.
Performances
En développement Web, le terme "performances" peut s'appliquer à une multitude de choses. Dans le contexte de <howto>
, les performances font principalement référence aux animations exécutées de manière cohérente à 60 FPS, même sur les appareils mobiles.
Flexibilité visuelle
Dans la mesure du possible, les composants ne sont pas stylisés, sauf pour la mise en page ou pour indiquer un état sélectionné ou actif. Cela permet de garder l'implémentation visuellement flexible et ciblée. En ne consacrant pas de temps à la décoration, nous limitons le code à ce qui est absolument nécessaire pour que le composant fonctionne. Si un style est requis pour que le composant fonctionne, il est marqué d'un commentaire expliquant pourquoi.
Code maintenable
Comme la section "Comment faire : Composants" est une implémentation de référence, nous avons passé du temps supplémentaire à écrire un code lisible et facile à comprendre, avec de nombreux commentaires.
Non-objectifs
Être une bibliothèque / un framework / un kit d'outils
Les composants <howto>
ne sont pas publiés sur npm, bower ou toute autre plate-forme, car ils ne sont pas destinés à être utilisés en production. Pour obtenir un code concis et lisible, nous utilisons des API JavaScript modernes et sommes compatibles avec les navigateurs modernes qui implémentent les normes Web Components. Vous pourrez adapter le code à vos propres besoins après avoir lu ces implémentations.
être rétrocompatible ;
Le code ne doit pas être utilisé directement. Nous pouvons, et devrons très probablement, modifier radicalement l'implémentation et l'API de n'importe quel élément si une implémentation meilleure est découverte. Il s'agit d'une ressource vivante dans laquelle nous pouvons partager, explorer et discuter des bonnes pratiques pour créer des UI Web.
être complète ;
Nous n'implémentons actuellement pas (et ne le ferons probablement pas) *tous les composants que l'on peut trouver dans les pratiques d'écriture WAI ARIA. Toutefois, la réutilisation des principes utilisés dans d'autres composants <howto>
devrait permettre aux lecteurs d'implémenter les composants manquants.