Gyors bevezetés az anyagtervezéshez a materializálás segítségével

Mi az anyagtervezés?

Az Anyagtervezés a Google által létrehozott tervezési nyelv. Az material.io szerint az Material Design célja az alábbiak kombinálása:

… A jó tervezés klasszikus alapelvei, a technológia és a tudomány innovációja és lehetőségei mellett. Célja egy olyan alapul szolgáló rendszer kifejlesztése, amely lehetővé teszi a platformok és az eszközök méretének egységes élményét. A mobil utasítások alapvető fontosságúak, de az érintés, a hang, az egér és a billentyűzet mind az első osztályú beviteli módszer.

Miért érdemes használni az anyagtervezést?

Az Anyagtervezés zökkenőmentes felhasználói élményt nyújt minden eszközön. Az érzékeny átmenetek és az animáció, valamint a padding és a mélységhatások, például az árnyékok és a villámlás, elegánsnak és felhasználóbarátnak érzik magukat. A Google szinte minden alkalmazásában (például a Keep és a Naptár) használja az Material Design alkalmazást.

Hogyan lehet használni az Anyagtervező webes alkalmazásaiban?

A materializáció egy érzékeny front-end komponens könyvtár, amely hasonló a Bootstrap-hoz. Mindent kínál, amit a Bootstrap kínál, de a különbség az, hogy a Materialize az anyagtervezési elveket követi. Íme egy példasablon.

Az alábbiakban felsoroljuk azokat a funkciókat, amelyeket a materializálás kínál:

  • Rács
  • asztalok
  • Jelvények, gombok, zsemlemorzsa
  • Kártyák, chips, gyűjtemények
  • Láb, formák
  • Navbar
  • És még sok más!

Hogy kezdjed

A Bootstrap-tól eltérően a Materialize nem igényel popper.js-t. Csak a jQuery szükséges. Ez minden, amire szüksége van az induláshoz. Adja hozzá ezt a HTML-kódjához, így jó lesz!




Színek

A Materialize segítségével bármilyen HTML elem színét megváltoztathatja, egyszerűen megadva a kívánt szín osztálynevet. Például, ha azt szeretné, hogy a bekezdéscímkéje piros legyen, akkor tegye a következőket:

Lorem Ipsum

Ezenkívül a színeket megvilágíthatja vagy sötétebbé teheti azzal is, hogy egy másik osztálynevet ad meg: világosabb-1 vagy sötétebb-1. Például,

Minta szöveg

. Az 1 cserélhető legfeljebb 5-ös számokkal a világosabbá és 4-ig a sötétítéshez. A nagyobb számok világosabb vagy sötétebb színárnyalatot alkalmaznának.

gombok

Egy gomb megvalósításához csak adja meg a btn osztálynevet. Hozzáadhat hűvös animációt is azzal, hogy újabb osztályhullám-effektust ad neki. Ha nagyobb gombra van szüksége, akkor a btn-nagy osztály használható. Például:


  Kattints
 

  Kattints
 

  Kattints
 

Árnyék

Az anyagtervezés során mindegyiknek legyen egy bizonyos z-mélysége, amely meghatározza, hogy az elem mennyire emelt vagy közel van az oldalhoz.

Árnyékhatás alkalmazására egy elemre a z -élység-2 osztály használható (a 2 helyettesíthető 1–5 számokkal). Például:

Következtetés

Csak itt megkarcoltam a felületet. Sokkal több elérhető a materializálásban (például átmenetek, kártyák, körhinta és modok). Megtanulhatja az összes összetevő használatát a dokumentumokból. Az osztálynevek nagyon egyszerűek, és a rács nagyon hasznos az érzékeny oszlopok gyors létrehozásában. Sok sikert kívánok neked!