„Google Polymer“ - kaip ji pakeis žiniatinklio programų kūrimo būdą

ir elementai, sukurti UI grotuvo valdiklius slaptai.

Šiandien, naudojant „Web Components“, taip pat galime įvardinti savo elementus. Mes galime sukurti tokį elementą kaip, įdėti „Twitter“ kanalą arba (galbūt) įterpti diagramą.

Be to, šie pasirinktiniai elementai gali turėti keletą priimtų priskirtų atributų. Kalbant apie elementą, nustatote atributą, vadinamą Vartotojo vardas kuri bus naudojama „Twitter“ naudotojo vardui nurodyti.

Pasirinktiniai elementai polimeruose

Polimerą sudaro daugybė elementų, kurie reikalauja (beveik) kiekvienos žiniatinklio programos. „Google“ šiuos elementus skirsto į grupes: geležies elementus, popieriaus elementus, „Google“ žiniatinklio komponentus, aukso elementus, neoninius elementus, platinos elementus ir molekules.

1. Geležies elementai

Geležies elementai yra pagrindinių elementų rinkinys. Šie pagrindiniai elementai yra tai, ką paprastai naudojame sukurti tinklalapį pvz., įvestis, forma ir vaizdas. Skirtumas yra Polymer prideda papildomų galių šiems elementams.

Visi šios grupės elementai yra geležies- pvz., prieš , kuris naudojamas atvaizdui atvaizduoti. The elementas buvo aprūpintas papildomais atributais, kurių negalime taikyti įprastu būdu elementas. Pavyzdžiui, galime pridėti išankstinis įkrovimas, išnyks, ir vietos žymeklis atributai:

Pirmiau pateiktas pavyzdys pirmiausia parodys vaizdo įrašo vietos žymeklį ir tada išnyks į faktinį vaizdą src kaip ji yra visiškai pakrauta, sklandaus vaizdo įkėlimo efekto.

2. Popieriaus elementai

The Popieriaus elementai yra Medžiagų dizaino elementų grupė. Medžiagų dizainas yra „Google“ dizaino kalba, kad naudotojų sąsaja ir patirtis „Google“ platformose taptų vizualiai nuoseklesnės tiek žiniatinklio, tiek „Android“ programose. Kai kurie elementai, kurie yra unikalūs medžiagos dizainui, yra popieriaus ir plaukiojančio veiksmo mygtukas (FAB).

Popierius

Popierius yra „Google“ metafora terpė, kuria grindžiamas turinys. Norėdami pridėti popierių su Polymer, mes naudojame elementas. Šis elementas turi 2 atributus:

• aukštis pakelti popierių, taigi pridedant šešėlį, kad sustiprintumėte aukštį
• animacinis pasikeis animacija, kai pasikeis popieriaus aukštis.

Plaukiojančio veiksmo mygtukas (FAB)

Plūduriuojančio veiksmo mygtukas (FAB) yra apvalus mygtukas su piktograma, plaukiojančiu ekrane, paprastai su išsiskiriančia spalva. „Google“ siūlo, kad šis mygtukas pasiektų dažnai prieinamą funkciją. Štai pavyzdys:

Šis kodo fragmentas prideda popieriaus medžiagą su vaizdu ir FAB.

Mes turėsime tokį rezultatą:

Turime nuotrauką su a “širdis” mygtukas, plaukiantis ant jo. Spustelėkite jį kaip ir nuotrauką, o mygtukas paspaudžia efektą, kad patvirtintų paspaudimą.

• Peržiūrėkite „Paper Demo“

3. „Google“ žiniatinklio komponentai

„Google“ žiniatinklio komponentai yra specialūs elementai, kurie susiduria su „Google“ API ir paslaugomis, pvz., „Google“ žemėlapiais, „YouTube“ ir „Google“ pašaru, kad būtų galima paminėti keletą. Šios grupės elementai vos kelios eilutės vengia sąveikos su „Google“ paslaugomis.

Toliau pateikiamas pavyzdys, rodantis „Google“ žemėlapį naudojant „ elementas.

  Tai yra „Googleplex“  

Kaip galite pirmiau, elementas platuma ir ilguma nurodyti vietą žemėlapyje. Taip pat galime lizdus rodyti tos vietos žemėlapio žymeklį kartu su tekstu, kuris bus rodomas paspaudus žymeklį.

• Peržiūrėkite žemėlapio demonstraciją

Norite rodyti „YouTube“ vaizdo įrašą? galite naudoti elementas.

Panašiai pritaikome išėjimą per atributus.

• Peržiūrėkite „YouTube“ demonstraciją

4. Aukso elementai

Auksiniai elementai yra elementai, specialiai sukurti el. prekybos programoms. Čia rasite elementą, rodantį kredito kortelę, el. Paštą, telefoną ir ZIP įvestį formato patvirtinimas užtikrinti tinkamą duomenų įvedimą ir saugumą. Čia yra vienas pavyzdys, kaip įtraukti „Visa“ kredito kortelės įvestį.

5. Kiti elementai

Likusius elementus sudaro neoniniai elementai animacijai ir specialiems efektams, platinos elementai, skirti neprisijungus ir stumti pranešimams, ir, galiausiai, molekulės, pakuotės trečiųjų šalių bibliotekoms.

Redaktoriaus pastaba: Šio rašymo metu „Neon Elements“, „Platinum Elements“ ir „Molecules“ vis dar nėra.

Integruoti polimerą

Norite naudoti „Polymer“ savo interneto kūrime? Štai kaip ją įdiegti ir integruoti į savo tinklalapius. Kadangi daugelis polimerų elementų pasikliauna viena kitą, geriausias būdas įdiegti Polimerą yra per Bower.

„Bower“ yra projekto priklausomybių valdytojas, kuris leidžia lengviau įdiegti scenarijus ar stilius, reikalingus projektui vykdyti. Išbandykite mūsų ankstesnį pranešimą apie tai, kaip lengvai įdiegti, atnaujinti ir pašalinti žiniatinklio bibliotekas.

Norėdami integruoti „Polymer“, paleiskite terminalą, tada eikite į savo projekto katalogą, darant prielaidą, kad sukūrėte jį. Tada paleiskite bower init komandą inicijuoti failą „bower.json“ į savo projektą, kuris bus naudojamas įrašyti projekto priklausomybes. Atidarykite bower.json ir pridėkite šias eilutes.

 "priklausomybės": "polimeras": "polimeras / polimeras # 1.0.0", "google-web-komponentai": "GoogleWebComponents / google-web-komponentai # ^ 1.0.0", "geležies elementai": " PolymerElements / iron-elements # ^ 1.0.0 "," popieriniai elementai ":" PolymerElements / paper-elements # ^ 1.0.0 "," gold-elements ":" PolymerElements / gold-elements # ^ 1.0.0 " 

Ši sąranka daro prielaidą, kad ketiname naudoti visus kiekvienos grupės elementus. Iš priklausomybių sąrašo galite pašalinti tai, ko jums nereikia. Nustatę priklausomybes, paleiskite „Bower“ įdiegimas komandą, kad įdiegtumėte sąraše esančias priklausomybes.

Šis procesas gali užtrukti, nes tai apima didžiulį rinkmenų rinkmenų gaudymą. Kai tai padarysite, juos reikia išsaugoti bower_components aplanką.

Atidarykite HTML failą, kurį norite naudoti „Polymer“ komponentuose. Dokumento galvutės viduje, susieti „WebComponents.js“ kuris yra polifilis naršyklėms, kurios dar nepalaiko „WebComponents“, ir importuoti komponentų failus naudojant „HTML Import“.

Štai pavyzdys:

Ši sąranka leis mums naudoti , , elementus.

Vitrinos

Štai keletas žiniatinklio programų, kurios jau naudoja „Google Polymer“.

„Google“

„Google“ naudojo „Google Polymer“ „Google IO 2015“ tinklalapyje; „Google Fi“, „Google“ belaidžio ryšio paslauga vežėjams ir pardavėjams partnerystėje; ir „Google“ muzika.

Pasirinktiniai elementai

„CustomElements“ yra centras, kuriame galima rasti tinkintus elementus, sukurtus naudojant „Web Components“. Jame naudojamas „Paper“ elementas, kad būtų įtrauktas ir sudarytas sąrašas. Jis taip pat suteikia patogų kelią įdiegti šiuos elementus per „Bower“ ir „NPM“.

„Chrome Dev“ redaktorius

„Chrome“ programa kodų redagavimui, kuri puikiai veikia. Ši programa naudoja vartotojo sąsajos mygtuką FAB, popieriaus meniu ir popieriaus dialogo elementus.

Polimerų dizaineris

Priemonė, skirta kurti žiniatinklio programą su polimerų elementais, naudojant „drag-and-drop“ sąsają.

Dienos atsargų prognozė

Vertybinių popierių biržos ataskaita ir prognozė, sukonstruota tik iš polimerų elementų.

„Polymer Mail“

„Gmail“ el. Pašto programos programa. Jis atrodo gražiai ir sklandžiai, nors, deja, jis nevisiškai veikia.

Galutinės mintys

Polimeras turi milžinišką apimtį ir gali užtrukti, kol pripras prie visų priskirtų elementų ir jo API. Nepaisant to, žiniatinklio komponentai ir polimerai, be abejo, turės įtakos žiniatinklio programų kūrimui. Jei norite daugiau sužinoti apie žiniatinklio komponentus, žiūrėkite daugiau minios - nuorodos pateiktos žemiau.

• Peržiūrėti demonstraciją
• Atsisiųsti šaltinį

Naudingos nuorodos

• Žiniatinklio komponentų būklė
• Išsamus įvadas į individualius elementus
• Oficialus „Google Polymer“ tinklaraštis