Google Polymer - jak to zmieni sposób Aplikacje internetowe są zbudowane

i elementy, które budują kontrolę gracza w tajemnicy.

Dzisiaj, dzięki składnikom sieci Web, możemy nazwać również nasze własne elementy. Możemy zbudować taki element, aby osadzić kanał Twittera (lub) aby osadzić wykres.

Ponadto te niestandardowe elementy mogą mieć również kilka akceptowanych atrybutów niestandardowych. W odniesieniu do element, ustawiasz atrybut o nazwie Nazwa Użytkownika który zostanie użyty do określenia nazwy użytkownika Twittera.

Elementy niestandardowe w polimerach

Polymer zawiera wiele elementów, które odpowiadają za (prawie) każdą potrzebę aplikacji internetowej. Google dzieli te elementy na grupy: elementy żelazne, elementy papierowe, komponenty internetowe Google, elementy złote, elementy neonowe, elementy platynowe i cząsteczki.

1. Elementy żelazne

Żelazne elementy to zbiór podstawowych elementów. Te podstawowe elementy są normalnie używane zbudować stronę internetową takie jak dane wejściowe, forma i obraz. Różnica polega na tym, że Polymer dodaje dodatkowe elementy do tych elementów.

Wszystkie elementy w tej grupie są żelazo- na przykład przedrostek , który jest używany do wyświetlania obrazu. The element został wyposażony w dodatkowe atrybuty, których nie możemy zastosować w zwykłym element. Możemy na przykład dodać wstępne obciążenie, zgasnąć, i symbol zastępczy atrybuty:

Powyższy przykład pokaże najpierw symbol zastępczy obrazu, a następnie zniknie w rzeczywistym obrazie w src ponieważ jest w pełni załadowany, płynny efekt ładowania obrazu.

2. Elementy papierowe

The Elementy papierowe to grupa elementów projektu materiału. Material Design to język projektowy Google, który sprawia, że ​​interfejs użytkownika i doświadczenie na platformach Google są bardziej spójne wizualnie zarówno z aplikacjami internetowymi, jak i Android. Niektóre elementy unikalne dla Material Design to papier i przycisk pływający (FAB).

Papier

Papier to metafora Google'a medium, które leży u podstaw treści. Aby dodać papier z polimerem, używamy element. Ten element ma 2 atrybuty:

• podniesienie aby podnieść Papier, dodając cień, aby wzmocnić elewację
• ożywiony zastosuje animację jako zmiana wysokości papieru.

Przycisk pływający (FAB)

Przycisk Floating Action (FAB) to okrągły przycisk z ikoną, unoszący się na ekranie, zwykle z wyróżniającym się kolorem. Google sugeruje, że ten przycisk zawiera często dostępną funkcję. Oto przykład:

Poniższy fragment kodu dodaje materiał papierowy z obrazem i FAB.

Otrzymamy następujący wynik:

Mamy zdjęcie z “serce” przycisk unoszący się na nim. Kliknij, aby polubić zdjęcie, a przycisk powoduje efekt falowania, aby potwierdzić kliknięcie.

• Wyświetl prezentację papieru

3. Komponenty internetowe Google

Komponenty internetowe Google to specjalne elementy, które radzą sobie z interfejsami API Google i usługami, takimi jak Google Maps, YouTube, a także Google Feed. Elementy w tej grupie spraw, aby interakcja z usługami Google znajdowała się kilka linii dalej.

Oto przykład pokazujący mapę Google za pomocą element.

  To jest Googleplex  

Jak możesz powyżej element ma szerokość i długość geograficzna aby określić lokalizację na mapie. Możemy również gniazdować aby pokazać znacznik mapy tej lokalizacji wraz z tekstem, który pojawi się po kliknięciu znacznika.

• Wyświetl prezentację mapy

Chcesz pokazać film z YouTube? możesz użyć element.

Podobnie dostosowujemy dane wyjściowe za pomocą atrybutów.

• Zobacz prezentację YouTube

4. Złote elementy

Złote elementy to elementy zaprojektowane specjalnie dla aplikacji e-commerce. Tutaj znajdziesz element pokazujący dane karty kredytowej, e-mail, telefon i ZIP, które wszystkie zostały wyposażone walidacja formatu w celu zapewnienia poprawnego wprowadzania danych i bezpieczeństwa. Oto jeden przykład dodawania danych karty kredytowej Visa.

5. Inne elementy

Pozostałe elementy to elementy neonowe do animacji i efektów specjalnych, elementy Platinum do powiadomień offline i push oraz wreszcie cząsteczki, opakowania do bibliotek innych firm.

Uwaga redaktora: W chwili pisania tego tekstu Neon Elements, Platinum Elements i Molecules nadal nie są dostępne.

Polimer łączący

Chcesz używać polimeru w tworzeniu stron internetowych? Oto sposób instalacji i integracji na swoich stronach internetowych. Ponieważ większość elementów polimerowych polega na sobie, najlepszym sposobem instalacji polimeru jest zastosowanie Bower.

Bower to menedżer zależności projektowych, który ułatwia instalowanie skryptów lub stylów wymaganych do uruchomienia projektu. Sprawdź nasz wcześniejszy post, w jaki sposób zainstalować, zaktualizować i usunąć biblioteki internetowe z Bower.

Aby zintegrować Polymer, uruchom Terminal, a następnie przejdź do katalogu projektu, zakładając, że go utworzyłeś. Następnie uruchomić altówka init polecenie zainicjowania pliku bower.json do projektu, który zostanie użyty do zarejestrowania zależności projektu. Otwórz bower.json i dodaj następujące wiersze.

 „zależności”: „polimer”: „Polimer / polimer # ^ 1.0.0”, „składniki-google-web”: „GoogleWebComponents / google-web-components # ^ 1.0.0”, „iron-elements”: ” PolymerElements / iron-elements # ^ 1.0.0 "," paper-elements ":" PolymerElements / paper-elements # ^ 1.0.0 "," gold-elements ":" PolymerElements / gold-elements # ^ 1.0.0 " 

Ta konfiguracja zakłada, że ​​będziemy używać wszystkich elementów z każdej grupy. Możesz usunąć to, czego nie potrzebujesz, z listy zależności. Po ustawieniu zależności uruchom polecenie instalacja altany polecenie, aby zainstalować zależności na liście.

Ten proces może chwilę potrwać, ponieważ wymaga pobrania dużej ilości plików z repozytoriów. Gdy to zrobisz, powinieneś znaleźć je zapisane w bower_components teczka.

Otwórz plik HTML, w którym chcesz użyć komponentów polimerowych. W głowicy dokumentu, link WebComponents.js który jest wypełniacz dla przeglądarek, które jeszcze nie obsługują WebComponents, i zaimportuj pliki komponentów za pomocą importu HTML.

Oto przykład:

Ta konfiguracja umożliwi nam korzystanie z , , elementy.

Gabloty

Oto niektóre aplikacje internetowe, które już korzystają z Google Polymer.

Google

Google użyło Google Polymer na stronie internetowej Google IO 2015; Google Fi, usługa bezprzewodowa Google dla przewoźników i dostawców w partnerstwie; i Google Music.

Elementy niestandardowe

CustomElements to centrum, w którym można znaleźć niestandardowe elementy zbudowane z komponentów internetowych. Wykorzystuje element Paper do przechowywania i tworzenia listy. Zapewnia także wygodną trasę instalacji tych elementów za pomocą Bower i NPM.

Edytor Dev Chrome

Aplikacja Chrome do edycji kodu działa zaskakująco dobrze. Ta aplikacja korzysta z przycisku FAB, menu papieru i elementów dialogowych papieru w interfejsie użytkownika.

Projektant polimerów

Narzędzie do tworzenia aplikacji internetowych z elementami Polymer za pomocą interfejsu przeciągnij i upuść.

Dzienna prognoza akcji

Raport giełdowy i prognoza zbudowana w całości z elementów polimerowych.

Poczta polimerowa

Aplikacja klienta poczty e-mail dla Gmaila. Wygląda ładnie i płynnie, choć niestety nie działa w pełni.

Końcowe przemyślenia

Polimer ma ogromny zakres i może zająć trochę czasu, aby przyzwyczaić się do wszystkich niestandardowych elementów, jak również jego API. Niemniej jednak komponenty internetowe i polimer z pewnością wpłyną na sposób tworzenia aplikacji internetowych. Wyprzedź tłum, czytając więcej o komponentach internetowych - referencje znajdują się poniżej.

• Wyświetl demo
• Pobierz źródło

Przydatne referencje

• Stan składników sieci Web
• Szczegółowe wprowadzenie do elementów niestandardowych
• Oficjalny blog Google Polymer