HowTo-Komponenten
„HowTo: Components“ ist eine Sammlung von Webkomponenten, die gängige UI-Muster implementieren. Diese Implementierungen dienen als Lernressource. Sie können sich die ausführlich kommentierte Implementierung verschiedener Komponenten ansehen und hoffentlich daraus lernen. Sie sind ausdrücklich KEINE UI-Bibliothek und sollten NICHT in der Produktion verwendet werden.
Komponenten
<howto-checkbox>: Stellt eine boolesche Option in einem Formular dar. Der häufigste Typ von Checkbox ist ein Dual-Typ, mit dem der Nutzer zwischen zwei Optionen wechseln kann: aktiviert und deaktiviert.<howto-tabs>: Beschränkt sichtbare Inhalte, indem sie in mehrere Bereiche unterteilt werden.<howto-tooltip>: Ein Pop-up-Fenster, 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 zugänglich, leistungsfähig, wartungsfreundlich und einfach zu gestalten sind. Jede Komponente ist in sich abgeschlossen und kann als Referenzimplementierung dienen.
Bedienungshilfen
Die Komponenten folgen weitgehend den WAI ARIA Authoring Practices, einer Anleitung zur Erläuterung und Darstellung von ARIA, dem Accessible Rich Internet Application-Standard. Wenn Sie mit ARIA nicht vertraut sind, finden Sie hier eine Einführung. Jede Komponente ist mit dem entsprechenden Abschnitt der Richtlinien für die Erstellung von Inhalten verknüpft. Es ist zwar nicht unbedingt erforderlich, aber wir empfehlen, den Abschnitt zu den Best Practices für die Erstellung zu lesen, bevor Sie sich mit dem Code beschäftigen.
Leistung
In der Webentwicklung kann der Begriff „Leistung“ auf eine Vielzahl von Dingen angewendet werden. 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 anzugeben. So bleibt die Implementierung visuell flexibel und fokussiert. Da wir keine Zeit für die Dekoration aufwenden, beschränken wir den Code auf das, was unbedingt erforderlich ist, damit die Komponente funktioniert. Wenn für die Funktion der Komponente ein Stil erforderlich ist, wird der Stil mit einem Kommentar versehen, in dem erklärt wird, warum.
Wartbarer 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.
Nicht-Ziele
Bibliothek, Framework oder Toolkit sein
<howto>-Komponenten werden nicht auf npm, bower oder einer anderen Plattform veröffentlicht, da sie nicht für die Produktion vorgesehen sind. Um einen prägnanten, lesbaren Code zu erhalten, verwenden wir moderne JavaScript-APIs und unterstützen moderne Browser, die die Web Components-Standards implementieren. Nachdem Sie sich diese Implementierungen angesehen haben, können Sie den Code an Ihre eigenen Anforderungen anpassen.
Abwärtskompatibel sein
Der Code sollte nicht direkt verwendet werden. Wir können und werden die Implementierung und API eines Elements sehr wahrscheinlich drastisch ändern, wenn eine bessere Implementierung gefunden wird. Hier können wir Best Practices für die Entwicklung von Web-UIs teilen, untersuchen und diskutieren.
Vollständig sein
Derzeit implementieren wir nicht *alle *Komponenten, die in den WAI ARIA Authoring Practices zu finden sind, und das wird wahrscheinlich auch so bleiben. Wenn Sie jedoch die in anderen <howto>-Komponenten verwendeten Prinzipien wiederverwenden, sollten Leser in der Lage sein, fehlende Komponenten zu implementieren.