Composants HowTo – Présentation

Composants HowTo

"HowTo: Composants" sont un ensemble de composants Web qui implémentent des éléments d'interface utilisateur courants modèles de ML. L'objectif de ces implémentations est de fournir des ressources pédagogiques. Vous pouvez parcourir l'implémentation de différentes fonctionnalités et en tirer des leçons. Notez qu'ils ne sont PAS explicites une bibliothèque d'UI et ne doit PAS être utilisée en production.

  • <howto-checkbox>: représente une option booléenne dans un formulaire. Le type le plus courant est une double option qui permet à l'utilisateur de basculer entre deux options (cochée et décochée).
  • <howto-tabs>: limite le contenu visible en le séparant en plusieurs panneaux.
  • <howto-tooltip>: 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 démontrer les bonnes pratiques pour rédiger des composants robustes accessibles, performantes, faciles à gérer et à adapter au style. Chaque composant est entièrement autonomes afin de servir de mise en œuvre de référence.

Accessibilité

Les composants respectent de près le guide de création ARIA de pratiques, qui vous guide expliquer et présenter ARIA, l'application Internet enrichie accessible standard. Si vous n'êtes pas familier avec ARIA, consultez notre présentation WebFundamentals Chaque composant renvoie vers la section correspondante des pratiques de création. Alors que mais pas strictement nécessaires, nous vous recommandons de lire la section les bonnes pratiques avant de plonger dans le code.

Performances

Dans le contexte du développement Web, le terme "performance" peut s'appliquer à une multitude les choses. Dans le contexte de <howto>, les performances font principalement référence aux animations s'exécutant en permanence à 60 ips, 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 sélectionné ou actif. Cela permet de garder la flexibilité visuelle de l'implémentation et concentré. Comme nous ne perdons 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, le style est signalé par un commentaire en expliquant pourquoi.

Code facile à gérer

Guide pratique: les composants sont une référence nous avons passé plus de temps à écrire des documents lisibles et faciles un code compréhensible et densément commenté.

Non-objectifs

Être une bibliothèque / un framework / une boîte à outils

Les composants <howto> ne sont pas publiés sur npm, Bower ni aucune autre plate-forme car ils ne sont pas destinés à être utilisés en production. Par souci de concision, du code lisible, nous utilisons des API JavaScript modernes et nous prenons en charge les qui implémentent les normes de composants Web. Toi vous serez en mesure d'adapter le code à vos propres besoins après avoir lu ces mises en œuvre.

Être rétrocompatible

Vous ne devez pas vous appuyer directement sur le code. Nous pourrions, et très probablement, nous le ferons, modifier radicalement l'implémentation et l'API de n'importe quel élément mise en œuvre est découverte. C'est une ressource vivante où nous pouvons partager, explorer et discuter des bonnes pratiques pour créer des interfaces utilisateur Web.

Être complet

À l'heure actuelle, nous n'implémentons pas (et nous ne prévoyons probablement pas) *tous *les composants pouvant être figurant dans le document WAI ARIA Authoring Practices (Pratiques de création ARIA WAI). Toutefois, si vous réutilisez les principes utilisés dans d'autres composants <howto> doivent permettre aux lecteurs d'implémenter n'importe quel composant qui manquent.