Izveidojiet akordeonu ar materiāla dizainu

Akordeoni ir viens no populārākajiem informācijas sakārtošanas veidiem, un pēc tam, izmantojot dažādus efektus, mēs varam parādīt šo informāciju. Tie jau kādu laiku ir bijuši tīmeklī, un mēs varam tos ieviest, izmantojot tādas sistēmas kā jQuery, Bootstrap un pat ja mēs uzdrošināmies tos veidot, izmantojot tikai to HTML5 Y CSS3.

Taču tehnoloģijas strauji attīstās, un, lai gan akordeona ieviešana, izmantojot iepriekšminētos ietvarus, ir pavisam vienkārša, joprojām pastāv metodes, kas pārsniedz šo vienkāršību. Viens no tiem ir to darīt ar jauno dizaina valodu, ko sauc Materiālu dizains un atbalsta mūs no ietvara Materializēties par to.

Akordeoni materiālu dizainā
Akordeoni iekšā Materiālu dizains Tos ir ne tikai viegli ieviest, bet arī tiem ir vairākas funkcijas, kas mūsu vietnei sniedz daudz plašāku iespēju klāstu, starp kurām ir šādas:

Akordeons
Tā ir klasika un ļauj sakārtot informāciju blokos, kas sabrūk viens pēc otra, noklikšķinot uz tiem, tie tiek definēti kopā ar klasi saliekams akordeons.

Izlekt
Rakstiet akordeonus izlekt pievienojiet jaunu efektu populārajam komponentam un apvienojiet klasisko funkcionalitāti ar daudz sarežģītākiem displeja efektiem, tie tiek definēti kopā ar klasi saliekams uznirstošais logs.

Paplašināms
Visbeidzot ,. paplašināmi akordeoni vai paplašināms ļauj vienlaikus atvērt vairākus akordeonus, tas ir, akordeonu, kuru šis īpašums neaizvērs, ja mēs vēlamies redzēt kādu citu, lai definētu šāda veida akordeonus. datu saliekams tipa paplašināms.

Kad mēs zinām, kādus akordeonu veidus mēs varam īstenot, mēs izveidosim piemēru, kurā trīs veidus iekļausim vienā lapā.

Tīmekļa akordeonu ieviešana

Pirmā lieta, kas jādara, ir iekļaut bibliotēkas Materializēties, gan .js failu, gan ietvara stila lapu, ir svarīgi, lai mēs arī izveidotu saiti uz ikonām, lai tās varētu izmantot mūsu piemērā un neaizmirstot jaunāko jQuery pirms JavaScript bibliotēkas Materializēties:

Kad tas būs izdarīts, mēs katram akordeonam izveidosim trīs konteineru struktūru, pirmais būs standarta akordeons, un, lai to definētu, mums būs jāizveido ul un li struktūra, ko mēs identificēsim ar atbilstošās klases:

Standarta akordeons ar materiāla dizainu

filter_dramaVispirms
Lorem ipsum sāpes sēdēt.

vietaOtrais
Lorem ipsum sāpes sēdēt.

kāds ir šāviensTrešais
Lorem ipsum sāpes sēdēt.

Ir svarīgi pieminēt, ka katram akordeona elementam mums ir jānosaka klases saliekams-galvene un saliekams korpuss, tas ir, katra nosaukums un vēstījums, paskatīsimies, kā izskatās mūsu pirmais akordeons.

PALIELINĀT

Kā redzam, tas izskatās diezgan labi, un mums nebija jādara nekas sarežģīts, tagad mēs izveidosim savu popout tipa akordeonu, un šim nolūkam mums tikai jāpievieno klase saliekams uznirstošais logs un saglabājiet iepriekšējā piemēra struktūru, lai mēs izveidotu savu funkcionalitāti, apskatīsim šī koda fragmentu:

Visbeidzot, lai izveidotu mūsu paplašināmo akordeonu, mums tas tikai jāpievieno datu saliekams iespēja paplašināms un kā mēs to darījām iepriekš, mēs saglabājam struktūru un mums jau būtu sava funkcionalitāte:

Lai novērtētu mūsu akordeonu darbību, aplūkosim, kā tie izskatās zemāk.

Kā redzam, mēs dažu minūšu laikā esam izveidojuši ārkārtīgi jaudīgu un vizuāli iespaidīgu funkcionalitāti, tikai katram pašam ir jāņem piemērs un jāpielāgo tas savām vajadzībām, lai izveidotu bagātīgas un noderīgas funkcijas jebkurai pašreizējai vietnei vai lietojumprogrammai.

akordeona_materiālu_dizains.html 2.87K 170 lejupielādes