Google Polymer - Wie es die Art und Weise ändert, wie Web-Apps erstellt werden

Darüber hinaus können diese benutzerdefinierten Elemente auch einige akzeptierte benutzerdefinierte Attribute enthalten. In Bezug auf die Element, legen Sie ein Attribut namens username dem der Twitter-Benutzername angegeben wird.

Benutzerdefinierte Elemente in Polymer

Polymer enthält eine Reihe von Elementen, die (fast) jeden Web-Anwendungsbedarf berücksichtigen. Google unterteilt diese Elemente in Gruppen: Eisenelemente, Papierelemente, Google-Webkomponenten, Goldelemente, Neonelemente, Platinelemente und Moleküle.

1. Eisenelemente

Iron Elements ist eine Sammlung von Grundelementen. Diese grundlegenden Elemente werden normalerweise verwendet, um eine Webseite wie Eingabe, Formular und Bild zu erstellen . Der Unterschied ist, dass Polymer diesen Elementen zusätzliche Kräfte hinzufügt.

Alle Elemente in dieser Gruppe sind zum Beispiel iron- Präfix , mit dem ein Bild angezeigt wird. Das Element wurde mit einigen zusätzlichen Attributen ausgestattet, die wir im normalen Modus nicht anwenden können Element. Wir können beispielsweise preload, fade und placeholder hinzufügen:

Das obige Beispiel zeigt zuerst den Bildplatzhalter und blendet dann in das src Bild ein, wenn es vollständig geladen ist, wodurch ein glatter Bildladeeffekt erzielt wird .

2. Papierelemente

Die Papierelemente sind eine Gruppe von Material Design Elementen. Material Design ist die Designsprache von Google, um Benutzeroberfläche und Erfahrung auf Google-Plattformen sowohl für Web- als auch für Android-Apps visuell konsistenter zu gestalten. Einige Elemente, die für das Materialdesign einzigartig sind, sind der Papier- und der Floating Action Button (FAB).

Papier

Papier ist Googles Metapher für das Medium, das dem Inhalt zugrunde liegt . Um ein Papier mit Polymer hinzuzufügen, verwenden wir das Element. Dieses Element hat 2 Attribute:

• elevation, um das Papier anzuheben, daher wird ein Schatten hinzugefügt, um die Höhe zu verstärken
• animated wird die Animation als Papierhöhenänderung anwenden.

Schwimmender Action Button (FAB)

Der Floating Action Button (FAB) ist eine kreisförmige Schaltfläche mit einem Symbol, das auf dem Bildschirm schwebt, normalerweise mit einer herausragenden Farbe. Google schlägt vor, dass diese Schaltfläche eine häufig aufgerufene Funktion enthält. Hier ist ein Beispiel:

Das folgende Code-Snippet fügt ein Papiermaterial mit einem Bild und einem FAB hinzu.

Wir werden folgendes Ergebnis haben:

• Sehen Sie sich die Paper Demo an

3. Google Web-Komponenten

Die Google Web Components sind spezielle Elemente, die mit Google APIs und Diensten wie Google Maps, Youtube sowie Google Feed umgehen, um nur einige zu nennen. Elemente in dieser Gruppe ermöglichen die Interaktion mit Google-Diensten nur wenige Zeilen entfernt .

Das folgende Beispiel zeigt eine Google Map mit dem Element.

 Das ist Googleplex 

Wie Sie oben sehen können, die element verwendet den latitude und longitude, um den Standort auf der Karte anzugeben. Wir können auch nisten um eine Kartenmarkierung dieses Ortes zusammen mit einem Text anzuzeigen, der beim Klicken auf den Marker erscheint.

• Sehen Sie sich die Karten-Demo an

Möchten Sie ein Youtube-Video anzeigen? du kannst den ... benutzen Element.

Ebenso passen wir die Ausgabe über Attribute an.

• Sehen Sie sich die Youtube-Demo an

4. Gold Elemente

Die Gold Elements sind die Elemente, die speziell für E-Commerce-Apps entwickelt wurden . Hier finden Sie Elemente zum Anzeigen von Kreditkarten-, E-Mail-, Telefon- und ZIP-Eingaben, die alle mit Format-Validierung ausgestattet wurden, um korrekte Dateneingabe und Sicherheit zu gewährleisten. Hier ist ein Beispiel, um Visa Kreditkarteneingabe hinzuzufügen.

5. Andere Elemente

Die restlichen Elemente umfassen Neon-Elemente für Animationen und Spezialeffekte, Platinum-Elemente für Offline- und Push-Benachrichtigungen und schließlich Moleküle, Wrapper für Bibliotheken von Drittanbietern.

Anmerkung des Herausgebers: Zum Zeitpunkt der Erstellung dieses Artikels sind Neon Elements, Platinum Elements und Molecules immer noch nicht verfügbar.

Integrierendes Polymer

Möchten Sie Polymer in Ihrer Webentwicklung verwenden? So installieren und integrieren Sie es in Ihre Webseiten. Da die meisten Polymerelemente aufeinander angewiesen sind, ist der beste Weg, Polymer zu installieren, Bower.

Bower ist ein Projektabhängigkeiten-Manager, der die Installation von Skripten oder Stilen erleichtert, die für die Ausführung des Projekts erforderlich sind. Sehen Sie sich unseren früheren Beitrag zur Installation, Aktualisierung und Entfernung von Web-Bibliotheken mit Bower an.

Um Polymer zu integrieren, starten Sie Terminal und navigieren Sie dann zu Ihrem Projektverzeichnis, vorausgesetzt, Sie haben eines erstellt. Führen Sie dann den Befehl bower init um die Datei bower.json in Ihr Projekt zu initiieren, die zum Aufzeichnen der Projektabhängigkeiten verwendet wird. Öffnen Sie bower.json und fügen Sie die folgenden Zeilen hinzu.

 "Abhängigkeiten": {"Polymer": "Polymer / Polymer # ^ 1.0.0", "Google-Web-Komponenten": "GoogleWebComponents / Google-Web-Komponenten # ^ 1.0.0", "Eisenelemente": PolymerElements / Eisen-Elemente # ^ 1.0.0 ", " Paper-Elemente ":" PolymerElements / Papier-Elemente # ^ 1.0.0 ", " Gold-Elemente ":" PolymerElements / Gold-Elemente # ^ 1.0.0 "} 

Bei dieser Konfiguration wird davon ausgegangen, dass alle Elemente aus jeder Gruppe verwendet werden. Sie können das, was Sie nicht benötigen, aus der Abhängigkeitsliste entfernen. Wenn die Abhängigkeiten festgelegt sind, führen Sie den bower install Befehl aus, um die Abhängigkeiten in der Liste zu installieren.

Hier ist ein Beispiel:

Dieses Setup wird es uns ermöglichen, die , , Elemente.

Vitrinen

Hier sind einige der Web-Apps, die bereits Google Polymer verwenden.

Google

Google hat Google Polymer auf der Google IO 2015-Webseite verwendet. Google Fi, der Google-Mobilfunkdienst für Carrier und Anbieter in Partnerschaft; und Google Musik.

Benutzerdefinierte Elemente

CustomElements ist ein Hub, in dem Sie benutzerdefinierte Elemente finden können, die mit Webkomponenten erstellt wurden. Es verwendet das Paper-Element, um die Liste zu enthalten und zu erstellen. Es bietet auch eine praktische Möglichkeit, diese Elemente über Bower und NPM zu installieren.

Eine Chrome-Anwendung für die Code-Bearbeitung, die überraschend gut funktioniert. Diese App verwendet die FAB-Taste, das Papiermenü und die Papierdialogelemente in der Benutzeroberfläche.

Ein Tool zum Erstellen einer Webanwendung mit Polymerelementen mithilfe einer Drag-and-Drop-Schnittstelle.

Ein Börsenbericht und eine Prognose, die vollständig mit Polymerelementen erstellt wurden.

Eine E-Mail-Client-App für Gmail. Es sieht gut und flüssig aus, obwohl es leider nicht voll funktionsfähig ist.

Polymer hat einen enormen Umfang und es kann eine Weile dauern, bis Sie sich an alle benutzerdefinierten Elemente und deren API gewöhnt haben. Dennoch werden Web Components und Polymer sicherlich die Art und Weise beeinflussen, wie wir Webanwendungen erstellen. Bleiben Sie der Masse voraus, indem Sie mehr über Web Components lesen - Referenzen finden Sie weiter unten.

• Demo anzeigen
• Quelle herunterladen

Nützliche Referenzen

• Der Status von Webkomponenten
• Eine detaillierte Einführung in benutzerdefinierte Elemente
• Offizieller Blog von Google Polymer

7 Drag and Drop Plugins zum Erstellen von WordPress-Sites

Der Drag-and-Drop-Ansatz wurde von Nicht-Technikern am meisten geschätzt, wenn es darum geht, Web-Layouts anzuordnen. Dies ist vielleicht der Grund, warum Wix, SquareSpace und solche Dienste so populär sind. Um nur ein paar coole Tools zu nennen, mit denen Sie mehr mit Drag and Drop machen können, haben wir:Erstellen Sie schöne Websites mit IM CreatorBenutzerdefinierter Stil mit JQuery UI SortableErstellen Sie professionell wirkende Grafiken mit CanvaErstellen Sie HTML-Bootstrap-Layouts mit LayoutIt!Spe

(Tech- und Design-Tipps)

14 informative und kostenlose E-Books für Webdesigner

Möchten Sie ein wenig Erfahrung in Webdesign, Codierung oder Typografie sammeln? Glücklicherweise müssen wir nicht länger langweilige Bücher durchgehen, um einen Webdesigner zu werden. Es gibt jetzt viele gute E-Books, die Ihnen Tipps und Beispiele geben, die Ihnen beim Webdesign helfen.Zu diesem Zweck habe ich eine Sammlung von 1 5 informativen Web-Design-E-Books zusammengestellt, die kostenlos im Internet zur Verfügung stehen. Die

(Tech- und Design-Tipps)