Lær Vuetify på 5 minutter

Velkommen til en fløjte-stop rundvisning i Vuetify - et populært komponentbibliotek for Vue.js. Det giver dig mulighed for at oprette attraktive, tilgængelige apps med 80 elementer klar til brug fra get-go, plus det giver dig mulighed for at tilpasse elementer til et skræddersyet design.

I de næste fem minutter viser jeg dig følgende varme Vuetify-elementer:

  • Typografi
  • Afstand
  • Knapper
  • Navigation
  • Gitter
  • Kort

Og i slutningen af ​​denne artikel vil du føle dig sikker på at lave fantastiske apps med blot et par linjer kode.

Mens du læser, gå over til Scrimbas 2-timers Vuetify-kursus for at finde ud af mere og udforske koden i platformens interaktive legeplads. Derudover kan du teste dine nye færdigheder med nogle interaktive kodningsudfordringer. Lad os komme igang!

Oprettelse af et Vuetify-objekt

For at bruge Vuetify trækker vi først Vue og Vuetify fra deres CDNS.

Dette giver os mulighed for at instantiere en Vue-applikation med en Vuetify-egenskab og oprette et nyt Vuetify-objekt:

new Vue({ el: '#app', vuetify: new Vuetify({}), data: { message: 'Using Single File Components' } }); 

Klik igennem for at se dette i detaljer.

Typografi

Vuetify typografi

Klik på billedet for at gå til rollebesætningen.

Vuetify giver masser af muligheder for at skabe fantastisk typografi, fra overskrifter i forskellige størrelser til titler, undertekster og brødtekst:

Heading 1

Heading 2

Heading 3

Title

Subtitle

Body

Ændring af tekstfarve og baggrundsfarve er også let med Vuetify. For baggrundsfarven skal du blot tilføje navnet på den ønskede farve til elementets klasse. For tekstfarve skal du blot tilføje farvenavnet efterfulgt af --text.

Dette fungerer i omkring 20 standardfarver og kan tilpasses ved hjælp af ledsagende klasser som lightenog darken.

Heading 1

Vuetify tilbyder også klasser for at ændre skrifttypevægt og -stil samt afkorte og omdanne tekst. Gå over til rollebesætningen for at finde ud af mere.

Afstand

Enhver, der nogensinde har brugt CSS, ved, at margener og polstring kan være vanskelig. Ikke med Vuetify! For at tilføje og justere afstanden mellem elementer skal du blot bruge klasser med følgende forkortelser:

m = margen

p = polstring

t = top

r = højre

b = bund

l = venstre

x = højre + venstre

y = top + bund

a = alle

Afstandsstørrelse justeres ved hjælp af tallene 1 til 12, der svarer til fire pixel-intervaller. For eksempel ml-5angiver en venstre margen på 20 pixels.

Spacing

Centreringselementer er også let med Vuetify. Sæt simpelthen elementet i en container, der spænder over siden, og giv det derefter en højre og venstre margen på auto:

Spacing

Det er ikke slutningen på Vuetifys praktiske tip og tricks til elementafstand. Klik videre til rollebesætningen for at se mere!

Knapper

Vuetify tilbyder snesevis af muligheder for styling af knapper, herunder regelmæssige klikbare knapper, konturknapper med færdige ikoner og kun ikon-knapper.

Fortsæt læsning for at se nogle af de tilgængelige muligheder lige ud af feltet, eller klik igennem for at se, hvordan du tilpasser knapper.

Stor konturknap:

Stor konturknap

Submit 

Knap med ikon:

Knap med ikon

 mdi-pencil Edit  

Knap til ikon for flydende handling:

Flydende handlingsknap med ikon

 mdi-plus  

Navigation

Vuetify-navigationslinje

Klik på billedet for at kaste rollen.

De to vigtigste navigationsmuligheder, der er tilgængelige i Vuetify, er og .

Selvom de to elementer i nogen grad kan udskiftes, er det designet til brug som et websteds hovednavigation og indeholder funktioner såsom rulleanimationer og en række rekvisitter og muligheder.

er en mindre, mere alsidig komponent, der er designet til at give funktionalitet til andre områder af en app. For eksempel kunne det bruges til de grundlæggende redigeringsfunktioner i en lille teksteditor.

Begge navigationselementer håndterer rullelister i listen og navigerer automatisk ikoner og knapper til størrelse.

Gitter

Vuetify har et indbygget gittersystem, der gør dimensionering og positionering af elementer i en app nemmere end nogensinde. Gitteret er opdelt i 12 kolonner og har fem mediebrudpunkter til håndtering af forskellige skærmstørrelser.

Mens standardelementets bredde er 12 kolonner, er det let at justere dette ved at ændre kolonneværdien. For eksempel optager et element med en kolonneværdi 6 halvdelen af ​​sidebredden. Elementer kan placeres ved hjælp af offsetejendommen.

  Column   

Kolonner i Vuetify kommer med forudindstillet afstand. Klik igennem til scrim for at se, hvordan dette påvirker elementet, og hvordan du tilpasser det.

Kort

Tilpasset Vuetify-kort

Klik på kortet for at få adgang til scrim.

Tilføjelse kort til din app er enkel med Vuetify s element, som er let tilpasses med sine fire valgfrie indlejrede elementer: , , og .

Jeg har spillet med det kort, der blev leveret i rollebesætningen, for at lave mit eget kaffekort. Hvorfor ikke gå over og se, hvor din fantasi også fører dig?

    mdi-coffee Coffee Card  "Coffee Rocks!"    Miss C Bean      

Det er alt sammen for vores hyperhastighedsturnering af Vuetifys grundlæggende funktioner. For at udforske videre skal du gå over til banen og tjekke filen Playground.vue, hvor du kan teste koden og se mere af, hvad den kan gøre.

Kurset inkluderer også en masse interaktive udfordringer for at sætte din nyvundne viden på prøve og få dig godt på vej til at blive en Vuetify-pro. Når du er færdig der, hvorfor ikke tjekke Scrimbas enorme udvalg af andre emner for at fortsætte din læringsrejse?

Uanset hvad du vælger at gøre næste, glad kodning :)