Google Polymer - kā tas mainīs veidu, kā Web Apps ir veidotas

un elementi, kas veido lietotāja interfeisa atskaņotāja vadību slepenībā.

Šodien, izmantojot Web komponentus, mēs varam nosaukt arī savus elementus. Mēs varam izveidot tādu elementu kā, ievietot Twitter plūsmu vai (varbūt) lai iegultu diagrammu.

Turklāt šiem pielāgotajiem elementiem var būt arī pāris pieņemto pielāgoto atribūtu. Attiecībā uz. \ T elementu, iestatāt atribūtu, ko sauc lietotājvārds kuru izmantos, lai norādītu Twitter lietotājvārdu.

Pielāgoti elementi polimērā

Polimēram ir virkne elementu, kas veido (gandrīz) katru tīmekļa lietojumprogrammu. Google šos elementus sadala grupās: dzelzs elementi, papīra elementi, Google tīmekļa komponenti, zelta elementi, neona elementi, platīna elementi un molekulas.

1. Dzelzs elementi

Dzelzs elementi ir pamatelementu kolekcija. Šie pamatelementi ir tas, ko mēs parasti izmantojam veidot tīmekļa lapu piemēram, ievadi, formu un attēlu. Atšķirība ir polimērs, kas šiem elementiem pievieno dažas papildu pilnvaras.

Visi šīs grupas elementi ir dzelzs- piemēram, prefikss , kuru izmanto, lai parādītu attēlu. The elements ir aprīkots ar dažiem papildu atribūtiem, kurus mēs nevaram piemērot parastajos elementu. Piemēram, mēs varam pievienot ielādēšana, izbalināt, un vietas rezervētājs atribūti:

Iepriekš minētais piemērs vispirms parādīs attēla vietas marķieri un pēc tam izzūd faktiskajā attēlā src jo tas ir pilnībā ielādēts, veikt vienmērīgu attēla ielādes efektu.

2. Papīra elementi

The Papīra elementi ir materiālu dizaina elementu grupa. Materiālu dizains ir Google dizaina valoda, lai padarītu lietotāja interfeisu un Google platformu pieredzi vizuāli konsekventāku gan tīmekļa, gan Android lietotnēs. Daži elementi, kas ir unikāli materiālu dizainam, ir papīra un peldošas darbības poga (FAB).

Papīrs

Papīrs ir Google metafora vidē, kas ir satura pamatā. Lai pievienotu papīru ar Polymer, mēs izmantojam elementu. Šis elements ir 2 atribūti:

• augstums pacelt papīru, tādējādi pievienojot ēnu, lai pastiprinātu pacēlumu
• animēts mainīsies animācija, kad mainās Papīra pacēlums.

Peldošā darbības poga (FAB)

Peldošā darbības poga (FAB) ir apaļa poga ar ikonu, kas peld uz ekrāna, parasti ar izceļošu krāsu. Google iesaka, ka šai pogai ir bieži pieejama funkcija. Šeit ir piemērs:

Šāds koda fragments pievieno papīra materiālu ar attēlu un FAB.

Mums būs šāds rezultāts:

Mums ir fotoattēls ar a “sirds” poga, kas peld virs tā. Noklikšķiniet uz tā, lai līdzīgi kā fotoattēls, un poga atdala rippa efektu, lai apstiprinātu klikšķi.

• Skatiet papīra demonstrāciju

3. Google tīmekļa komponenti

Google tīmekļa komponenti ir īpaši elementi, kas tiek galā ar Google API un pakalpojumiem, piemēram, Google Maps, Youtube, kā arī Google Feed, lai nosauktu tikai dažus. Šīs grupas elementi padarīt mijiedarbību ar Google pakalpojumiem tikai dažu rindu attālumā.

Tālāk sniegts piemērs, lai parādītu Google karti, izmantojot elementu.

  Tas ir Googleplex  

Kā jūs varat iepriekš, elements ņem platuma un garums lai norādītu atrašanās vietu kartē. Mēs varam arī ligzdot parādīt šīs vietas kartes marķieri kopā ar tekstu, kas parādīsies, noklikšķinot uz marķiera.

• Skatiet kartes demonstrāciju

Vai vēlaties rādīt Youtube video? jūs varat izmantot elementu.

Tāpat mēs pielāgojam produkciju, izmantojot atribūtus.

• Skatiet YouTube demonstrāciju

4. Zelta elementi

Zelta elementi ir elementi, kas īpaši paredzēti e-komercijas lietotnēm. Šeit jūs atradīsiet elementu, kas parāda kredītkartes, e-pasta, tālruņa un ZIP ievadi, kas visi ir aprīkoti formāta apstiprināšana lai nodrošinātu pareizu datu ievadi un drošību. Šeit ir viens piemērs, kā pievienot Visa kredītkartes ievadi.

5. Citi elementi

Pārējie elementi ietver neona elementus animācijai un specefektiem, Platinum elementus bezsaistes un push paziņojumiem un visbeidzot molekulas, ietinējus trešo pušu bibliotēkām.

Redaktora piezīme: Šīs rakstīšanas laikā neona elementi, platīna elementi un molekulas joprojām nav pieejamas.

Polimēra integrēšana

Vai vēlaties izmantot Polymer savā tīmekļa izstrādē? Lūk, kā to instalēt un integrēt savās tīmekļa lapās. Tā kā vairums polimēru elementu balstās uz otru, labākais veids, kā uzstādīt Polymer, ir caur Bower.

Bower ir projekta atkarību pārvaldnieks, kas ļauj vieglāk instalēt skriptus vai stilus, kas nepieciešami projekta izpildei. Iepazīstieties ar mūsu iepriekšējo ziņu par to, kā viegli instalēt, atjaunināt un noņemt tīmekļa bibliotēkas.

Lai integrētu Polymer, palaidiet Terminal, tad dodieties uz savu projektu direktoriju, pieņemot, ka esat izveidojis to. Tad palaidiet bower init komandu, lai sāktu bower.json failu savā projektā, kas tiks izmantots, lai ierakstītu projekta atkarības. Atveriet bower.json un pievienojiet šādas rindas.

 "atkarības": "polimērs": "polimērs / polimērs # ^ 1.0.0", "google-web-komponenti": "GoogleWebComponents / google-web-komponenti # ^ 1.0.0", "dzelzs elementi": " PolymerElements / iron-elements # ^ 1.0.0 "," papīra elementi ":" PolymerElements / papīra elementi # ^ 1.0.0 "," zelta elementi ":" Polimēru elementi / zelta elementi # ^ 1.0.0 " 

Šajā iestatījumā tiek pieņemts, ka mēs izmantosim visus elementus no katras grupas. No atkarības saraksta jūs varat noņemt to, kas jums nav nepieciešams. Tā kā ir iestatītas atkarības, palaidiet bower instalēt komandu, lai instalētu saraksta atkarības.

Šis process var aizņemt kādu laiku, jo tas ietver lielu daudzumu failu satveršanu no krātuvēm. Kad tas ir paveikts, jums vajadzētu atrast tos saglabātos bower_components mapi.

Atveriet HTML failu, kuru vēlaties izmantot polimēra komponentos. Dokumenta galvā, saistīt WebComponents.js kas ir polifils pārlūkprogrammām, kas vēl neatbalsta WebComponents, un importēt komponentu failus izmantojot HTML importēšanu.

Šeit ir piemērs:

Šī iestatīšana ļaus mums izmantot , , elementiem.

Vitrīnas

Šeit ir dažas tīmekļa lietojumprogrammas, kas jau izmanto Google Polymer.

Google

Google izmantoja Google Polymer Google IO 2015 tīmekļa vietnē; Google Fi, Google bezvadu pakalpojums pārvadātājiem un pārdevējiem partnerībā; un Google mūzika.

Pielāgoti elementi

CustomElements ir centrs, kur var atrast pielāgotus elementus, kas būvēti ar Web komponentiem. Tas izmanto papīra elementu, lai ietvertu un izveidotu sarakstu. Tas arī nodrošina ērtu maršrutu, lai šos elementus instalētu, izmantojot Bower un NPM.

Chrome Dev Editor

Chrome lietojumprogramma kodu rediģēšanai, kas darbojas pārsteidzoši labi. Šajā lietotnē lietotāja saskarnē tiek izmantota FAB poga, papīra izvēlne un papīra dialoga elementi.

Polimēra dizaineris

Rīks, lai izveidotu tīmekļa lietojumprogrammu ar polimēru elementiem, izmantojot vilkšanas un nomešanas saskarni.

Ikdienas krājumu prognoze

Biržas ziņojums un prognoze, kas pilnībā veidota ar polimēru elementiem.

Polimēra pasts

E-pasta klienta lietotne Gmail. Tas izskatās jauki un šķidrs, lai gan diemžēl tas nav pilnībā darbojies.

Galīgās domas

Polimēriem ir milzīga darbības joma, un tas var aizņemt kādu laiku, lai pierastu pie visiem pielāgotajiem elementiem, kā arī tās API. Tomēr tīmekļa komponenti un polimērs noteikti ietekmēs veidu, kā mēs veidojam tīmekļa lietojumprogrammas. Palieciet priekšā pūļa, lasot vairāk par Web komponentiem - atsauces atrodamas zemāk.

• Skatīt demonstrāciju
• Lejupielādēt avotu

Noderīgas atsauces

• Tīmekļa komponentu stāvoklis
• Detalizēta iepazīšanās ar pielāgotiem elementiem
• Google polimēra oficiālais emuārs