„HowTo: Components“ ist eine Sammlung von Webkomponenten, die gängige UI-Muster implementieren. Diese Implementierungen dienen als Lernressource. Sie können die ausführlich kommentierte Implementierung verschiedener Komponenten durchlesen und hoffentlich daraus lernen. Beachten Sie, dass es sich ausdrücklich NICHT um eine UI-Bibliothek handelt und sie NICHT in der Produktion verwendet werden sollten.
Komponenten
<howto-checkbox>: Stellt eine boolesche Option in einem Formular dar. Der gängigste Typ von Kontrollkästchen ist ein dualer Typ, mit dem Nutzende zwischen zwei Optionen wechseln können: aktiviert und deaktiviert.<howto-tabs>: Schränkt sichtbare Inhalte ein, indem sie in mehrere Bereiche aufgeteilt werden.<howto-tooltip>: Ein Pop-up, in dem Informationen zu einem Element angezeigt werden, wenn das Element den Tastaturfokus erhält oder der Mauszeiger darauf bewegt wird.
Ziele
Unser Ziel ist es, Best Practices für das Schreiben robuster Komponenten zu demonstrieren, die barrierefrei, leistungsstark, wartbar und einfach zu gestalten sind. Jede Komponente ist vollständig eigenständig, sodass sie als Referenzimplementierung dienen kann.
Bedienungshilfen
Die Komponenten orientieren sich eng an den WAI ARIA Authoring Practices, einem Leitfaden, in dem ARIA, der Accessible Rich Internet Application-Standard, erklärt und veranschaulicht wird. Wenn Sie mit ARIA nicht vertraut sind, lesen Sie unsere Einführung in WebFundamentals. Jede Komponente ist mit dem entsprechenden Abschnitt der Authoring Practices verknüpft. Es ist zwar nicht unbedingt erforderlich, aber wir empfehlen, den Abschnitt zu den Erstellungspraktiken zu lesen, bevor Sie sich mit dem Code befassen.
Leistung
In der Webentwicklung kann sich der Begriff „Leistung“ auf eine Vielzahl von Dingen beziehen. Im Kontext von <howto> bezieht sich die Leistung hauptsächlich auf Animationen, die auch auf Mobilgeräten konstant mit 60 fps ausgeführt werden.
Visuelle Flexibilität
Komponenten werden so weit wie möglich nicht formatiert, außer für das Layout oder um einen ausgewählten oder aktiven Status anzuzeigen. So bleibt die Implementierung visuell flexibel und fokussiert. Indem wir keine Zeit mit Dekorationen verbringen, beschränken wir den Code auf das, was für die Funktion der Komponente unbedingt erforderlich ist. Wenn ein Stil für die Funktion der Komponente erforderlich ist, wird er mit einem Kommentar gekennzeichnet, in dem die Gründe dafür erläutert werden.
Verwaltbarer Code
Da HowTo: Components eine Referenzimplementierung ist, haben wir uns besonders viel Zeit genommen, um lesbaren und leicht verständlichen Code zu schreiben, der ausführlich kommentiert ist.
Nichtziele
Bibliothek/Framework/Toolkit sein
<howto>-Komponenten werden nicht auf npm, bower oder einer anderen Plattform veröffentlicht, da sie nicht für die Verwendung in der Produktion vorgesehen sind. Um den Code kurz und lesbar zu halten, verwenden wir moderne JavaScript APIs und unterstützen moderne Browser, die die Webkomponentenstandards implementieren. Nachdem Sie diese Implementierungen gelesen haben, können Sie den Code an Ihre eigenen Anforderungen anpassen.
Abwärtskompatibel sein
Der Code sollte nicht direkt verwendet werden. Wir werden die Implementierung und API eines Elements wahrscheinlich drastisch ändern, wenn wir eine bessere Implementierung finden. Dies ist eine dynamische Ressource, in der wir Best Practices für die Erstellung von Web-UIs teilen, erkunden und diskutieren können.
Vollständig sein
Wir implementieren nicht *alle *Komponenten, die in den WAI ARIA Authoring Practices zu finden sind, und werden dies wahrscheinlich auch in Zukunft nicht tun. Wenn Sie jedoch die Prinzipien anderer <howto>-Komponenten wiederverwenden, sollten Sie in der Lage sein, alle fehlenden Komponenten zu implementieren.