Creați acordeon cu Material Design

Acordeoanele sunt una dintre cele mai populare modalități de organizare a informațiilor și apoi folosind diferite efecte putem arăta că informațiile conținute în ele. Acestea sunt deja pe internet de ceva vreme și le putem implementa cu cadre precum jQuery, Bootstrap și chiar dacă îndrăznim să le construim folosind doar HTML5 Da CSS3.

Dar tehnologiile evoluează rapid și, deși implementarea unui acordeon folosind cadrele menționate mai sus este destul de simplă, există încă metode care depășesc această simplitate. Una dintre acestea este să o faci cu noul limbaj de design numit Proiectarea materialelor și sprijinindu-ne din cadru Materializa pentru aceasta.

Acordeoane în proiectarea materialelor
Acordeoane în Proiectarea materialelor Nu numai că sunt ușor de implementat, dar avem și mai multe funcționalități pentru ele, ceea ce ne oferă o varietate mult mai largă pentru site-ul nostru, printre care avem următoarele:

Acordeon
Este clasicul și permite organizarea informațiilor în blocuri care se prăbușesc unul după altul atunci când faceți clic pe ele, acestea sunt definite cu clasa acordeon pliabil.

Popout
Tastați acordeonuri popout adăugați un efect nou componentei populare și combinați funcționalitatea clasică cu efecte de afișare mult mai elaborate, acestea fiind definite cu clasa popout pliabil.

Extensibil
În cele din urmă acordeonuri extensibile sau extensibil permite deschiderea mai multor acordeoni în același timp, adică acordeonul pe care acest activ nu îl va închide dacă vrem să vedem altul, pentru a defini acest tip de acordeon se folosește atributul pliabil de date de tip extensibil.

Odată ce știm care sunt tipurile de acordeon pe care le putem implementa, vom face un exemplu în care includem cele trei tipuri într-o singură pagină.

Implementarea acordeonilor web

Primul lucru de făcut este să includeți bibliotecile din Materializa, atât fișierul .js, cât și foaia de stil a cadrului, este important să ne conectăm și la pictograme pentru a le putea folosi în exemplul nostru și fără a uita cea mai recentă versiune a jQuery înainte de biblioteca JavaScript a Materializa:

Odată ce acest lucru este făcut, vom crea o structură de trei containere pentru fiecare acordeon pe care îl implementăm, primul va fi acordeonul standard și pentru a-l defini va trebui să creăm o structură de ul și li pe care o vom identifica cu clase corespunzătoare:

Acordeon standard cu design material

filtru_dramăPrimul
Lorem ipsum durere sta amet.

locAl doilea
Lorem ipsum durere stă amet.

ce este fierbinteAl treilea
Lorem ipsum durere sta amet.

Este important de menționat că pentru fiecare element din acordeon trebuie să definim clasele de antet pliabil si corp pliabil, adică titlul și mesajul fiecăruia, să vedem cum arată primul nostru acordeon.

MARI

După cum putem vedea, arată destul de bine și nu a trebuit să facem nimic complicat, acum vom crea acordeonul nostru tip popout și, pentru aceasta, tot ce trebuie să facem este să adăugăm clasa popout pliabil și păstrăm structura exemplului anterior cu aceea că ne vom crea funcționalitatea, să vedem fragmentul de cod pentru aceasta:

În cele din urmă, pentru a crea acordeonul nostru extensibil, trebuie doar să adăugăm la pliabil de date optiunea extensibil și cum am procedat anterior, am menținut structura și am avea deja funcționalitatea noastră:

Pentru a aprecia modul în care funcționează acordeonele noastre, să vedem cum arată mai jos.

După cum putem vedea, am creat o funcționalitate extrem de puternică și vizuală impresionantă în doar câteva minute, este doar la latitudinea tuturor să ia exemplul și să-l adapteze nevoilor lor pentru a crea funcționalități bogate și utile pentru orice site sau aplicație curentă.

acordeon_material_design.html 2.87K 170 Descărcări