Nopea johdanto materiaalisuunnitteluun materialisoinnin avulla

Mikä on materiaalisuunnittelu?

Materiaalisuunnittelu on Googlen luoma suunnittelukieli. Material.io: n mukaan materiaalisuunnittelulla pyritään yhdistämään:

… Hyvän suunnittelun klassiset periaatteet innovaatioiden ja tekniikan ja tieteen mahdollisuuksien kanssa. Sen tavoitteena on kehittää yksi taustalla oleva järjestelmä, joka mahdollistaa yhtenäisen kokemuksen kaikista alustoista ja laitekooista. Matkapuhelinohjeet ovat perustavanlaatuisia, mutta kosketus, ääni, hiiri ja näppäimistö ovat kaikki ensimmäisen luokan syöttötapoja.

Miksi käyttää materiaalisuunnittelua?

Materiaalisuunnittelu tarjoaa saumattoman käyttökokemuksen kaikissa laitteissa. Reagoivat siirtymät ja animaatio sekä pehmuste- ja syvyystehosteet, kuten varjot ja salama, tekevät siitä tyylikkään ja käyttäjäystävällisen. Google käyttää Material Designia melkein kaikissa sovelluksissaan (kuten Keep ja Calendar).

Kuinka voit käyttää materiaalisuunnittelua verkkosovelluksissa?

Materialisaatio on reagoiva käyttöliittymäkirjastokokoelma, joka on samanlainen kuin Bootstrap. Se tarjoaa kaiken, mitä Bootstrap tarjoaa, mutta ero on siinä, että Materialize noudattaa materiaalisuunnittelun periaatteita. Tässä on esimerkki mallista.

Tässä on luettelo ominaisuuksista, jotka toteutuvat:

  • ruudukko
  • taulukot
  • Rintamerkit, napit, leivänmurut
  • Kortit, sirut, kokoelmat
  • Alatunniste, lomakkeet
  • navbar
  • Ja paljon muuta!

Kuinka päästä alkuun

Toisin kuin Bootstrap, Materialize ei vaadi popper.js-tiedostoa. Se vaatii vain jQueryn. Tämä on kaikki mitä tarvitset aloittamiseen. Lisää tämä HTML-koodiin ja voit mennä!




värit

Toteuttamisen avulla voit muuttaa minkä tahansa HTML-elementin väriä antamalla sille vain haluamasi värin luokan nimen. Jos esimerkiksi haluat antaa kappaleitagillesi punaisen värin, tee seuraava:

Lorem Ipsum

Lisäksi voit vaalentaa tai tummentaa väriä antamalla sille toisen luokan nimen vaalentaa-1 tai tummentaa-1. Esimerkiksi

Tekstinäyte

. 1 voidaan korvata numeroilla, jotka ovat enintään 5 vaalentamiseksi ja korkeintaan 4 tummentamiseksi. Suuremmat numerot käyttävät vaaleampia tai tummempia värisävyjä.

painikkeet

Painikkeen toteuttamiseksi anna sille luokan nimi btn. Voit myös lisätä siihen viileän animaation antamalla sille toisen luokan aalto-tehosteen. Jos tarvitset isompaa painiketta, voidaan käyttää btn-suurta luokkaa. Esimerkiksi:


  Klikkaus
 
 

  Klikkaus
 

Varjo

Materiaalisuunnittelussa kaikella tulisi olla tietty z-syvyys, joka määrittelee kuinka kauan kohotettu tai lähellä sivua elementti on.

Varjovaikutuksen lisäämiseksi elementtiin voidaan käyttää luokkaa z-syvyys 2 (2 voidaan korvata numeroilla 1–5). Esimerkiksi:

johtopäätös

Olen vain raaputtanut pintaa täällä. Materialisaatiossa on paljon enemmän saatavana (kuten siirtymät, kortit, karuselli ja modaalit). Voit oppia käyttämään kaikkia komponentteja asiakirjoista. Luokanimet ovat hyvin yksinkertaisia, ja ruudukosta on todella hyötyä reagoivien sarakkeiden luomisessa nopeasti. Toivotan teille onnea!