Направите хармонику са материјалним дизајном

Хармонике су један од најпопуларнијих начина организовања информација, а затим користећи различите ефекте можемо показати те информације садржане у њима. Они су већ неко време на вебу и можемо их применити са оквирима као што су јКуери, Боотстрап па чак и ако се усуђујемо да их изградимо користећи само ХТМЛ5 И ЦСС3.

Али технологије се брзо развијају и иако је имплементација хармонике помоћу горе наведених оквира прилично једноставна, још увек постоје методе које превазилазе ову једноставност. Један од њих је да то учините са новим језиком дизајна који се зове Дизајн материјала и подржавајући нас из оквира Материјализовати за то.

Хармонике у дизајну материјала
Хармонике у Дизајн материјала Нису само једноставни за имплементацију, већ имамо и неколико функционалности за њих, што нам даје много ширу разноликост за нашу веб страницу, међу њима имамо следеће:

Хармоника
Класичан је и омогућава организовање информација у блокове који се срушавају један за другим при клику на њих, они су дефинисани класом склопива хармоника.

Показати се
Укуцајте хармонике показати се додати нови ефекат популарној компоненти и комбиновати класичну функционалност са много сложенијим ефектима приказа, они су дефинисани класом склопиви искачући прозор.

Прошириво
Коначно прошириве хармонике или прошириво омогућава отварање више хармоника истовремено, то јест, хармоника коју ово средство неће затворити ако желимо да видимо неку другу, за дефинисање ове врсте хармоника користи се атрибут сакупљање података типа прошириво.

Када сазнамо које врсте хармоника можемо применити, направићемо пример где три врсте укључујемо на једну страницу.

Имплементација веб хармоника

Прво што треба да урадите је да укључите библиотеке Материјализовати, .јс датотеку и листу стилова оквира, важно је да се повежемо и са иконама како бисмо их могли користити у нашем примеру и без заборављања на најновију верзију јКуери пре ЈаваСцрипт библиотеке Материјализовати:

Када се то уради, ми ћемо створити структуру од три контејнера за сваку хармонику коју имплементирамо, прва ће бити стандардна хармоника и да бисмо је дефинисали потребно је да направимо структуру ул и ли коју ћемо идентификовати са одговарајуће класе:

Стандардна хармоника са материјалним дизајном

филтер_драмаПрви
Лорем ипсум паин сит амет.

местоДруго
Лорем ипсум паин сит амет.

шта је врућеТреће
Лорем ипсум паин сит амет.

Важно је напоменути да за сваки елемент хармонике морамо дефинисати класе склопиво-заглавље и склопиво тело, односно наслов и поруку сваког од њих, да видимо како изгледа наша прва хармоника.

ЕНЛАРГЕ

Као што видимо, изгледа прилично добро и нисмо морали да радимо ништа компликовано, сада ћемо створити нашу хармонику типа попоут, а за ово, све што треба да урадимо је да додамо класу склопиви искачући прозор и задржимо структуру претходног примера са тим што ћемо створити нашу функционалност, хајде да видимо исечак кода за ово:

Коначно, за стварање наше прошириве хармонике само је потребно додати сакупљање података опција прошириво и како смо раније радили, одржавамо структуру и већ бисмо имали своју функционалност:

Да бисмо разумели како наше хармонике функционишу, погледајмо како изгледају у наставку.

Као што видимо, за само неколико минута створили смо изузетно моћну и визуелно импресивну функционалност, на свима је само да узму пример и прилагоде га својим потребама како би створили богате и корисне функционалности за било коју тренутну веб локацију или апликацију.

хармоника_материјал_десигн.хтмл 2.87К 170 преузимања