Komponenten für Anleitungen
„Anleitung: Komponenten“ 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 der verschiedenen Komponenten durchlesen und hoffentlich etwas daraus lernen. Beachten Sie, dass es sich hierbei ausdrücklich NICHT um eine UI-Bibliothek handelt und sie NICHT in der Produktion verwendet werden sollte.
Komponenten
<howto-checkbox>: Stellt eine boolesche Option in einem Formular dar. Die gängigste Art von Kästchen ist ein Doppelkästchen, mit dem Nutzer zwischen zwei Optionen wechseln können: angeklickt und nicht angeklickt.<howto-tabs>: Begrenzt die sichtbaren Inhalte, indem sie in mehrere Bereiche unterteilt werden.<howto-tooltip>: Ein Pop-up, das Informationen zu einem Element enthält, wenn das Element den Tastaturfokus erhält oder die Maus darauf bewegt wird.
Ziele
Unser Ziel ist es, Best Practices für die Erstellung robuster Komponenten zu demonstrieren, die barrierefrei, leistungsfähig, wartbar und einfach zu stylen sind. Jede Komponente ist vollständig in sich geschlossen und kann als Referenzimplementierung dienen.
Bedienungshilfen
Die Komponenten folgen genau den WAI ARIA Authoring Practices, einem Leitfaden, der ARIA, den Accessible Rich Internet Application-Standard, erklärt und zeigt. Wenn Sie mit ARIA nicht vertraut sind, lesen Sie unsere Einführung in WebFundamentals. Jede Komponente ist mit dem entsprechenden Abschnitt der Richtlinien für die Erstellung verknüpft. Es ist zwar nicht unbedingt erforderlich, aber wir empfehlen Ihnen, den Abschnitt zu den Best Practices für die Erstellung zu lesen, bevor Sie sich mit dem Code befassen.
Leistung
In der Webentwicklung kann der Begriff „Leistung“ auf viele verschiedene Dinge angewendet werden. Im Kontext von <howto> bezieht sich die Leistung hauptsächlich auf Animationen, die auch auf Mobilgeräten konstant mit 60 fps laufen.
Visuelle Flexibilität
Komponenten werden nach Möglichkeit nicht formatiert, es sei denn, es geht um das Layout oder um den Hinweis auf einen ausgewählten oder aktiven Status. 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 Funktion der Komponente unbedingt erforderlich ist. Wenn ein Stil für die Funktion der Komponente erforderlich ist, wird er mit einem Kommentar versehen, in dem der Grund dafür erläutert wird.
Wartbarer Code
Da „Anleitung: Komponenten“ eine Referenzimplementierung ist, haben wir uns die Zeit genommen, lesbaren und leicht verständlichen Code zu schreiben, der ausführlich kommentiert ist.
Nicht als Zielvorhaben gekennzeichnete Daten
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 gedacht sind. Für prägnanten, lesbaren Code 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 drastisch ändern, wenn eine bessere Implementierung gefunden wird. Dies ist eine lebendige Ressource, in der wir Best Practices für die Erstellung von Web-UIs teilen, erkunden und diskutieren können.
Vollständig sein
Wir implementieren derzeit nicht (und werden es wahrscheinlich auch nicht) *alle *Komponenten, die in den WAI ARIA Authoring Practices zu finden sind. Durch die Wiederverwendung der in anderen <howto>-Komponenten verwendeten Prinzipien sollten Leser jedoch in der Lage sein, fehlende Komponenten zu implementieren.