Polymerkomponenten gemeinsam nutzen Teil 2

In Teil eins dieser Serie habe ich die Konfiguration der großartigen neuen Boilerplate durchgearbeitet, Element ohne Titel, dass das Polymer-Team geschaffen hat, um die Erstellung und gemeinsame Nutzung von Polymerkomponenten wesentlich zu vereinfachen.

Im folgenden Tutorial werde ich tiefer in das eingehen Element ohne Titel Enthält, wie die automatische Dokumentationsfunktion, und wie Sie Ihre Komponente für die Verteilung über Bower einrichten. Wir werden weiterhin den Reddit-Komponentencode verwenden, den ich in meinem ersten Polymer-Lernprogramm erstellt habe.

Ein Blick ins Innere Element ohne Titel

Innerhalb des Boilerplate-Projekts gibt es einige Schlüsseldateien, die Sie verwenden werden:

  • bower.json - Hier können Sie Einstellungen und Abhängigkeiten für Ihre Komponente angeben
  • untitled-element-master.html - die Vorlage für die neue Komponente
  • untitled-element-master.css - die Stylesheet-Vorlage, um Ihre neue Komponente zu formatieren
  • index.html - die HTML-Datei, die den Polymerkern für die Dokumentationserstellung enthält
  • demo.html - die HTML-Datei, mit der Benutzer Ihre Komponente testen können

Dies sind die Basisdateien, die bereitgestellt werden, wenn Sie die Boilerplate zum ersten Mal aus dem GitHub-Repo von PolymerLabs herunterladen und als Grundlage für Ihre neue Komponente dienen. Im ersten Teil haben wir umbenannt untitled-element-master.html zu reddit-element.html und untitled-element-master.css zu reddit-element.css, da sie gleich benannt werden müssen wie unsere Komponente. Wir haben auch Verweise auf aktualisiert Element ohne Titel in allen Dateien, um sicherzustellen, dass der Code auf den richtigen Komponentennamen verweist.

Schauen wir uns den Code in an reddit-element.html: