polymerErste Schritte mit Polymer


Bemerkungen

Das Polymerprojekt besteht aus:

  • Polymerbibliothek : Polymer ist eine einfache Bibliothek, mit der Sie Webkomponenten voll ausnutzen können. Mit Webkomponenten können Sie wiederverwendbare benutzerdefinierte Elemente erstellen, die nahtlos mit den integrierten Elementen des Browsers zusammenarbeiten, oder Ihre App in Komponenten mit der richtigen Größe aufteilen, wodurch der Code sauberer und weniger wartungsintensiv wird.
  • WebComponents Polyfill : WebComponents Polyfill ist eine Bibliothek für die Zukunft, die darauf abzielt, die Spezifikationen der W3C-Webkomponenten zu erfüllen. Browser, die die Spezifikation vollständig implementieren, benötigen keine webcomponents.js. Allerdings fehlt den meisten Browsern immer noch ein Teil der Spezifikation, sodass dies für einige Zeit eine Abhängigkeit sein wird.
  • Polymer App Toolbox : Mit Polymer App Toolbox können Sie fortschrittliche progressive Webanwendungen mit minimalem Aufwand und geringerer Nutzlast erstellen und bereitstellen, indem Sie leistungsstarke Webplattformfunktionen wie Webkomponenten, Service Worker und HTTP / 2 nutzen. Die Toolbox bietet eine komponentenbasierte Architektur, responsive Layouts, einen modularen Router, Lokalisierungsunterstützung, schlüsselfertige Unterstützung für lokales Speichern und Offline-Caching sowie die effiziente Bereitstellung nicht gebündelter App-Ressourcen. Übernehmen Sie diese Funktionen einzeln, oder verwenden Sie sie zusammen, um eine Progressive Web App mit vollem Funktionsumfang zu erstellen. Polymer streut etwas Zucker über die Standard-Webkomponenten-APIs, sodass Sie bessere Ergebnisse erzielen können. Die Polymer-Bibliothek bietet eine Reihe von Funktionen zum Erstellen benutzerdefinierter Elemente. Diese Funktionen sollen das Erstellen von benutzerdefinierten Elementen, die wie Standard-DOM-Elemente funktionieren, einfacher und schneller machen. Ähnlich wie DOM-Standardelemente können Polymerelemente sein:

Versionen

Ausführung Veröffentlichungsdatum
v2.0.0 2017-05-15
v1.7.0 2016-09-28
v1.6.1 2016-08-01
v1.6.0 2016-06-29
v1.5.0 2016-05-31
v1.4.0 2016-05-18
v1.0.0 2015-05-27

Grundelementstruktur

Wir haben das folgende sehr grundlegende Element my-element als src/my-element.html

<link rel="import" href="bower_components/polymer/polymer.html">

<dom-module id="my-element">

  <template>
    <style>
      /* local styles go here */
      :host {
        display: block;
      }
    </style>
    <!-- local DOM goes here -->
    <content></content>
  </template>

  <script>
    Polymer({
      /* this is the element's prototype */
      is: 'my-element'
    });
  </script>

</dom-module>
 
  • Der <link> enthält die Polymerbibliothek über einen HTML-Import.
  • Das <dom-module> ist der lokale DOM-Wrapper für das Element (in diesem Fall my-element ).
  • Die <template> ist die eigentliche lokale DOM-Definition.
  • Mit dem <style> in der <template> können Sie Stile definieren, die sich auf dieses Element und sein lokales DOM beziehen, und nichts anderes im Dokument beeinflussen.
  • Der <content> alles, was Sie in Ihrem Element platzieren.
  • Die :host Pseudoklasse stimmt mit dem benutzerdefinierten Element ( my-element ) überein.
  • Der Polymer Aufruf registriert das Element.
  • Die is Eigenschaft ist der Name des Elements (er muss mit der id des <dom-module> übereinstimmen)

Sie können es in Ihre App importieren mit:

<link rel="import" href="src/my-element.html">
 

Und benutze es als Tag:

<my-element>Content</my-element>
 

Hallo Welt

In diesem Beispiel wird ein Polymer-Element namens x-foo , dessen Vorlage an eine Zeichenfolge-Eigenschaft namens "message" gebunden wird. Der HTML <x-foo> des Elements wird in das Hauptdokument importiert, das die Verwendung von <x-foo> -Tags in <body> .

x-foo.html

<dom-module id="x-foo">
  <template>
    <span>{{message}}</span>
  </template>

  <script>
    Polymer({
      is: 'x-foo',
      properties : {
        message: {
          type: String,
          value: "Hello world!"
        }
      }
    });
  </script>
</dom-module>
 

index.html

<head>
  <!-- PolyGit used here as CDN for demo purposes only. In production,
       it's recommended to import Polymer and Web Components locally
       from Bower. -->
  <base href="https://polygit.org/polymer+1.6.0/components/">

  <script src="webcomponentsjs/webcomponents-lite.min.js"></script>
  <link rel="import" href="polymer/polymer.html">

  <link rel="import" href="x-foo.html">
</head>
<body>
  <x-foo></x-foo>
</body>
 

Siehe Demo in CodePen

Einrichten Ihrer ersten Polymer-App aus einer Vorlage

Machen Sie sich bereit, Ihre eigene großartige progressive Webanwendung mit Polymer zu erstellen!

Bevor Sie mit der Installation von Polymer beginnen können, benötigen Sie Folgendes:

Installieren der Polymer-Befehlszeilenschnittstelle

Die Polymer CLI bietet Ihnen alle Werkzeuge, die Sie für Polymerprojekte benötigen:

npm install -g polymer-cli
 

Initialisieren Sie Ihre App aus einer App-Vorlage

Verwenden Sie polymer init , um Ihre App über eine App-Vorlage zu initialisieren.

Eine coole Vorlage ist die --app-drawer-template . Lass uns das verwenden:

polymer init app-drawer-template
 

App servieren

Es ist kein Gebäude erforderlich, um Ihre erste großartige Polymer-App zu bedienen. Einfach serve :

polymer serve --open
 

Dadurch wird die App in Ihrem Standardbrowser unter http://localhost:8080 geöffnet.

Elemente aus dem Polymerkatalog verwenden

Polymer bietet viele gut aufgebaute Elemente, die Sie in Ihrer App verwenden können.

Durchsuchen Sie sie in ihrem Elementkatalog .

Gehen wir den Workflow durch, indem Sie ein Element verwenden, indem Sie die paper-input ( Dokumentation ) hinzufügen.

Laden Sie das Element herunter

Um ein Element herunterzuladen, gibt es zwei Möglichkeiten:

Laube

Der convinient Weg ist , die Befehlszeile zu verwenden , mit der Bower install Befehl ein :

bower install --save PolymerElements/paper-input

Hinweis: --save fügt das Element als Abhängigkeit zum bower.json Ihrer App hinzu.

zip-Datei

Die andere Möglichkeit ist, das ausgewählte Element ( paper-input in diesem Fall) zu Ihrer Sammlung (im Polymer-Katalog) hinzuzufügen, indem Sie in der Navigation "Zu Sammlung hinzufügen" und Ihre Sammlung über das Sternsymbol in der oberen rechten Ecke herunterladen.

Dadurch wird eine ZIP-Datei generiert, die das Element und alle seine Abhängigkeiten enthält. Sie können dann den Ordner " bower_components " innerhalb der .zip / components in das Stammverzeichnis Ihrer App kopieren.

Importieren Sie das Element in Ihre App

Um das gerade installierte Element zu importieren, importieren Sie die entsprechende .html Datei:

<link rel="import" href="bower_components/paper-input/paper-input.html">
 

Verwenden Sie das Element

Jetzt können Sie die paper-input innerhalb des Dokuments verwenden, in das Sie es importiert haben:

<paper-input></paper-input>