Google Polymer - Hvordan det vil ændre vejen Web Apps er bygget

og elementer, der opbygger brugergrænsefladen, styrer i hemmelighed.

I dag, med Web Components, kan vi også navngive vores egne elementer. Vi kan bygge et element som, at integrere et Twitter-feed eller (måske) at indlejre et diagram.

Desuden kan disse brugerdefinerede elementer også have et par accepterede brugerdefinerede attributter. Med hensyn til element, du angiver en attribut kaldet brugernavn som vil blive brugt til at angive Twitter brugernavn.

Custom Elements i Polymer

Polymer kommer med en flok elementer, der tegner sig for (næsten) alle webapplikationer behov. Google opdeler disse elementer i grupper: Jernelementer, Papirelementer, Google Webkomponenter, Guldelementer, Neonelementer, Platinelementer og Molekyler.

1. Jernelementer

Jernelementer er en samling af grundlæggende elementer. Disse grundlæggende elementer er det, vi normalt bruger til opbyg en webside såsom en indgang, form og billede. Forskellen er Polymer tilføjer nogle ekstra kræfter til disse elementer.

Alle elementer i denne gruppe er jern- præfiks, for eksempel , som bruges til at vise et billede. Det elementet er udstyret med nogle ekstra attributter, som vi ikke kan anvende i den regelmæssige element. Vi kan f.eks. Tilføje preload, falme, og pladsholder egenskaber:

Ovennævnte eksempel vil først vise billedholderen og derefter falde ind i det egentlige billede i src da den er fuldt lastet, udfører en jævn billedbelastningseffekt.

2. Papirelementer

Det Papirelementer er en gruppe af Material Design elementer. Material Design er Google designsprog, der gør brugergrænseflade og oplevelse på tværs af Google-platforme, både web- og Android-apps mere visuelt ensartede. Nogle elementer, der er unikke for Material Design, er Paper and Floating Action Button (FAB).

Papir

Papir er Googles metafor for det medium der ligger til grund for indholdet. For at tilføje et papir med Polymer bruger vi element. Dette element tager 2 attributter:

• elevation at løfte papiret og dermed tilføje en skygge for at forstærke højden
• animeret vil anvende animation som ændring af papirhøjde.

Flydende handlingsknap (FAB)

Den flydende handlingsknap (FAB) er en cirkulær knap med et ikon, der flyder på skærmen, normalt med en stand-out farve. Google foreslår, at denne knap har en ofte tilgængelig funktion. Her er et eksempel:

Følgende kodestykke tilføjer et papirmateriale med et billede og en FAB.

Vi har følgende resultat:

Vi har et billede med a “hjerte” knappen flyder oven på den. Klik på det for Ligesom billedet, da knappen giver en krusningseffekt for at bekræfte kliket.

• Se papirdemonoen

3. Google Web Components

Google Web Components er særlige elementer, der håndterer Google API'er og tjenester som Google Maps, Youtube, samt Google Feed, for at nævne nogle få. Elementer i denne gruppe Gør interaktion med Google-tjenester kun få linjer væk.

Følgende er et eksempel for at vise et Google Map ved hjælp af element.

  Dette er Googleplex  

Som du kan ovenfor, er element tager Breddegrad og længde at angive placeringen på kortet. Vi kan også rede for at vise en kortmarkør for den pågældende placering sammen med en tekst, der vises ved at klikke på markøren.

• Se kortdemoen

Vil du vise en Youtube video? du kan bruge element.

Tilsvarende tilpasser vi output via attributter.

• Se Youtube Demo

4. Guldelementer

Guldelementerne er de elementer designet specielt til e-handels apps. Her finder du element til at vise kreditkort, e-mail, telefon og ZIP-indgang, som alle er udstyret med format validering for at sikre korrekt dataindtastning og sikkerhed. Her er et eksempel for at tilføje Visa kreditkort input.

5. Andre elementer

De resterende elementer omfatter Neon elementer til animation og special effects, Platinum elementer til offline og push notifikationer og til sidst Molecules, wrappers til tredjeparts biblioteker.

Redaktørens note: På tidspunktet for denne skrivning er Neon Elements, Platinum Elements og Molecules stadig ikke tilgængelige.

Integrerende polymer

Vil du bruge Polymer i din webudvikling? Sådan installeres og integreres det i dine websider. Da de fleste polymerelementer er afhængige af hinanden, er den bedste måde at installere Polymer på via Bower.

Bower er en projektafhængighedsadministrator, der gør det nemmere at installere scripts eller stilarter, der kræves for at køre projektet. Tjek vores tidligere indlæg om, hvordan du nemt kan installere, opdatere og fjerne webbiblioteker med Bower.

For at integrere Polymer skal du starte Terminal og derefter navigere til din projektmappe, forudsat at du har oprettet en. Kør så bower init kommandoen for at indlede bower.json-filen i dit projekt, der vil blive brugt til at registrere projektets afhængigheder. Åben bower.json og tilføj følgende linjer.

 "afhængigheder": "polymer": "Polymer / polymer # ^ 1.0.0", "google-webkomponenter": "GoogleWebComponents / google-webkomponenter # ^ 1.0.0", "jernelementer": " PolymerElements / jernelementer # ^ 1.0.0 "," papirelementer ":" PolymerElements / paper-elements # ^ 1.0.0 "," guldelementer ":" PolymerElements / gold-elements # ^ 1.0.0 " 

Denne opsætning går ud fra, at vi skal bruge alle elementerne fra hver gruppe. Du kan fjerne det, du ikke behøver fra afhængighedslisten. Når afhængighederne er sat, skal du køre bower install kommandoen for at installere afhængighederne på listen.

Denne proces kan tage et stykke tid, da det indebærer at tage fat på en stor mængde filer fra lagrene. Når du er færdig, skal du finde dem gemt i bower_components folder.

Åbn den HTML-fil, du vil bruge Polymer-komponenterne i. Inden for dokumenthovedet, link webcomponents.js hvilket er polyfill til browsere, der ikke understøtter WebComponents endnu, og importer komponentfilerne ved hjælp af HTML Import.

Her er et eksempel:

Denne opsætning gør det muligt for os at bruge , , elementer.

showcases

Her er nogle af de webapps, der allerede bruger Google Polymer.

Google

Google brugte Google Polymer på Google IO 2015 websiden; Google Fi, Googles trådløse service til operatører og leverandører i partnerskab; og Google Music.

Brugerdefinerede elementer

CustomElements er et knudepunkt, hvor du kan finde brugerdefinerede elementer bygget med webkomponenter. Det gør brug af papirelementet til at indeholde og opbygge listen. Det giver også en bekvem rute til at installere disse elementer gennem Bower og NPM.

Chrome Dev Editor

Et Chrome-program til kode redigering, der virker overraskende godt. Denne app bruger FAB-knappen, Papirmenuen og Papirdialogelementerne i brugergrænsefladen.

Polymer Designer

Et værktøj til at bygge webapplikation med polymerelementer ved hjælp af en træk-og-slip-grænseflade.

Daglig lagerprognose

En børsrapport og prognose bygget udelukkende med polymerelementer.

Polymer Mail

En e-mail-app for Gmail. Det ser godt ud og flydende, selvom det desværre ikke fungerer fuldt ud.

Afsluttende tanker

Polymer har et enormt omfang, og det kan tage et stykke tid at vænne sig til alle de brugerdefinerede elementer samt dets API. Ikke desto mindre vil Web Components og Polymer sikkert påvirke den måde, hvorpå vi bygger webapplikationer. Hold dig foran publikum ved at læse mere om Web Components - referencer findes nedenfor.

• Se Demo
• Download kilde

Nyttige referencer

• Statens webkomponenter
• En detaljeret introduktion til brugerdefinerede elementer
• Offentlig Blog af Google Polymer