"HowTo: Components" 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 abondamment commentée des différents composants et, nous l'espérons, en tirer des enseignements. Notez qu'il ne s'agit PAS d'une bibliothèque d'UI et qu'ils ne doivent PAS être utilisés en production.
Composants
<howto-checkbox>: représente une option booléenne dans un formulaire. Le type de case à cocher le plus courant est le type double, qui permet à l'utilisateur de basculer entre deux choix : coché et décoché.<howto-tabs>: limite le contenu visible en le séparant en plusieurs panneaux.<howto-tooltip>: pop-up qui affiche des informations liées à un élément lorsque celui-ci reçoit le focus clavier ou que la souris passe dessus.
Objectifs
Notre objectif est de présenter les bonnes pratiques pour écrire des composants robustes, accessibles, performants, faciles à gérer et à styliser. Chaque composant est entièrement autonome et peut donc servir d'implémentation de référence.
Accessibilité
Les composants suivent de près les pratiques de création WAI ARIA, un guide qui explique et présente ARIA, la norme Accessible Rich Internet Application. Si vous ne connaissez pas ARIA, consultez notre introduction sur WebFundamentals. Chaque composant renvoie à la section correspondante des pratiques de création. Bien que cela ne soit pas strictement nécessaire, nous vous recommandons de lire la section sur les pratiques de création avant de vous plonger dans le code.
Performances
Dans le 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 qui s'exécutent 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 maintenir l'implémentation visuellement flexible et ciblée. En ne passant pas de temps sur la décoration, nous limitons le code à ce qui est absolument nécessaire pour faire fonctionner le composant. Si un style est requis pour que le composant fonctionne, il sera marqué d'un commentaire expliquant pourquoi.
Code gérable
Comme HowTo: Components est une implémentation de référence, nous avons passé plus de temps à écrire un code lisible et facilement compréhensible, qui est abondamment commenté.
Non-objectifs
Être une bibliothèque, un framework ou 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 que le code soit concis et lisible, nous utilisons des API JavaScript modernes et nous prenons en charge les navigateurs récents qui implémentent les normes des composants Web. 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 pourrions, et il est très probable que nous le fassions, modifier radicalement l'implémentation et l'API de n'importe quel élément si une meilleure implémentation est découverte. Il s'agit d'une ressource évolutive qui nous permet de partager, d'explorer et de discuter des bonnes pratiques pour créer des interfaces utilisateur Web.
Être complet
Nous n'implémentons pas (et n'implémenterons probablement pas) *tous *les composants que l'on peut trouver dans les pratiques de création 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.