Maak accordeon met Material Design

Accordeons zijn een van de meest populaire manieren om informatie te ordenen en met behulp van verschillende effecten kunnen we de informatie die erin zit laten zien. Deze staan ​​al een tijdje op het web en we kunnen ze implementeren met frameworks zoals jQuery, Bootstrap en zelfs als we het aandurven om ze te bouwen met alleen gebruik van HTML5 Y CSS3.

Maar technologieën evolueren snel en hoewel het implementeren van een accordeon met behulp van de bovengenoemde kaders vrij eenvoudig is, zijn er nog steeds methoden die verder gaan dan deze eenvoud. Een daarvan is om het te doen met de nieuwe ontwerptaal genaamd Materiaal ontwerp en ons steunen vanuit het raamwerk materialiseren ervoor.

Accordeons in materiaalontwerp
accordeons in Materiaal ontwerp Ze zijn niet alleen eenvoudig te implementeren, we hebben er ook verschillende functionaliteiten voor, waardoor we een veel grotere variëteit hebben voor onze website, waaronder de volgende:

Accordeon
Het is de klassieker en maakt het mogelijk om de informatie te ordenen in blokken die na elkaar instorten wanneer erop wordt geklikt, deze worden gedefinieerd met de klasse opvouwbare accordeon.

Pop-out
Type accordeons pop-out voeg een nieuw effect toe aan de populaire component en combineer klassieke functionaliteit met veel uitgebreidere weergave-effecten, deze worden gedefinieerd met de klasse opvouwbare pop-out.

Uitbreidbaar
Eindelijk, de uitbreidbare accordeons of uitbreidbaar maakt het mogelijk om meerdere accordeons tegelijkertijd te openen, dat wil zeggen, de accordeon die deze asset niet zal sluiten als we een andere willen zien, om dit type accordeons te definiëren wordt het attribuut gebruikt gegevens-inklapbaar van het type uitbreidbaar.

Als we eenmaal weten wat de soorten accordeons zijn die we kunnen implementeren, gaan we een voorbeeld maken waarin we de drie typen op één pagina opnemen.

De webaccordeons implementeren

Het eerste dat u moet doen, is de bibliotheken van materialiseren, zowel het .js-bestand als de stylesheet van het framework, is het belangrijk dat we ook naar de pictogrammen linken om ze in ons voorbeeld te kunnen gebruiken en zonder de meest recente versie van te vergeten jQuery voor de JavaScript-bibliotheek van materialiseren:

Zodra dit is gebeurd, gaan we een structuur van drie containers maken voor elke accordeon die we implementeren, de eerste is de standaardaccordeon en om deze te definiëren, moeten we een structuur van ul en li maken die we zullen identificeren met de overeenkomstige klassen:

Standaard accordeon met materiaaldesign

filter_dramaEerst
Lorem ipsum pijn zit amet.

plaatsTweede
Lorem ipsum pijn zit amet.

wat is heetDerde
Lorem ipsum pijn zit amet.

Het is belangrijk om te vermelden dat we voor elk element binnen de accordeon de klassen van moeten definiëren opvouwbare header en de opvouwbaar lichaam, dat wil zeggen, de titel en de boodschap van elk, laten we eens kijken hoe onze eerste accordeon eruit ziet.

VERGROTEN

Zoals we kunnen zien, ziet het er best goed uit en hoefden we niets ingewikkelds te doen, nu gaan we onze accordeon van het pop-outtype maken, en hiervoor hoeven we alleen maar de klasse toe te voegen opvouwbare pop-out en behoud de structuur van het vorige voorbeeld waarmee we onze functionaliteit zullen creëren, laten we het codefragment hiervoor bekijken:

Eindelijk om onze uitbreidbare accordeon te maken, hoeven we alleen maar toe te voegen aan de gegevens-inklapbaar de optie uitbreidbaar en hoe we het voorheen deden, we onderhouden de structuur en we zouden onze functionaliteit al hebben:

Om te begrijpen hoe onze accordeons werken, laten we hieronder eens kijken hoe ze eruit zien.

Zoals we kunnen zien, hebben we in slechts een paar minuten een extreem krachtige en visueel indrukwekkende functionaliteit gecreëerd. Het is aan iedereen om het voorbeeld te nemen en het aan te passen aan hun behoeften om rijke en nuttige functionaliteiten te creëren voor elke huidige website of applicatie.

accordeon_material_design.html 2.87K 170 downloads