Google Polymer - Kako bo spremenil način Web Apps so zgrajene

in elemente, ki skrivajo nadzor igralca uporabniškega vmesnika.

Danes lahko s spletnimi komponentami imenujemo tudi lastne elemente. Tako lahko zgradimo element, vdelati krmo v storitvi Twitter ali (morda) za vdelavo grafikona.

Poleg tega imajo lahko ti prilagojeni elementi tudi nekaj sprejetih atributov po meri. Glede. \ T element, nastavite klicani atribut uporabniško ime ki bo uporabljen za določitev uporabniškega imena za Twitter.

Elementi po meri v polimeru

Polimer ima veliko elementov, ki upoštevajo (skoraj) vsako potrebno spletno aplikacijo. Google te elemente deli v skupine: železni elementi, papirni elementi, Googlove spletne komponente, zlati elementi, neonske elemente, platinaste elemente in molekule.

1. Železni elementi

Iron Elements je zbirka osnovnih elementov. Ti osnovni elementi so, kar običajno uporabljamo ustvarite spletno stran kot so vnos, oblika in podoba. Razlika je v tem, da Polymer tem elementom dodaja nekaj dodatnih moči.

Vsi elementi v tej skupini so železo- predpono, na primer , ki se uporablja za prikaz slike. The element je opremljen z nekaterimi dodatnimi atributi, ki jih ne moremo uporabiti v običajnih element. Dodamo lahko na primer prednapetost, zbledi, in ogrado lastnosti:

Zgornji primer najprej prikaže ogrado za slike in nato zbledi v dejansko sliko v src ko je polno naložen, izvajanje gladkega učinka obremenitve slike.

2. Papirni elementi

The Elementi papirja je skupina elementov Material Design. Material Design je Googlov oblikovalski jezik, ki omogoča bolj vizualno skladnost uporabniškega vmesnika in izkušenj v Googlovih platformah tako spletnih kot aplikacij Android. Nekateri elementi, ki so edinstveni za Material Design, so Paper and Floating Action Button (FAB).

Papir

Papir je Googlova metafora za medij, ki je podlaga za vsebino. Za dodajanje papirja s polimerom uporabljamo element. Ta element ima dva atributa:

• nadmorske višine da dvignete papir, zato dodajte senco, da okrepite višino
• animirani bo uporabila animacijo kot spremembo višine papirja.

Plavajoči akcijski gumb (FAB)

Plavajoči akcijski gumb (FAB) je krožni gumb z ikono, ki lebdi na zaslonu in je ponavadi obarvan. Google predlaga, da ta gumb nosi pogosto dostopno funkcijo. Tukaj je primer:

Naslednji odrezek kode doda papirni material s sliko in FAB.

Rezultat:

Imamo fotografijo z a “srce” gumb, ki plava na njem. Klikni na sliko, pri čemer gumb oddaja učinek valovanja, ki potrjuje klik.

• Oglejte si predstavitev papirja

3. Spletne komponente Google

Google Spletne komponente so posebni elementi, ki se soočajo z Google API-ji in storitvami, kot so Google Zemljevidi, Youtube in Google Feed, če naštejemo samo nekatere. Elementi v tej skupini naredite interakcijo z Googlovimi storitvami le nekaj vrstic stran.

Spodaj je primer za prikaz Google Zemljevida z uporabo element.

  To je Googleplex  

Kot lahko zgoraj, element prevzame zemljepisna širina in zemljepisne dolžine , da določite lokacijo na zemljevidu. Lahko tudi gnezdimo za prikaz oznake na zemljevidu te lokacije skupaj z besedilom, ki se prikaže ob kliku na oznako.

• Oglejte si predstavitev zemljevida

Želite prikazati videoposnetek Youtube? lahko uporabite element.

Podobno prilagodimo izhod preko atributov.

• Oglejte si predstavitev Youtube

4. Zlati elementi

Zlati elementi so elementi, izdelani posebej za e-trgovinske aplikacije. Tukaj boste našli element za prikaz kreditne kartice, e-pošte, telefona in ZIP vhoda, ki so vsi opremljeni potrditev oblike zagotoviti pravilen vnos podatkov in varnost. Tu je en primer za vnos kreditne kartice Visa.

5. Drugi elementi

Drugi elementi vključujejo elemente Neon za animacijo in posebne učinke, Platinum elemente za offline in push obvestila in nazadnje Molekule, ovojnice za knjižnice tretjih oseb.

Opomba urednika: V času tega pisanja še vedno ni na voljo neonskih elementov, platinastih elementov in molekul.

Vključevanje polimera

Želite uporabljati Polymer v svojem spletnem razvoju? Tukaj je, kako namestiti in integrirati v svoje spletne strani. Ker je večina polimernih elementov odvisnih eden od drugega, je najboljši način za namestitev polimera preko Bowerja.

Bower je vodja projektnih odvisnosti, ki olajša namestitev skriptov ali slogov, potrebnih za izvajanje projekta. Oglejte si našo prejšnjo objavo o tem, kako enostavno namestiti, posodobiti in odstraniti spletne knjižnice s programom Bower.

Če želite integrirati Polymer, zaženite Terminal in se pomaknite do direktorija projekta, če ste ga ustvarili. Potem pa teči inver ukaz za zagon datoteke bower.json v vaš projekt, ki bo uporabljen za beleženje odvisnosti projekta. Odprite bower.json in dodajte naslednje vrstice.

 "odvisnosti": "polimer": "polimer / polimer # ^ 1.0.0", "google-spletne komponente": "GoogleWebComponents / google-web-components # ^ 1.0.0", "elementi železa": " PolymerElements / iron-elements # ^ 1.0.0 "," papirni elementi ":" PolymerElements / paper-elements # ^ 1.0.0 "," gold-elements ":" PolymerElements / gold-elements # ^ 1.0.0 " 

Ta nastavitev predvideva, da bomo uporabili vse elemente iz vsake skupine. S seznama odvisnosti lahko odstranite tisto, kar ne potrebujete. Ko so odvisnosti nastavljene, zaženite namestite ukaz za namestitev odvisnosti na seznam.

Ta postopek lahko traja nekaj časa, saj vključuje pridobivanje velike količine datotek iz skladišč. Ko končate, jih morate najti shranjene v bower_components mapo.

Odprite datoteko HTML, v kateri želite uporabiti komponente Polymer. V glavi dokumenta, povežite WebComponents.js ki je polyfill za brskalnike, ki še ne podpirajo WebComponents, in uvozite datoteke komponent z uporabo uvoza HTML.

Tukaj je primer:

Ta nastavitev nam bo omogočila uporabo , , elementov.

Vitrine

Nekaj ​​spletnih aplikacij, ki že uporabljajo Google Polymer.

Google

Google je uporabil Google Polymer na spletni strani Google IO 2015; Google Fi, brezžična storitev Google za prevoznike in prodajalce v partnerstvu; in Google Glasba.

Elementi po meri

CustomElements je središče, kjer lahko najdete elemente po meri, zgrajene s spletnimi komponentami. Uporablja element Paper, da vsebuje in sestavi seznam. Prav tako zagotavlja priročno pot za namestitev teh elementov prek Bowerja in NPM.

Chrome Dev Editor

Aplikacija Chrome za urejanje kode, ki deluje presenetljivo dobro. Ta aplikacija uporablja gumb FAB, meni Papir in elemente pogovornega okna Paper v uporabniškem vmesniku.

Oblikovalec polimerov

Orodje za izdelavo spletne aplikacije s polimernimi elementi z vmesnikom »povleci in spusti«.

Dnevna napoved zalog

Poročilo o borzi in napoved, zgrajena v celoti s polimernimi elementi.

Polimerna pošta

Aplikacija e-poštnega odjemalca za Gmail. Izgleda lepo in tekoče, čeprav žal ne deluje v celoti.

Končne misli

Polimer ima ogromen obseg in morda boste potrebovali nekaj časa, da se navadite na vse elemente po meri in na API. Kljub temu bodo spletne komponente in polimer zagotovo vplivale na način gradnje spletnih aplikacij. Ostanite pred množico, tako da preberete več o spletnih komponentah - spodaj najdete reference.

• Prikaži predstavitev
• Prenesi vir

Koristne reference

• Stanje spletnih komponent
• Podroben uvod v elemente po meri
• Uradni blog Google Polymer