Google Polymer - Hvordan det vil endre måten Web Apps er bygget

Videre kan disse egendefinerte elementene også ha et par aksepterte egendefinerte attributter. I forhold til element, angir du et attributt som heter username som vil bli brukt til å spesifisere Twitter brukernavn.

Egendefinerte elementer i polymer

Polymer kommer med en mengde elementer som står for (nesten) alle webapplikasjoner behov. Google deler disse elementene i grupper: Jernelementer, Papirelementer, Google Webkomponenter, Gullelementer, Neonelementer, Platinumelementer og Molekyler.

1. Jernelementer

Jernelementer er en samling av grunnleggende elementer. Disse grunnleggende elementene er det vi vanligvis bruker til å bygge en nettside, for eksempel en inngang, skjema og bilde. Forskjellen er Polymer legger til noen ekstra krefter til disse elementene.

Alle elementene i denne gruppen er for eksempel prefixet , som brukes til å vise et bilde. De elementet har blitt utstyrt med noen ekstra attributter som vi ikke kan bruke i det vanlige element. Vi kan for eksempel legge til preload, fade og placeholder :

Eksemplet ovenfor vil først vise bildeplassholderen og deretter falme inn i selve bildet i src da det er fulllastet, og utfører en jevn bildepåvirkning .

2. Papirelementer

Papirelementene er en gruppe av Material Design-elementer. Material Design er Google design språk for å gjøre brukergrensesnitt og erfaring på tvers av Google-plattformer både web og Android apps mer visuelt konsekvente. Noen elementer som er unike for Material Design er Paper and Floating Action Button (FAB).

Papir

Papir er Googles metafor for mediet som ligger til grunn for innholdet . For å legge til et papir med Polymer bruker vi element. Dette elementet tar 2 attributter:

• elevation å løfte papiret, og dermed legge til en skygge for å forsterke høyden
• animated vil bruke animasjon som endring av papirhøyde.

Flytende handlingsknapp (FAB)

Den flytende handlingsknappen (FAB) er en sirkulær knapp med et ikon som flyter på skjermen, vanligvis med en stand-out-farge. Google foreslår at denne knappen har en ofte tilgjengelig funksjon. Her er et eksempel:

Følgende kodestykke legger til et papirmateriale med et bilde og en FAB.

Vi får følgende resultat:

• Se papirdemonoen

3. Google Webkomponenter

Google Web Components er spesielle elementer som håndterer Google APIs og tjenester som Google Maps, Youtube, samt Google Feed, for å nevne noen. Elementer i denne gruppen gjør samhandling med Googles tjenester bare noen få linjer unna .

Følgende er et eksempel for å vise et Google Map ved hjelp av element.

 Dette er Googleplex 

Som du kan over, er det elementet tar latitude og longitude å spesifisere plasseringen på kartet. Vi kan også rede for å vise en kartmarkør for den plasseringen sammen med en tekst som vil vises ved å klikke på markøren.

• Se kartdemoen

Vil du vise en Youtube-video? du kan bruke element.

På samme måte tilpasser vi utdataene gjennom attributter.

• Se Youtube-demonstrasjonen

4. Gullelementer

Gullelementene er elementene som er designet spesielt for e-handelsapps . Her finner du element for å vise kredittkort, e-post, telefon og ZIP-inngang som alle har blitt utstyrt med formatvalidering for å sikre korrekt datainngang og sikkerhet. Her er et eksempel for å legge til Visa-kredittkortinngang.

5. Andre elementer

De gjenværende elementene inkluderer Neon-elementer for animasjon og spesialeffekter, Platinum-elementer for offline og push notifications og til slutt Molekyler, wrappers for tredjepartsbiblioteker.

Redaktørens merknad: På tidspunktet for denne skrivingen er Neon Elements, Platinum Elements og Molecules fortsatt ikke tilgjengelig.

Integrerende polymer

Vil du bruke Polymer i din webutvikling? Slik installerer du og integrerer den i websidene dine. Som de fleste polymerelementer stole på hverandre, er den beste måten å installere Polymer på, gjennom Bower.

Bower er en prosjektberegner som gjør det enklere å installere skript eller stiler som kreves for å kjøre prosjektet. Ta en titt på vårt tidligere innlegg om hvordan du enkelt installerer, oppdaterer og fjerner webbibliotek med Bower.

For å integrere Polymer, start Terminal og deretter navigere til prosjektkatalogen din, forutsatt at du har opprettet en. Kjør deretter bower init kommandoen for å starte bower.json-filen i prosjektet ditt som vil bli brukt til å registrere prosjektets avhengigheter. Åpne bower.json og legg til følgende linjer.

 "avhengigheter": {"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 ", " gullelementer ":" PolymerElements / gold-elements # ^ 1.0.0 "} 

Dette oppsettet forutsetter at vi skal bruke alle elementene fra hver gruppe. Du kan fjerne det du ikke trenger fra avhengighetslisten. Som avhengighetene er satt, kjør kommandoen bower install å installere avhengighetene på listen.

Her er et eksempel:

Dette oppsettet gjør det mulig for oss å bruke , , elementer.

Utstilling

Her er noen av webappene som allerede bruker Google Polymer.

Google

Google brukte Google Polymer på Google IO 2015 websiden; Google Fi, Googles trådløse tjeneste for leverandører og leverandører i partnerskap og Google Musikk.

Egendefinerte elementer

CustomElements er et knutepunkt hvor du kan finne egendefinerte elementer bygget med webkomponenter. Den bruker papirelementet til å inneholde og bygge listen. Det gir også en praktisk rute for å installere disse elementene gjennom Bower og NPM.

Et Chrome-program for kodedigering som fungerer overraskende bra. Denne appen bruker FAB-knappen, Papirmenyen og Papirdialogelementene i brukergrensesnittet.

Et verktøy for å bygge webapplikasjon med polymerelementer ved hjelp av et dra-og-slipp-grensesnitt.

En børsrapport og prognose bygget helt med polymerelementer.

En e-postklientapp for Gmail. Det ser fint og flytende ut, men det er dessverre ikke fullt fungerende.

Polymer har et enormt omfang, og det kan ta deg en stund å bli vant til alle de egendefinerte elementene, så vel som API-en. Ikke desto mindre vil Web Components og Polymer sikkert påvirke måten vi bygger webapplikasjoner på. Hold deg foran publikum ved å lese mer om webkomponenter - referanser finner du nedenfor.

• Se demo
• Last ned kilde

Nyttige referanser

• Statens webkomponenter
• En detaljert introduksjon til egendefinerte elementer
• Offisiell blogg av Google Polymer

Slik tilpasser du "Howdy" I WordPress Admin Bar [Quick Tip]

Hver WordPress-bruker bør være kjent med "Howdy" -meldingen som vises i administrasjonslinjen når de er logget inn. Problemet med "Howdy" er at det er et uformelt ord og høres veldig uprofesjonelt. Kanskje av en eller annen grunn får klienten din tilgang til WordPress Dashboard. Hvi

(Tekniske og design tips)

Prototyping Verktøy og praksis som gir maksimale fordeler

Å ta en prototyping tilnærming til et app eller et nettsted design prosjekt gir med seg en rekke fordeler. Peer / Client vurderinger og tilbakemelding, sammen med testing og validering aktiviteter utført tidlig, kan bidra sterkt til å skape en svært vellykket brukeropplevelse.Fordelene ved prototyping kan maksimeres ved å velge og bruke de beste verktøyene som er tilgjengelige. Til d

(Tekniske og design tips)