Gyors bemutatás az anyagtervezésről a Materialize segítségével

Mi az anyagtervezés?

Az Anyagtervezés a Google által létrehozott tervezési nyelv. A material.io szerint az Anyagtervezés célja a következők kombinálása:

… A jó tervezés klasszikus elvei a technológia és a tudomány innovációjával és lehetőségeivel. Célja egy alapul szolgáló rendszer kifejlesztése, amely lehetővé teszi az egységes élményt a platformok és az eszközméretek között. A mobil előírá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ódszerek.

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 animációk, valamint a párnázási és mélységi effektusok, például az árnyékok és a villámok elegánsnak és felhasználóbarátnak érzik magukat. A Google szinte az összes alkalmazásában (például a Keepben és a Naptárban) használja az Anyagtervezést.

Hogyan használhatja az Anyagtervezést a webalkalmazásaiban?

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

Az alábbiakban felsoroljuk a Materialize által kínált szolgáltatásokat:

  • Rács
  • Táblázatok
  • Jelvények, gombok, zsemlemorzsa
  • Kártyák, zsetonok, gyűjtemények
  • Lábléc, formák
  • Navbar
  • És még sok más!

Hogy kezdjed

A Bootstrap-tal ellentétben a Materialize nem igényli a popper.js fájlt. Csak jQuery szükséges. A kezdéshez csak erre van szükség. Adja hozzá ezt a HTML-hez, és máris megy!

Színek

A Materialize használatával bármely HTML elem színét megváltoztathatja, ha egyszerűen megadja neki a kívánt szín osztálynevét. Például, ha a bekezdéscímkének piros színt szeretne adni, tegye a következőket:

Lorem Ipsum

Ezenkívül a színt világosabbá vagy sötétebbé teheti egy másik osztálynévvel lighten-1vagy darken-1. Például,

Sample Text

. Az 1-et a világosításhoz 5-ig, sötétebbé pedig 4-ig lehet helyettesíteni. Nagyobb számok világosabb vagy sötétebb színárnyalatokat alkalmaznak.

Gombok

A gomb materializálásához adja meg az osztály nevét btn. Hűvös animációt is hozzáadhat, ha másik osztályt ad neki waves-effect. Ha nagyobb gombra van szüksége, akkor btn-largeosztály használható. Például:

 Click    Click    Click  

Árnyék

Az anyagtervezésnél mindennek rendelkeznie kell egy bizonyos z-mélységgel, amely meghatározza, hogy az elem milyen magasan vagy közel van az oldalhoz.

Az árnyékhatás elemre való alkalmazásához az z-depth-2osztály használható (a 2 helyettesíthető 1–5 számokkal). Például:

Következtetés

Itt csak a felszínt vakartam meg. Sokkal több érhető el a Materialize-ban (például átmenetek, kártyák, körhinta és modálok). Az összes komponens használatát megtanulhatja a dokumentumokból. Az osztálynevek nagyon egyszerűek, és a rács nagyon hasznos az adaptív oszlopok gyors létrehozásához. Sok sikert kívánok neked!