Google Polymer - miten se muuttaa tapaa, jolla Web-sovellukset on rakennettu

ja elementit, jotka rakentavat käyttöliittymän peliohjaimia salassa.

Nykyään Web-komponenttien avulla voimme nimetä myös omia elementtejä. Voimme rakentaa sellaisen elementin, upottaa Twitter-syötteen tai (ehkä) upota kaavio.

Lisäksi näillä mukautetuilla elementeillä voi olla myös muutama hyväksytty mukautettu määrite. Mitä tulee elementti, asetat kutsun käyttäjätunnus jota käytetään määrittämään Twitter-käyttäjätunnus.

Polymeerin mukautetut elementit

Polymerissä on joukko elementtejä, jotka vastaavat (lähes) jokaisesta web-sovelluksen tarpeesta. Google jakaa nämä elementit ryhmiin: Iron Elements, Paper Elements, Google Web Components, Gold Elements, Neon Elements, Platinum Elements ja Molecules.

1. Rautaelementit

Iron Elements on peruselementtien kokoelma. Nämä perustekijät ovat normaalisti käytössä rakentaa verkkosivu kuten tulo, muoto ja kuva. Erona on, että Polymer lisää näitä lisäelementtejä.

Kaikki tämän ryhmän elementit ovat rauta-- esim. etukäteen , jota käytetään kuvan näyttämiseen. elementti on varustettu muutamilla lisäominaisuuksilla, joita emme voi soveltaa säännöllisesti elementti. Voimme esimerkiksi lisätä preload, häivyttää, ja paikanpitäjä attribuutteja:

Yllä oleva esimerkki näyttää ensin kuvan paikanvaraajan ja sitten häivyttää sen todellisen kuvan src koska se on täysin ladattu, sujuvan kuvan lataustehon suorittaminen.

2. Paperielementit

Paperielementit on ryhmä materiaali-elementtejä. Materiaalisuunnittelu on Googlen suunnittelukieli, joka tekee käyttöliittymästä ja Google-alustojen kokemuksista sekä web- että Android-sovelluksista visuaalisesti yhdenmukaisempia. Jotkin materiaalin suunnittelun ainutlaatuiset elementit ovat paperin ja kelluvan toiminnan painike (FAB).

Paperi

Paperi on Googlen metafora sisältö, joka on sisällön taustalla. Jos haluat lisätä paperin Polymerilla, käytämme elementti. Tämä elementti ottaa 2 attribuuttia:

• korkeus nostaa paperia, joten lisätään varjo kohotuksen vahvistamiseksi
• eloisa käyttää animaatiota Paperin korkeuden muutoksena.

Kelluva toimintopainike (FAB)

Kelluva toiminta-painike (FAB) on pyöreä painike, jossa on kuvaruutu, joka kelluu ruudulla, yleensä erottuvalla värillä. Google ehdottaa, että tällä painikkeella on usein käytettävissä oleva toiminto. Tässä esimerkki:

Seuraava koodinpätkä lisää paperimateriaalin, jossa on kuva ja FAB.

Meillä on seuraava tulos:

Meillä on valokuva a “sydän” -painike kelluu sen päällä. Napsauta sitä, kuten kuvassa, ja painike antaa ripple-efektiä napsauttamalla.

• Tarkastele Paperi-demoa

3. Googlen Web-komponentit

Googlen Web-komponentit ovat erityisiä elementtejä, jotka selviävät Googlen sovellusliittymistä ja palveluista, kuten Google Mapsista, Youtubeista ja Google-syötteistä. Tämän ryhmän elementit tee vuorovaikutuksessa Googlen palveluiden kanssa vain muutaman rivin päässä.

Seuraavassa on esimerkki Google-kartan näyttämisestä käyttämällä elementti.

  Tämä on Googleplex  

Kuten voitte edellä, elementti ottaa leveysaste ja pituusaste määrittää sijainnin kartalla. Voimme myös pesää näyttää kyseisen sijainnin karttamerkin ja tekstin, joka tulee näkyviin, kun napsautat merkkiä.

• Tarkastele karttakuvaa

Haluatko näyttää Youtube-videon? voit käyttää elementti.

Samoin mukautamme lähdön määritteiden avulla.

• Näytä Youtube-esittely

4. Kultaelementit

Kultaelementit ovat elementit, jotka on suunniteltu erityisesti sähköisen kaupankäynnin sovelluksiin. Täältä löydät elementin, joka näyttää luottokortin, sähköpostin, puhelimen ja ZIP-syötteen, johon kaikki on varustettu formaatin validointi varmistaa tietojen oikea syöttö ja turvallisuus. Tässä on yksi esimerkki Visa-luottokorttitietojen lisäämisestä.

5. Muut elementit

Jäljelle jääviä elementtejä ovat animaation ja erikoistehosteiden Neon-elementit, Platinum-elementit offline- ja push-ilmoituksiin sekä viime kädessä molekyylit, kääreet kolmannen osapuolen kirjastoille.

Toimittajan huomautus: Tämän kirjoituksen aikana Neon Elements, Platinum Elements ja Molecules eivät ole vielä käytettävissä.

Polymeerin integrointi

Haluatko käyttää Polymeria web-kehityksessäsi? Näin voit asentaa ja integroida sen Web-sivuillesi. Koska useimmat polymeerielementit luottavat toisiinsa, paras tapa asentaa Polymer on Bowerin kautta.

Bower on projekti-riippuvuuksien hallinta, joka helpottaa projektin suorittamiseen tarvittavien komentosarjojen tai tyyleiden asentamista. Tutustu aikaisempaan virkaan, miten Bowerin avulla voit asentaa, päivittää ja poistaa Web-kirjastoja.

Polymeerin integroimiseksi käynnistä Terminal ja siirry sitten projektihakemistoon olettaen, että olet luonut sen. Suorita sitten bower init komento käynnistää bower.json-tiedoston projektiisi, jota käytetään projektin riippuvuuksien tallentamiseen. Avaa bower.json ja lisää seuraavat rivit.

 "riippuvuudet": "polymeeri": "Polymeeri / polymeeri # ^ 1.0.0", "google-web-komponentit": "GoogleWebComponents / google-web-komponentit # ^ 1.0.0", "rautaelementit": " PolymerElements / iron-elements # ^ 1.0.0 "," paperielementit ":" PolymerElements / paperielementit # ^ 1.0.0 "," kulta-elementit ":" PolymerElements / gold-elements # ^ 1.0.0 " 

Tässä asennuksessa oletetaan, että aiomme käyttää kaikkia kunkin ryhmän elementtejä. Voit poistaa ne, joita et tarvitse, riippuvuusluettelosta. Kun riippuvuudet on asetettu, suorita asentaja komento asentaa riippuvuudet luettelosta.

Tämä prosessi voi kestää jonkin aikaa, koska siihen liittyy valtavan määrän tiedostojen tarttumista arkistoista. Kun olet tehnyt sen, sinun pitäisi löytää ne tallennettuina bower_components kansio.

Avaa HTML-tiedosto, jota haluat käyttää Polymer-komponenttien sisään. Asiakirjan pään sisällä, linkitä WebComponents.js kumpi on Polyfill selaimille, jotka eivät vielä tue WebComponentsia, ja tuoda komponenttitiedostot HTML-tuonnin avulla.

Tässä on esimerkki:

Tämä asetus antaa meille mahdollisuuden käyttää , , elementtejä.

vitriinit

Seuraavassa on joitakin web-sovelluksia, jotka käyttävät jo Google Polymeria.

Google

Google käytti Google Polymeria Google IO 2015 -sivulla; Google Fi, Googlen langaton palvelu liikenteenharjoittajille ja myyjille yhteistyössä; ja Google Music.

Mukautetut elementit

CustomElements on keskitin, jossa on Web-komponenttien avulla rakennettuja mukautettuja elementtejä. Se käyttää Paper-elementtiä sisältämään ja rakentamaan luettelon. Se tarjoaa myös kätevän reitin asentaa nämä elementit Bowerin ja NPM: n kautta.

Chrome Dev Editor

Chrome-sovellus koodin muokkaamiseen, joka toimii yllättävän hyvin. Tämä sovellus käyttää käyttöliittymän FAB-painiketta, Paperi-valikkoa ja Paperi-valintaikkunaa.

Polymer Designer

Työkalu web-sovelluksen rakentamiseen polymeerielementeillä vetämällä ja pudottamalla.

Päivittäinen varastossa ennuste

Pörssiraportti ja ennuste, joka on rakennettu kokonaan Polymer-elementeillä.

Polymer Mail

Gmailille tarkoitettu sähköpostiohjelmasovellus. Se näyttää hyvältä ja juoksevalta, vaikkakin valitettavasti se ei toimi täysin.

Lopulliset ajatukset

Polymeerillä on valtava laajuus, ja se saattaa viedä sinut jonkin aikaa tottua kaikkiin mukautettuihin elementteihin ja sen API: han. Web-komponentit ja polymeerit vaikuttavat kuitenkin varmasti web-sovellusten rakentamiseen. Pysy etukäteen joukosta lukemalla lisää Web-komponentteja - viittaukset löytyvät alla.

• Näytä demo
• Lataa lähde

Hyödyllisiä viitteitä

• Web-komponenttien tila
• Yksityiskohtainen esittely mukautettuihin elementteihin
• Google Polymerin virallinen blogi