Anleitungskomponenten
„HowTo: Components“ sind eine Sammlung von Webkomponenten, die gängige UI-Muster implementieren. Diese Implementierungen dienen als Informationsquelle. Sie können sich die dicht kommentierte Implementierung verschiedener Komponenten durchlesen und hoffentlich aus ihnen lernen. Beachten Sie, dass sie explizit KEINE UI-Bibliothek sind und NICHT in der Produktion verwendet werden sollten.
Komponenten
<howto-checkbox>: Steht für eine boolesche Option in einem Formular. Die gängigste Art von Kästchen ist ein zweifacher Typ, bei dem der Nutzer zwischen zwei Auswahlmöglichkeiten wechseln kann: aktiviert und deaktiviert.<howto-tabs>: Beschränkt die sichtbaren Inhalte, indem sie in mehrere Bereiche unterteilt werden.<howto-tooltip>: Ein Pop-up-Fenster, in dem Informationen zu einem Element angezeigt werden, wenn Tastaturfokus auf das Element gesetzt wird oder wenn der Mauszeiger darauf bewegt wird.
Ziele
Unser Ziel ist es, Best Practices für das Schreiben robuster Komponenten zu demonstrieren, die barrierefrei, leistungsfähig, gut zu warten und einfach zu gestalten sind. Jede Komponente ist vollständig unabhängig und kann als Referenzimplementierung dienen.
Barrierefreiheit
Die Komponenten halten sich genau an die WAI ARIA Authoring Practices. In diesem Leitfaden wird ARIA, der Accessible Rich Internet Application, erläutert. Wenn Sie mit ARIA nicht vertraut sind, lesen Sie unsere Einführung zu WebFundamentals. Jede Komponente ist mit dem relevanten Abschnitt der Erstellungsmethoden verknüpft. Obwohl es nicht unbedingt erforderlich ist, empfehlen wir, den Abschnitt der Erstellungsmethoden zu lesen, bevor Sie sich mit dem Code beschäftigen.
Leistung
In der Webentwicklung kann der Begriff „Leistung“ für eine Vielzahl von Dingen verwendet werden. Im Kontext von <howto> bezieht sich die Leistung hauptsächlich auf Animationen, die auch auf Mobilgeräten konsistent mit 60 fps ausgeführt werden.
Visuelle Flexibilität
Soweit möglich, werden Komponenten nicht mit Stilen versehen, außer im Layout oder zur Anzeige eines ausgewählten oder aktiven Zustands. 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 für die Funktionsfähigkeit der Komponente unbedingt erforderlich ist. Wenn ein Stil erforderlich ist, damit die Komponente funktioniert, wird dieser mit einem Kommentar gekennzeichnet, in dem die Gründe dafür erläutert werden.
Verwaltbarer Code
Da es sich bei „HowTo: Components“ um eine Referenzimplementierung handelt, haben wir zusätzliche Zeit damit verbracht, lesbaren und leicht verständlichen Code zu schreiben, der dicht kommentiert ist.
Keine Zielvorhaben
Es muss eine Bibliothek / ein Framework / ein Toolkit sein.
<howto>-Komponenten werden nicht auf npm, Bower oder einer anderen Plattform veröffentlicht, da sie nicht für die Produktion vorgesehen sind. Für kurzen, lesbaren Code verwenden wir moderne JavaScript APIs und unterstützen moderne Browser, die die Standards für Webkomponenten implementieren. Sie können den Code nach dem Lesen dieser Implementierungen an Ihre eigenen Anforderungen anpassen.
Abwärtskompatibel sein
Sie sollten sich nicht direkt auf den Code verlassen. Wenn eine bessere Implementierung erkannt wird, können wir die Implementierung und die API eines Elements drastisch ändern – und das werden höchstwahrscheinlich auch drastisch geändert. Dies ist eine lebendige Ressource, in der wir Best Practices für das Erstellen von Web-UIs teilen, erkunden und diskutieren können.
Vollständigkeit
Wir implementieren derzeit *alle *Komponenten, die in den WAI ARIA Authoring Practices aufgeführt sind, nicht (und werden das wahrscheinlich auch nicht). Wenn Sie die Prinzipien, die in anderen <howto>-Komponenten verwendet werden, wiederverwenden, sollten Leser jedoch alle fehlenden Komponenten implementieren können.