Google Polymer - kuidas see muudaks veebirakenduste ehitamist

ja elemendid, mis loovad kasutajaliidese mängija kontrolli salaja.

Täna, koos veebikomponentidega, saame nimetada ka oma elemente. Me võime ehitada sellise elemendi nagu, Twitteri toite või (võib-olla) diagrammi sisestamiseks.

Lisaks võib neil kohandatud elementidel olla paar aktsepteeritud kohandatud atribuuti. Seoses elemendi, määrate kutsutud atribuudi kasutajanimi mida kasutatakse Twitteri kasutajanime määramiseks.

Polümeeri kohandatud elemendid

Polümeeril on hulk elemente, mis moodustavad (peaaegu) iga veebirakenduse vajaduse. Google jagab need elemendid rühmadesse: raudelemendid, paberielemendid, Google'i veebikomponendid, kuldelemendid, neoonelemendid, plaatinaelemendid ja molekulid.

1. Raudelemendid

Iron Elements on põhielementide kogum. Need põhielemendid on see, mida me tavaliselt kasutame ehitada veebileht näiteks sisend, vorm ja pilt. Erinevus on, et Polymer lisab neile elementidele lisavõimalusi.

Kõik selle grupi elemendid on raud- näiteks eesliide , mida kasutatakse pildi kuvamiseks. The element on varustatud mõne täiendava atribuudiga, mida me ei saa tavapärasel juhul rakendada element. Me võime näiteks lisada eellaadimine, tuhmuma, ja kohahoidja atribuudid:

Ülaltoodud näide näitab kõigepealt kujutise kohatäitjat ja seejärel kaob tegelikus pildis src kuna see on täielikult laetud, sujuva pildi laadimise efekti.

2. Paberi elemendid

The Paberi elemendid on grupp Material Design elemente. Materjali disain on Google'i disainikeel, mis muudab kasutajaliidese ja Google'i platvormide kogemused nii veebi- kui ka Android-rakenduste visuaalsemaks. Mõned elemendid, mis on ainulaadsed materjali kujundusele, on paberi ja ujuva tegevuse nupp (FAB).

Paber

Paber on Google'i metafoor sisu, mis on sisu aluseks. Polümeeriga paberi lisamiseks kasutame element. See element võtab 2 atribuuti:

• kõrgendus paberi tõstmiseks, lisades seega varju kõrguse tugevdamiseks
• animeeritud rakendab animatsiooni, kui paberi kõrgus muutub.

Ujuva tegevuse nupp (FAB)

Ujuva toiminguga nupp (FAB) on ikooniga ringikujuline nupp, mis ujub ekraanil, tavaliselt värvilise värviga. Google soovitab, et see nupp kannaks sageli kasutatavat funktsiooni. Siin on näide:

Järgmine koodilõik lisab pildi ja FAB-iga paberimaterjali.

Meil on järgmine tulemus:

Meil on foto a “süda” nupp, mis ujub selle peal. Klõpsa sellel nagu pildil, kui nupp annab klõpsamise kinnitamiseks ripp-efekti.

• Vaadake raamatut Demo

3. Google'i veebikomponendid

Google'i veebikomponendid on spetsiaalsed elemendid, mis hakkavad toime tulema Google'i API-de ja teenustega, nagu Google Maps, Youtube ja Google Feed, et nimetada vaid mõningaid. Selle grupi elemendid tehke Google'i teenustega suhtlemine vaid mõne rea kaugusel.

Järgnev on näide Google Mapsi näitamiseks element.

  See on Googleplex  

Nagu eespool, saate element võtab laiuskraad ja pikkuskraad asukoha määramiseks kaardil. Me võime ka pesa näidata selle asukoha kaardimarkerit koos tekstiga, mis ilmub markerile klõpsamisel.

• Vaadake kaarti Demo

Kas soovite näidata Youtube'i videot? saate kasutada element.

Samuti kohandame väljundit atribuutide kaudu.

• Vaadake YouTube'i demot

4. Kuldsed elemendid

Kuldsed elemendid on elemendid, mis on mõeldud spetsiaalselt e-kaubanduse rakendustele. Siit leiate elemendi, mis näitab krediitkaarti, e-posti, telefoni ja ZIP sisendit, mis on kõik varustatud vormingu valideerimine tagada andmete õige sisestamine ja turvalisus. Siin on üks näide Visa krediitkaardi sisestamise kohta.

5. Muud elemendid

Ülejäänud elementide hulka kuuluvad animatsiooni ja eriefektide neoonelemendid, offline ja push-teatiste plaatinaelemendid ja lõpuks kolmanda osapoole raamatukogude molekulid, ümbrised..

Toimetaja märkus: Selle kirjutamise ajal ei ole Neon Elements, Platinum Elements ja molekulid ikka veel saadaval.

Polümeeri integreerimine

Kas soovite oma veebiarenduses kasutada polümeeri? Siin on, kuidas seda oma veebilehtedesse installida ja integreerida. Kuna enamik polümeerielemente tuginevad üksteisele, on parim viis Polymeri paigaldamiseks läbi Boweri.

Bower on projekti sõltuvuste haldur, mis lihtsustab projekti käivitamiseks vajalike skriptide või stiilide paigaldamist. Vaadake meie varasemat postitust veebiraamatukogude installimise, uuendamise ja eemaldamise kohta Boweriga.

Polümeeri integreerimiseks käivitage Terminal, seejärel navigeerige oma projekti kataloogi, eeldades, et olete selle loonud. Seejärel käivitage bower init käsk algatada bower.json faili oma projektis, mida kasutatakse projekti sõltuvuse salvestamiseks. Avage bower.json ja lisage järgmised read.

 "sõltuvused": "polümeer": "polümeer / polümeer # ^ 1.0.0", "google-veebikomponendid": "GoogleWebComponents / google-web-komponendid # ^ 1.0.0", "raudelemendid": " PolymerElements / iron-elements # ^ 1.0.0 "," paberielemendid ":" PolymerElements / paper-elements # ^ 1.0.0 "," kuldelemendid ":" PolymerElements / gold-elements # ^ 1.0.0 " 

See seadistus eeldab, et me kasutame kõiki grupi elemente. Sõltuvuste loendist võite eemaldada, mida te ei vaja. Kuna sõltuvused on seatud, käivitage bower install käsku loendis olevate sõltuvuste installimiseks.

See protsess võib võtta aega, kuna see hõlmab suurte failide kogumist hoidlatest. Kui olete seda teinud, peaksite need need salvestama bower_components kausta.

Avage HTML-fail, mida soovite kasutada polümeerikomponentidena. Dokumendi pea, linkige WebComponents.js mis on polüfill brauseritele, mis ei toeta veel WebComponents'i, ja importige komponendifailid kasutades HTML Import.

Siin on näide:

See seadistus võimaldab meil kasutada , , elemente.

Vitriinid

Siin on mõned veebirakendused, mis juba kasutavad Google Polymerit.

Google

Google kasutas Google Polymerit Google IO 2015 veebilehel; Google Fi, Google'i traadita teenus partneritele ja müüjatele partnerluses; ja Google Music.

Kohandatud elemendid

CustomElements on jaotur, kus saab leida veebikomponentidega ehitatud kohandatud elemente. Nimekirja kasutamisel ja koostamisel kasutatakse seda paberi elemendiga. Samuti pakub see mugavat marsruuti nende elementide paigaldamiseks Boweri ja NPM-i kaudu.

Chrome Dev'i redaktor

Chrome'i rakendus koodide redigeerimiseks, mis töötab üllatavalt hästi. See rakendus kasutab kasutajaliideses nuppu FAB, paberi menüü ja paberi dialoogi elemendid.

Polümeeri disainer

Vahend, mille abil saab veebipõhise rakenduse ehitada koos polümeerielementidega, kasutades lohistamis-liidest.

Päevase varu prognoos

Börsiteade ja prognoos, mis on ehitatud täielikult Polümeeri elementidega.

Polymer Mail

Gmaili e-posti kliendirakendus. Tundub kena ja vedel, kuigi kahjuks ei ole see täielikult toimiv.

Lõplikud mõtted

Polümeeril on tohutu ulatus ja see võib aega võtta, et harjuda kõigi kohandatud elementidega ja selle API-ga. Sellegipoolest mõjutavad veebikomponendid ja polümeer kindlasti veebirakenduste ehitamise viisi. Olge rahvahulga ees, lugedes rohkem veebikomponentide kohta - viited leiate allpool.

• Kuva demo
• Allalaadimise allikas

Kasulikud viited

• Veebikomponentide olek
• Üksikasjalik sissejuhatus kohandatud elementidesse
• Google Polymeri ametlik blogi