Google Polymer - Hur det kommer att ändra sättet Web Apps är byggda

och element som bygger UI-spelaren kontrollerar i hemlighet.

Idag, med webbkomponenter, kan vi även namnge våra egna element. Vi kan bygga ett element som, att bädda in ett Twitter-flöde eller (kanske) att bädda in ett diagram.

Dessutom kan dessa anpassade element också ha ett par accepterade anpassade attribut. När det gäller element, du anger ett attribut som heter Användarnamn som kommer att användas för att ange Twitter användarnamnet.

Custom Elements i Polymer

Polymer levereras med en massa element som står för (nästan) varje webapplikationsbehov. Google delar dessa element i grupper: Järnelement, papperselement, Google Webkomponenter, guldelement, neonelement, platinaelement och molekyler.

1. Järnelement

Järnelement är en samling grundläggande element. Dessa grundläggande element är det vi brukar använda för bygga en webbsida som en inmatning, form och bild. Skillnaden är Polymer lägger till några extra befogenheter till dessa element.

Alla element i denna grupp är järn- prefixed, till exempel , som används för att visa en bild. De elementet har utrustats med några extra attribut som vi inte kan använda i det vanliga element. Vi kan till exempel lägga till förbelastning, blekna, och platshållare attribut:

Ovanstående exempel kommer först att visa bildplatshållaren och sedan blekna in i den faktiska bilden i src som det är fullt laddat, utför en jämn bildladdningseffekt.

2. Papper Element

De Papperselement är en grupp av materialdesignelement. Material Design är Googles design språk för att skapa användargränssnitt och erfarenhet över Google-plattformar, både webb- och Android-appar är mer visuellt konsekventa. Vissa element som är unika för materialdesign är Pappers- och Flytande Åtgärdsknapp (FAB).

Papper

Papper är Googles metafor för mediet som ligger till grund för innehållet. För att lägga till ett papper med Polymer använder vi element. Detta element tar 2 attribut:

• elevation att lyfta papperet och därmed lägga till en skugga för att förstärka höjden
• animerad kommer att tillämpa animering som ändring av pappershöjd.

Floating Action Button (FAB)

Den flytande åtgärdsknappen (FAB) är en cirkulär knapp med en ikon, som flyter på skärmen, vanligtvis med en utstansningsfärg. Google föreslår att den här knappen har en funktion som är ofta åtkomlig. Här är ett exempel:

Följande kodbit lägger till ett pappersmaterial med en bild och en FAB.

Vi kommer att få följande resultat:

Vi har ett foto med a “hjärta” knappen flyter ovanpå den. Klicka på den för att Gilla fotot, då knappen ger bort en krusningseffekt för att bekräfta klicket.

• Visa pappersdemo

3. Google Webbkomponenter

Googles webbkomponenter är specialelement som hanterar Googles API och tjänster som Google Maps, Youtube, liksom Google Feed, för att nämna några. Element i den här gruppen göra samspel med Googles tjänster bara några rader bort.

Följande är ett exempel för att visa en Google Map med hjälp av element.

  Det här är Googleplex  

Som du kan ovan, den elementet tar latitud och longitud för att ange platsen på kartan. Vi kan också bo för att visa en kartmarkör för den platsen tillsammans med en text som kommer att visas när du klickar på markören.

• Visa kartdemoen

Vill du visa en Youtube-video? du kan använda element.

På samma sätt anpassar vi utdata genom attribut.

• Visa Youtube Demo

4. Guldelement

Guldelementen är element som är utformade speciellt för e-handelsapp. Här hittar du element för att visa kreditkort, e-post, telefon och ZIP-inmatning som alla har utrustats med formatvalidering för att säkerställa korrekt dataingång och säkerhet. Här är ett exempel för att lägga till Visa-kreditkortsinmatning.

5. Övriga element

De återstående elementen inkluderar Neon-element för animering och specialeffekter, Platinum-element för offline och push-meddelanden och till sist Molecules, wrappers för tredjepartsbibliotek.

Redaktörens anmärkning: Vid tidpunkten för detta skrivande är Neon Elements, Platinum Elements och Molecules fortfarande inte tillgängliga.

Integrerande polymer

Vill du använda Polymer i din webbutveckling? Så här installerar du och integrerar den i dina webbsidor. Eftersom de flesta polymerelementen är beroende av varandra, är det bästa sättet att installera Polymer genom Bower.

Bower är en projektberoende som gör det enklare att installera skript eller stilar som krävs för att köra projektet. Kolla in vårt tidigare inlägg om hur du enkelt installerar, uppdaterar och tar bort webbbibliotek med Bower.

För att integrera Polymer, starta Terminal och sedan navigera till din projektkatalog, förutsatt att du har skapat en. Kör sedan bower init kommandot att initiera bower.json-filen till ditt projekt som kommer att användas för att registrera projektberoende. Öppna bower.json och lägg till följande rader.

 "beroenden": "polymer": "Polymer / polymer # ^ 1.0.0", "google-webkomponenter": "GoogleWebComponents / google-webkomponenter # ^ 1.0.0", "järnelement" PolymerElements / järn-element # ^ 1.0.0 "," papperselement ":" PolymerElements / paper-elements # ^ 1.0.0 "," guldelement ":" PolymerElements / gold-elements # ^ 1.0.0 " 

Denna inställning förutsätter att vi ska använda alla element från varje grupp. Du kan ta bort vad du inte behöver från listan över beroende. När beroendet är inställt kör du bower installation kommandot för att installera beroenden i listan.

Denna process kan ta en stund eftersom det innebär att ta en stor mängd filer från förråd. När du är klar ska du hitta dem sparade i bower_components mapp.

Öppna den HTML-fil du vill använda Polymer-komponenterna i. Inom dokumenthuvudet, länka WebComponents.js vilken är polyfill för webbläsare som inte stöder WebComponents än, och importera komponentfilerna använder HTML Import.

Här är ett exempel:

Med denna inställning kan vi använda , , element.

montrar

Här är några av de webbapps som redan använder Google Polymer.

Google

Google använde Google Polymer på Google IO 2015-webbsidan; Google Fi, Googles trådlösa tjänst för operatörer och leverantörer i partnerskap och Google Music.

Anpassade element

CustomElements är ett nav där du kan hitta anpassade element som är byggda med webbkomponenter. Den använder papperselementet för att innehålla och bygga listan. Det ger också en bekväm väg att installera dessa element genom Bower och NPM.

Chrome Dev Editor

Ett Chrome-program för kodredigering som fungerar överraskande bra. Den här appen använder FAB-knappen, Pappersmenyn och Pappersdialogelement i användargränssnittet.

Polymer Designer

Ett verktyg för att bygga webbapplikationer med polymerelement med ett drag-och-släpp-gränssnitt.

Daglig Aktieprognos

En börsrapport och prognos byggd helt med polymerelement.

Polymer Mail

En e-postklientapp för Gmail. Det ser trevligt och vätskigt ut, men det är tyvärr inte fullt fungerande.

Slutgiltiga tankar

Polymer har ett enormt omfång, och det kan ta ett tag att vänja sig vid alla anpassade element samt API: n. Webbkomponenter och Polymer kommer dock säkert att påverka hur vi bygger webbapplikationer. Fortsätt för publiken genom att läsa mer om webbkomponenter - referenser finns nedan.

• Visa demo
• Hämta källa

Användbara referenser

• Webbstatens tillstånd
• En detaljerad introduktion till anpassade delar
• Officiell blogg för Google Polymer