Materialize - materiaalisen suunnittelun CSS-kehys
Googlen Materiaalisuunnittelu Tavoitteena on toimia hyvin verkossa ja myös mobiilisovelluksissa. Kehittäjien suosio kasvaa, ja jos haluat ottaa sen käyttöön, on monia tapoja toteuttaa materiaalisuunnittelu sivustossasi. Voit käyttää Polymer tai Angular, tai voit käyttää Materializze.
Materiaali on a CSS-kehys, joka perustuu Material Design -periaatteisiin ja Sass-tukeen parempaa kehitystä. Se sisältää oletusmuotoilun helppokäyttöiseksi ja siinä on yksityiskohtaiset asiakirjat.
Löydät paljon hyödyllisiä komponentteja: valintaikkuna, modaali, päivämäärävalitsin, materiaalipainikkeet, parallaksi, kortit ja paljon muuta. Siinä on myös monia navigointivaihtoehtoja, joista voit valita, kuten pudotusvalikosta, liu'uta valikosta ja välilehdistä. Materiaali myös käyttää a 12-verkkojärjestelmä 3 oletusnäytön kokoisen median kyselyä: 600px: n suurin leveys on mobiililaite, 992px-tabletin laite ja yli 992px pidetään pöytälaitteena.
Päästä alkuun
Aloitetaan kahdella tavalla Materialize: use -toiminnolla vakio CSS tai nenäkkyys. Molemmat lähteet voidaan ladata täältä. Voit myös saada ne pyöreällä seuraavalla komennolla:
bowerin asennus toteutuu
Kun olet saanut lähteet, varmista, että linkität ne oikein projektitiedostoon tai koot lähde, jos käytät Sass-versiota.
ominaisuudet
Tässä osassa selitän joitakin ominaisuuksia, jotka tarjoavat tarjouksia.
1. Sass Mixins
Tämä kehys kuljettaa Sass Mixinsia, joka lisää automaattisesti kaikki selaimen etuliitteet, kun kirjoitat tiettyjä CSS-ominaisuuksia. Se on hyvä ominaisuus varmistaa yhteensopivuus kaikissa selaimissa, mahdollisimman vähän hätää ja koodia.
Tutustu seuraaviin animaatio-ominaisuuksiin:
-webkit-animaatio: 0.5s; -moz-animaatio: 0.5s; -o-animaatio: 0,5s; -ms-animaatio: 0,5s; animaatio: 0,5s;
Nämä koodirivit voidaan kirjoittaa uudelleen yhdellä Sass-sekoituslinjalla:
@include animation (.5s);
Siellä on noin 19 pääsekoitinta käytettävissä. Jos haluat nähdä koko luettelon, siirry Sass-luokkaan MIXINS kieleke.
2. Virtausteksti
Vaikka muut frontend-kehykset käyttävät kiinteää tekstiä, Materializze toteuttaa todella reagoivaa tekstiä. Tekstin kokoa ja linjan korkeutta skaalataan vastaavasti luettavuuden säilyttämiseksi. Pienemmissä näytöissä linjan korkeus skaalataan suuremmaksi.
Voit käyttää Flow Text -ohjelmaa yksinkertaisesti lisäämällä flow-text luokka haluamallasi tekstillä. Esimerkiksi:
Tämä on Flow Text.
Tarkista demo täältä Flow Text -osiossa.
3. Ripple vaikutus Waves
Materiaalisuunnittelussa on myös interaktiivista palautetta, yksi merkittävä esimerkki on aaltoileva vaikutus. Materiaalissa tämä vaikutus kutsutaan aallot. Vaikutus tulee näkyviin, kun käyttäjät napsauttavat tai napauttavat / koskettavat painiketta, korttia tai muuta elementtiä. Aallot voidaan luoda helposti lisäämällä aallot-vaikutus luokkaa elementteihisi.
Tämä katkelma antaa sinulle aaltojen vaikutuksen.
Lähetä
Riput ovat oletusarvoisesti harmaita. Mutta tilanteessa, jossa taustalla on tumma, voit muuttaa väriä. Jos haluat lisätä eri värin, lisää vain waves- (väri) elementtiin. Vaihda "(väri)" värin nimellä.
Lähetä
Voit valita 7 väristä: vaalea, punainen, keltainen, oranssi, violetti, vihreä ja ruskea. Voit aina luoda tai muokata omia värejä, jos nämä värit eivät vastaa tarpeitasi.
4. Varjo
Materiaalisuunnittelu suosittelee elementtien välisten suhteiden aikaansaamiseksi pintojen kohoamista. Materialisoi tämä periaate sen kanssa z-syvyys- (numero) luokka. Voit määrittää varjosyvyyden muuttamalla (numero) arvoa 1: 5:
Varjojen syvyys 3
Kaikki varjosyvyydet osoittavat alla olevan kuvan kanssa.
5. Painikkeet ja kuvakkeet
Materiaalisuunnittelussa on kolme painikkeen päätyyppiä: nostettu painike, fab (kelluva toimintopainike) ja litteä painike.
(1) Korotettu painike
Korotettu painike on oletuspainike. Jos haluat luoda tämän painikkeen, lisää vain a btn luokka elementteihin. Jos haluat antaa sille aaltovaikutuksen, kun napsautat tai painat, siirry tähän:
nappi
Vaihtoehtoisesti voit myös antaa painikkeen kuvakkeen tekstin vasemmalle tai oikealle puolelle. Sinun on lisättävä mukautettu kuvake tunniste, jossa on luokan nimi ja sijainti. Esimerkiksi:
ladata
Yllä olevassa katkelmassa käytämme MDI-tiedosto-tiedosto lataa luokka lataussymbolille. Siellä on noin 740 eri kuvaketta voit käyttää. Jos haluat nähdä ne pään yli Sass-sivulle Kuvakkeet-välilehdessä.
(2) Kelluva painike
Kelluva painike voidaan luoda lisäämällä btn kelluva luokka ja haluamasi kuvake. Esimerkiksi:
Materiaalisuunnittelussa käytetään tavallista painiketta usein valintaikkunassa. Jos haluat luoda sen, lisää vain btn-litteä elementtisi kuten:
aleneminen
Lisäksi painikkeet voidaan poistaa käytöstä liikuntarajoitteinen luokka ja tehty suuremmaksi btn suuri luokka.
6. Ruudukko
Materiaalissa käytetään standardia 12-sarakkeeseen reagoiva verkko järjestelmään. Vastaavuus on jaettu kolmeen osaan: pieni (t) mobiililaitteille, keskisuurille (m) tabletille ja suuri (l) työpöydälle.
Voit luoda sarakkeita osoittamalla s, m tai l osoittamaan koon ja sen jälkeen verkon numeron. Esimerkiksi, jos haluat luoda puolikokoisen asettelun mobiililaitteelle, sinun pitäisi sisällyttää s6 luokkaan. s6 tarkoittaa pieni-6 joka tarkoittaa 6 saraketta pienessä laitteessa.
Sinun on myös sisällytettävä a col luo luomasi luokka ja aseta se elementtiin, jossa on rivi luokka. Tämä on niin, että asettelu voidaan asettaa sarakkeisiin oikein. Tässä esimerkki:
Tässä on 12-sarakkeet tai täysi leveys4-sarakkeet (kolmasosa) täällä4-sarakkeet (kolmasosa) täällä4-sarakkeet (kolmasosa) täällä
Seuraavassa on tulokset:
Oletuksena, col s12 on kiinteä koko ja optimoitu kaikille näytön kokoille, periaatteessa sama kuin col s12 m12 l12. Mutta jos haluat määrittää eri laitteiden sarakkeiden koon. Sinun tarvitsee vain luetella muita kokoja kuten:
Minulla on aina 12 saraketta kaikkiallaMinulla on 12 saraketta mobiilissa, 6 tabletissa ja 9 työpöydällä
Tässä näyttää, mitä tämä näyttää:
Nämä ovat vain muutamia ominaisuuksia. Jos haluat lisätietoja niiden muista ominaisuuksista, siirry dokumentointisivulle.
