Sukurkite akordeoną su medžiagų dizainu

Akordeonai yra vienas iš populiariausių informacijos organizavimo būdų, o tada naudojant skirtingus efektus galime parodyti tą informaciją, esančią juose. Jie jau kurį laiką buvo žiniatinklyje, ir mes galime juos įgyvendinti naudodami tokias sistemas kaip „jQuery“, Bootstrap ir net jei mes drįstame juos statyti, naudodamiesi tik tuo HTML5 Y CSS3.

Tačiau technologijos sparčiai vystosi ir nors įgyvendinti akordeoną naudojant minėtas sistemas yra gana paprasta, vis dėlto yra metodų, kurie peržengia šį paprastumą. Vienas iš jų yra tai padaryti naudojant naują dizaino kalbą Medžiagos dizainas ir remia mus iš sistemos Materializuotis už jį.

Medžiagų dizaino akordeonai
Akordeonai Medžiagos dizainas Juos ne tik lengva įdiegti, bet ir turime keletą funkcijų, kurios suteikia daug didesnę mūsų svetainės įvairovę, tarp kurių yra šie:

Akordeonas
Tai klasika ir leidžia informaciją suskirstyti į blokus, kurie vienas po kito žlunga spustelėjus, jie apibrėžiami kartu su klase sulankstomas akordeonas.

Iššokti
Tipo akordeonai iššokti pridėti naują efektą prie populiaraus komponento ir sujungti klasikines funkcijas su daug sudėtingesniais ekrano efektais, jie apibrėžiami kartu su klase sulankstomas iššokantis langas.

Išplečiama
Galiausiai, plečiami akordeonai arba išplečiamas leidžia vienu metu atidaryti kelis akordeonus, tai yra akordeoną, kurio šis turtas neuždarys, jei norėsime pamatyti kitą, apibrėžti šio tipo akordeonus sulankstomi duomenys tipo plečiamas.

Kai žinosime, kokius akordeonų tipus galime įgyvendinti, pateiksime pavyzdį, kai tris tipus įtraukiame į vieną puslapį.

Interneto akordeonų diegimas

Pirmas dalykas, kurį reikia padaryti, yra įtraukti į biblioteką Materializuotis, ir .js failą, ir sistemos stiliaus lapą, svarbu, kad mes taip pat susietume piktogramas, kad galėtume jas naudoti savo pavyzdyje ir nepamiršdami naujausios versijos „jQuery“ prieš „JavaScript“ biblioteką Materializuotis:

Kai tai bus padaryta, mes sukursime trijų konteinerių struktūrą kiekvienam mūsų įgyvendinamam akordeonui, pirmasis bus standartinis akordeonas ir jį apibrėždami turėsime sukurti ul ir li struktūrą, kurią identifikuosime su atitinkamos klasės:

Standartinis akordeonas su medžiagos dizainu

filter_dramaPirmas
Lorem ipsum skausmas sėdi.

vietaAntra
Lorem ipsum skausmas sėdi.

kas karstaTrečias
Lorem ipsum skausmas sėdi.

Svarbu paminėti, kad kiekvienam akordeono elementui turime apibrėžti klases sulankstoma antraštė ir sulankstomas kūnas, tai yra kiekvieno pavadinimas ir žinutė, pažiūrėkime, kaip atrodo mūsų pirmasis akordeonas.

DIDELIS

Kaip matome, tai atrodo gana gerai ir mums nereikėjo daryti nieko sudėtingo, dabar mes sukursime savo popout tipo akordeoną, ir tam mums tereikia pridėti klasę sulankstomas iššokantis langas ir išlaikykite ankstesnio pavyzdžio struktūrą, kad sukursime savo funkcijas, pažiūrėkime kodo fragmentą:

Galiausiai, norėdami sukurti išplėstinį akordeoną, turime tik pridėti prie sulankstomi duomenys variantas plečiamas ir kaip mes darėme anksčiau, išlaikome struktūrą ir jau turėsime savo funkcijas:

Norėdami įvertinti, kaip veikia mūsų akordeonai, pažiūrėkime, kaip jie atrodo žemiau.

Kaip matome, vos per kelias minutes sukūrėme nepaprastai galingą ir vizualiai įspūdingą funkcionalumą, tik kiekvienas turi paimti pavyzdį ir pritaikyti jį savo poreikiams, kad sukurtų turtingas ir naudingas funkcijas bet kuriai dabartinei svetainei ar programai.

akordeono_medžiagos_projektas.html 2.87 tūkst 170 atsisiuntimų