Opret harmonika med Material Design

Harmonika er en af ​​de mest populære måder at organisere information på, og derefter bruge forskellige effekter kan vi vise, at de oplysninger, der er indeholdt i dem. Disse har allerede været på nettet i et stykke tid, og vi kan implementere dem med rammer som f.eks jQuery, Bootstrap og selvom vi tør bygge dem ved kun at bruge HTML5 Y CSS3.

Men teknologier udvikler sig hurtigt, og selvom implementering af en harmonika ved hjælp af de ovennævnte rammer er ganske enkel, er der stadig metoder, der går ud over denne enkelhed. En af disse er at gøre det med det nye designsprog, der hedder Materialedesign og støtter os fra rammerne Materialiser for det.

Harmonika i materialedesign
Harmonikaer i Materialedesign De er ikke kun lette at implementere, vi har også flere funktioner til dem, hvilket giver os en meget bredere variation af vores websted, blandt dem har vi følgende:

Harmonika
Det er klassikeren og gør det muligt at organisere oplysningerne i blokke, der falder sammen efter hinanden, når der klikkes på dem, disse defineres med klassen sammenklappelig harmonika.

Pop ud
Skriv harmonikaer pop ud tilføj en ny effekt til den populære komponent og kombiner klassisk funktionalitet med meget mere detaljerede displayeffekter, disse er defineret med klassen sammenklappelig popout.

Kan udvides
Endelig harmonikaer, der kan udvides eller kan udvides gør det muligt at åbne flere harmonikaer på samme tid, det vil sige den harmonika, som dette aktiv ikke vil lukke, hvis vi vil se noget andet, for at definere denne type harmonika, attributten bruges data-sammenklappelig af typen kan udvides.

Når vi ved, hvilke typer harmonikaer vi kan implementere, skal vi lave et eksempel, hvor vi inkluderer de tre typer på en enkelt side.

Implementering af web -harmonikaer

Den første ting at gøre er at inkludere bibliotekerne i Materialiser, både .js -filen og rammens stilark, er det vigtigt, at vi også linker til ikonerne for at kunne bruge dem i vores eksempel og uden at glemme den seneste version af jQuery før JavaScript -biblioteket af Materialiser:

Når dette er gjort, skal vi oprette en struktur med tre containere for hver harmonika, som vi implementerer, den første vil være standard harmonika og for at definere den, skal vi oprette en struktur af ul og li, som vi vil identificere med tilsvarende klasser:

Standard harmonika med Material Design

filter_dramaFørst
Lorem ipsum smerter sidder amet.

placereAnden
Lorem ipsum smerter sidder amet.

whatshotTredje
Lorem ipsum smerter sidder amet.

Det er vigtigt at nævne, at vi for hvert element inden for harmonikaen skal definere klasserne sammenklappelig-header og sammenklappelig krop, det vil sige titlen og budskabet for hver enkelt, lad os se, hvordan vores første harmonika ser ud.

FORSTØRRE

Som vi kan se, ser det ganske godt ud, og vi behøvede ikke at gøre noget kompliceret, nu skal vi lave vores popout -harmonika, og til dette er det eneste, vi skal gøre, at tilføje klassen sammenklappelig popout og bevar strukturen i det foregående eksempel med, at vi vil oprette vores funktionalitet, lad os se kodestykket for dette:

Endelig for at skabe vores udvidelige harmonika behøver vi kun at tilføje til data-sammenklappelig muligheden kan udvides og hvordan vi gjorde tidligere, vedligeholdt vi strukturen, og vi ville allerede have vores funktionalitet:

For at forstå, hvordan vores harmonikaer fungerer, lad os se, hvordan de ser ud herunder.

Som vi kan se, har vi skabt en ekstremt kraftfuld og visuelt imponerende funktionalitet på få minutter, det er kun op til alle at tage eksemplet og tilpasse det til deres behov for at skabe rige og nyttige funktionaliteter til ethvert aktuelt websted eller program.

harmonika_materiale_design.html 2.87K 170 downloads