HowTo-Komponenten
„HowTo: Components“ sind eine Sammlung von Webkomponenten, die allgemeine UI-Elemente Muster zu erkennen. Diese Implementierungen sind als Bildungsressource gedacht. Sie können sich die ausführlich kommentierte Implementierung verschiedener und hoffentlich von ihnen lernen. Beachten Sie, dass sie ausdrücklich NICHT eine UI-Bibliothek und sollte NICHT in der Produktion verwendet werden.
Komponenten
<howto-checkbox>
: steht für eine boolesche Option in einem Formular. Die häufigste Art von ist ein zweifacher Typ, bei dem der Nutzer zwischen zwei Optionen wechseln kann: aktiviert und deaktiviert.<howto-tabs>
: Schränkt die sichtbaren Inhalte ein, indem sie in mehrere Bereiche unterteilt werden.<howto-tooltip>
: Pop-up, das Informationen zu einem Element anzeigt, wenn das Element Tastaturfokus erhält oder der Mauszeiger darüber bewegt wird.
Ziele
Unser Ziel ist es, Best Practices für das Schreiben robuster Komponenten zu demonstrieren, zugänglich, leistungsstark, einfach zu verwalten und einfach zu gestalten. Jede Komponente ist und kann so als Referenzimplementierung dienen.
Bedienungshilfen
Die Komponenten richten sich nach der WAI ARIA Authoring in Ihrem Konto an. Erläutern und zeigen Sie ARIA, Accessible Rich Internet Application Standard. Wenn Sie nicht mit ARIA vertraut sind, finden Sie in unserer Einführung zur WebFundamentals. Jede Komponente enthält einen Link zum entsprechenden Abschnitt der Erstellungspraktiken. Während nicht unbedingt notwendig, empfehlen wir, den Abschnitt zur Erstellung vor der detaillierten Beschreibung des Codes üben.
Leistung
In der Webentwicklung
besteht der Begriff „Leistung“ auf eine Vielzahl von
Dinge. Im Zusammenhang mit <howto>
bezieht sich die Leistung hauptsächlich auf Animationen
kontinuierlich mit 60 fps läuft, auch auf Mobilgeräten.
Visuelle Flexibilität
Soweit möglich, werden Komponenten nicht formatiert, mit Ausnahme des Layouts oder der einen ausgewählten oder aktiven Status haben. So bleibt die Implementierung visuell flexibel und konzentriert. Indem wir keine Zeit mit der Dekoration aufwenden, beschränken wir den Code auf das, was ist absolut notwendig, damit die Komponente funktioniert. Wenn ein Stil erforderlich ist Damit die Komponente funktioniert, wird der Stil mit einem Kommentar versehen. und erklärt, warum das so ist.
Verwaltbarer Code
Zur Anleitung: Komponenten sind eine Referenz haben wir zusätzliche Zeit investiert, um lesbare und verständlichen und intensiv kommentierten Code.
Keine Ziele
Sie muss eine Bibliothek / ein Framework / Toolkit sein.
<howto>
-Komponenten werden nicht auf npm, Bower oder einer anderen Plattform veröffentlicht
da sie nicht für die Produktion gedacht sind. Aus Gründen der Klarheit
Wir verwenden moderne JavaScript-APIs und unterstützen moderne
Browser, die die Standards für Webkomponenten implementieren. Ich
können den Code nach dem Lesen dieser
Implementierungen.
Abwärtskompatibel sein
Sie sollten sich nicht direkt auf den Code verlassen. Wir könnten und werden es höchstwahrscheinlich machen, die Implementierung und das API eines Elements drastisch ändern, Implementierung erkannt wird. Dies ist eine lebendige Ressource, in der wir Best Practices für das Erstellen von Web-UIs kennenlernen und diskutieren.
Vollständig sein
Wir implementieren derzeit nicht *alle *Komponenten, die
finden Sie in den WAI ARIA Authoring Practices. Die Wiederverwendung der Prinzipien
in anderen <howto>
-Komponenten sollten Lesern die Implementierung von Komponenten ermöglichen.
die fehlen.