Създайте акордеон с Material Design

Акордеоните са един от най -популярните начини за организиране на информация и след това с помощта на различни ефекти можем да покажем тази информация, съдържаща се в тях. Те вече са в мрежата от известно време и можем да ги приложим с рамки като jQuery, Bootstrap и дори да сме смели да ги изградим, използвайки само HTML5 Y CSS3.

Но технологиите се развиват бързо и въпреки че внедряването на акордеон с помощта на гореспоменатите рамки е доста просто, все още има методи, които надхвърлят тази простота. Едно от тях е да го направите с новия език за дизайн, наречен Материален дизайн и ни подкрепя от рамката Материализирайте за него.

Акордеони в материалния дизайн
Акордеони в Материален дизайн Те не само са лесни за изпълнение, ние имаме и няколко функционалности за тях, което ни дава много по -голямо разнообразие за нашия уебсайт, сред които имаме следното:

Акордеон
Той е класическият и позволява да се организира информацията в блокове, които се свиват един след друг, когато щракнете върху тях, те се дефинират с класа сгъваем акордеон.

Изкача
Въведете акордеони изкача добавете нов ефект към популярния компонент и комбинирайте класическата функционалност с много по -сложни ефекти на дисплея, те са дефинирани с класа сгъваем изскачащ прозорец.

Разширяващ се
Най -накрая разширяващи се акордеони или разширяемо позволява да се отварят няколко акордеона едновременно, тоест акордеонът, който този актив няма да се затвори, ако искаме да видим някой друг, за да дефинира този тип акордеони, използва се атрибутът събиране на данни от типа разширяема.

След като разберем какви са типовете акордеони, които можем да изпълним, ще направим пример, при който включваме трите вида в една страница.

Внедряване на уеб акордеони

Първото нещо, което трябва да направите, е да включите библиотеките на Материализирайте, .js файла и стиловата таблица на рамката, важно е също така да се свържем с иконите, за да можем да ги използваме в нашия пример и без да забравяме най -новата версия на jQuery преди JavaScript библиотеката на Материализирайте:

След като това бъде направено, ще създадем структура от три контейнера за всеки акордеон, който изпълняваме, първият ще бъде стандартният акордеон и за да го определим, ще трябва да създадем структура от ul и li, която ще идентифицираме с съответните класове:

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

филтър_драмаПърво
Lorem ipsum болка седи амет.

мястоВторо
Lorem ipsum болка седи амет.

какво новоТрето
Lorem ipsum болка седи амет.

Важно е да споменем, че за всеки елемент в акордеона трябва да дефинираме класовете на сгъваема заглавка и сгъваемо тяло, тоест заглавието и посланието на всеки един, нека видим как изглежда първият ни акордеон.

Увеличете

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

И накрая, за да създадем нашия разширяем акордеон, трябва само да добавим към събиране на данни опцията разширяема и както направихме по -рано, ние поддържаме структурата и вече бихме имали нашата функционалност:

За да оценим как работят нашите акордеони, нека да видим как изглеждат по -долу.

Както виждаме, ние създадохме изключително мощна и визуално впечатляваща функционалност само за няколко минути, остава само на всеки да вземе примера и да го адаптира към своите нужди, за да създаде богати и полезни функционалности за всеки текущ уебсайт или приложение.

акордеон_материал_дизайн.html 2.87K 170 Изтегляния