Üdvözöljük a Vuetify - a Vue.js népszerű komponenskönyvtárának - sípszóstori bemutatóján. Lehetővé teszi vonzó, hozzáférhető alkalmazások létrehozását 80 elemmel, amelyek készen állnak a használatra, plusz lehetőséget ad az elemek testreszabására a testre szabott kialakításhoz.

A következő öt percben megmutatom a következő forró Vuetify elemeket:

• Tipográfia
• Távolság
• Gombok
• Navigáció
• Rács
• Kártya

A cikk végére pedig magabiztosan érezheti magát, ha lenyűgöző alkalmazásokat készít csupán néhány sornyi kóddal.

Olvasás közben térjen át a Scrimba 2 órás Vuetify tanfolyamára, hogy többet megtudjon, és fedezze fel a kódot a platform interaktív játszóterén. Ezenkívül néhány interaktív kódolási kihívással tesztelheti új készségeit. Kezdjük el!

Vuetify objektum létrehozása

A Vuetify használatához először be kell húznunk a Vue-t és a Vuetify-t a CDNS-jükből.

Ez lehetővé teszi számunkra a Vue alkalmazás Vuetify tulajdonsággal történő példányosítását és egy új Vuetify objektum létrehozását:

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

Kattintson ide, hogy részletesen lássa.

Tipográfia

Kattintson a képre a szereposztáshoz való ugráshoz.

A Vuetify rengeteg lehetőséget kínál a lenyűgöző tipográfia készítéséhez, a különböző méretű fejlécektől kezdve a címekig, a feliratokig és a törzsszövegig:

Heading 1
Heading 2
Heading 3
Title
Subtitle
Body

A szöveg színének és a háttér színének megváltoztatása a Vuetify segítségével is egyszerű. A háttérszínhez egyszerűen adja hozzá a kívánt szín nevét az elem osztályához. A szöveg színéhez csak adja hozzá a szín nevét, majd az azt --text.

Ez körülbelül 20 standard színnél működik, és testreszabható a kísérő osztályok, például lightenés segítségével darken.

Heading 1

A Vuetify osztályokat is kínál a betű súlyának és stílusának megváltoztatására, valamint a szöveg csonkítására és átalakítására. Irány a szereplőgárda, hogy többet megtudjon.

Távolság

Aki valaha is használta a CSS-t, tudja, hogy a margók és a kitöltés bonyolult lehet. Nem a Vuetify-val! Az elemek közötti távolság hozzáadásához és beállításához egyszerűen használja a következő rövidítésekkel rendelkező osztályokat:

m = margó

p = párnázás

t = felső

r = helyes

b = alsó

l = maradt

x = jobb + bal

y = felső + alsó

a = minden

A térköz méretét az 1–12 számok segítségével állítják be, amelyek megfelelnek a négy pixeles lépéseknek. Például ml-5egy 20 képpontos bal margót jelöl.

Spacing

Az elemek központosítása a Vuetify segítségével is egyszerű. Egyszerűen csomagolja be az elemet az oldalt átívelő tartályba, majd adjon neki egy jobb és bal margót auto:

Spacing

Ezzel még nem ért véget a Vuetify praktikus tippjei és trükkjei az elemek távolságához. Kattintson a szereplőkre, ha többet szeretne látni!

Gombok

A Vuetify tucatnyi lehetőséget kínál a gombok stílusához, beleértve a szokásos kattintható gombokat, a körvonalazó gombokat készen elhelyezett ikonokkal és a csak ikonokat tartalmazó gombokat.

Olvassa tovább, hogy a rendelkezésre álló lehetőségek közül néhányat közvetlenül a dobozból láthasson, vagy kattintson a gombra a gombok testreszabásához.

Nagy körvonal gomb:

Submit 

Gomb ikonnal:

 mdi-pencil Edit  

Lebegő művelet ikon gomb:

 mdi-plus  

Navigáció

Kattintson a képre a szereposztáshoz.

A Vuetify programban elérhető két fő navigációs lehetőség a és a .

Annak ellenére, hogy a két elem bizonyos mértékben felcserélhető , a webhely fő navigációjának használatára tervezték, és olyan funkciókat tartalmaz, mint a görgető animációk, valamint számos kellék és opció.

egy kisebb, sokoldalúbb összetevő, amelyet úgy terveztek, hogy funkcionalitást biztosítson az alkalmazás más területein. Például fel lehet használni egy alapvető szövegszerkesztő alapvető szerkesztési funkcióihoz.

Mindkét navigációs elem kezeli a legördülő listákat, és automatikusan méretezi a navigációs ikonokat és gombokat.

Rács

A Vuetify beépített rácsrendszerrel rendelkezik, amely minden alkalmazásnál egyszerűbbé teszi az elemek méretezését és pozicionálását. A rács 12 oszlopra van felosztva, és öt médiatörési ponttal rendelkezik a különböző méretű képernyők kezeléséhez.

Míg az elem alapértelmezett szélessége 12 oszlop, ezt könnyű beállítani az oszlop értékének megváltoztatásával. Például egy olyan elem, amelynek oszlopértéke 6, az oldal szélességének felét foglalja el. Az elemeket az offsetingatlan segítségével lehet pozicionálni .

  Column   

A Vuetify oszlopai előre beállított távolsággal vannak ellátva. Kattintson a scrimre, hogy megnézze, hogy ez hogyan befolyásolja az elemet, és hogyan szabhatja testre.

Kártya

Kattintson a kártyára a scrim eléréséhez.

Kártya felvétele az alkalmazás egyszerű a Vuetify azon eleme, amely könnyen testre szabható a négy választható beágyazott elemeket: , , és .

Játszottam a szereplőgárdában szereplő kártyával, hogy elkészítsem a saját kávéskártyám. Miért nem megy át és megnézi, hová visz a fantáziája is?

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

Ennyit nyújt a Vuetify alapvető funkcióinak nagy sebességű bemutatásához. A további felfedezéshez menjen át a tanfolyamra, és nézze meg a Playground.vue fájlt, ahol kipróbálhatja a kódot, és többet megtudhat arról, hogy mire képes.

A tanfolyam egy csomó interaktív kihívást is tartalmaz, hogy próbára tegye újonnan megszerzett ismereteit, és jó úton haladjon a Vuetify profivá váláshoz. Ha elkészült, miért nem nézi meg a Scrimba hatalmas más témakörét, hogy folytassa a tanulási utat?

Bármit is választasz legközelebb, boldog kódolás :)