Napravite harmoniku s materijalnim dizajnom

Harmonike su jedan od najpopularnijih načina organiziranja informacija, a zatim pomoću različitih efekata možemo pokazati te informacije sadržane u njima. Oni su već neko vrijeme na webu i možemo ih implementirati s okvirima poput jQuery, Bootstrap pa čak i ako se odvažimo izgraditi ih koristeći samo HTML5 Y CSS3.

No, tehnologije se brzo razvijaju i iako je implementacija harmonike pomoću gore navedenih okvira prilično jednostavna, još uvijek postoje metode koje nadilaze ovu jednostavnost. Jedan od njih je to učiniti s novim jezikom dizajna koji se zove Dizajn materijala i podržavajući nas iz okvira Materijalizirati za to.

Harmonike u dizajnu materijala
Harmonike u Dizajn materijala Oni nisu samo jednostavni za implementaciju, već imamo i nekoliko funkcionalnosti za njih, što nam daje mnogo širu raznolikost za našu web stranicu, među njima imamo sljedeće:

Harmonika
Klasičan je i omogućuje organiziranje informacija u blokove koji se skupljaju jedan za drugim pri kliku na njih, oni su definirani klasom sklopiva harmonika.

Iskočiti
Upišite harmonike iskočiti dodati novi efekt popularnoj komponenti i kombinirati klasičnu funkcionalnost s mnogo složenijim efektima prikaza, oni su definirani s klasom sklopivi skočni prozor.

Proširivo
Konačno proširive harmonike ili proširivo omogućuje otvaranje više harmonika u isto vrijeme, odnosno harmoniku koju ovaj materijal neće zatvoriti ako želimo vidjeti neke druge, za definiranje ove vrste harmonika koristi se atribut podaci se mogu sabrati tipa proširivo.

Kad saznamo koje vrste harmonika možemo implementirati, napravit ćemo primjer gdje tri vrste uključujemo u jednu stranicu.

Implementacija web harmonika

Prvo što trebate učiniti je uključiti knjižnice Materijalizirati, .js datoteku i tablicu stilova okvira, važno je da se povežemo i na ikone kako bismo ih mogli koristiti u našem primjeru i bez zaboravljanja najnovije verzije jQuery prije JavaScript biblioteke Materijalizirati:

Nakon što to učinimo, stvorit ćemo strukturu od tri spremnika za svaku harmoniku koju implementiramo, prva će biti standardna harmonika i da bismo je definirali trebat ćemo stvoriti strukturu ul i li koju ćemo identificirati sa odgovarajuće klase:

Standardna harmonika s materijalnim dizajnom

filter_dramaPrvi
Lorem ipsum pain sit amet.

mjestoDrugi
Lorem ipsum pain sit amet.

Što je vrućeTreći
Lorem ipsum pain sit amet.

Važno je napomenuti da za svaki element unutar harmonike moramo definirati klase sklopivo-zaglavlje i sklopivo tijelo, odnosno naslov i poruku svake od njih, da vidimo kako izgleda naša prva harmonika.

POVEĆAJTE

Kao što vidimo, izgleda prilično dobro i nismo morali učiniti ništa komplicirano, sada ćemo stvoriti našu harmoniku tipa popout, a za to sve što trebamo učiniti je dodati klasu sklopivi skočni prozor i zadržati strukturu prethodnog primjera s tim da ćemo stvoriti našu funkcionalnost, pogledajmo isječak koda za ovo:

Konačno, za stvaranje naše proširive harmonike samo je potrebno dodati podaci se mogu sabrati opciju proširivo i kako smo prethodno radili, održavamo strukturu i već bismo imali svoju funkcionalnost:

Kako bismo cijenili kako naše harmonike funkcioniraju, pogledajmo kako izgledaju u nastavku.

Kao što vidimo, u samo nekoliko minuta stvorili smo iznimno moćnu i vizualno impresivnu funkcionalnost, na svima je samo da uzmu primjer i prilagode ga svojim potrebama kako bi stvorili bogate i korisne funkcionalnosti za bilo koju trenutnu web stranicu ili aplikaciju.

dizajn harmonike_materijal.html 2.87K 170 preuzimanja