Créez un accordéon avec Material Design

Les accordéons sont l'un des moyens les plus populaires d'organiser l'information, puis en utilisant différents effets, nous pouvons montrer l'information qu'ils contiennent. Ceux-ci sont déjà sur le web depuis un certain temps et nous pouvons les implémenter avec des frameworks tels que jQuery, Amorcer et même si nous osons les construire en n'utilisant que HTML5 Oui CSS3.

Mais les technologies évoluent rapidement et bien que la mise en œuvre d'un accordéon en utilisant les frameworks susmentionnés soit assez simple, il existe encore des méthodes qui vont au-delà de cette simplicité. L'un d'eux est de le faire avec le nouveau langage de conception appelé Conception matérielle et nous soutenir depuis le cadre Se concrétiser pour cela.

Accordéons en Material Design
Accordéons en Conception matérielle Ils ne sont pas seulement faciles à mettre en œuvre, nous avons également plusieurs fonctionnalités pour eux, ce qui nous donne une plus grande variété pour notre site Web, parmi lesquels nous avons les suivants :

Accordéon
C'est le classique et permet d'organiser les informations en blocs qui s'effondrent les uns après les autres en cliquant dessus, ceux-ci sont définis avec la classe accordéon pliable.

Popout
Tapez les accordéons pop-out ajouter un nouvel effet au composant populaire et combiner des fonctionnalités classiques avec des effets d'affichage beaucoup plus élaborés, ceux-ci sont définis avec la classe popout pliable.

Extensible
Finalement, le accordéons extensibles ou extensible permet d'ouvrir plusieurs accordéons en même temps, c'est-à-dire l'accordéon que cet actif ne fermera pas si nous voulons en voir d'autres, pour définir ce type d'accordéons l'attribut est utilisé réductible aux données de genre extensible.

Une fois que nous savons quels sont les types d'accordéons que nous pouvons implémenter, nous allons faire un exemple où nous incluons les trois types dans une seule page.

Implémentation des accordéons web

La première chose à faire est d'inclure les bibliothèques de Se concrétiser, à la fois le fichier .js et la feuille de style du framework, il est important que l'on fasse aussi un lien vers les icônes pour pouvoir les utiliser dans notre exemple et sans oublier la version la plus récente de jQuery avant la bibliothèque JavaScript de Se concrétiser:

Une fois cela fait, nous allons créer une structure de trois conteneurs pour chaque accordéon que nous implémentons, le premier sera l'accordéon standard et pour le définir nous devrons créer une structure de ul et li que nous identifierons avec le cours correspondants :

Accordéon standard avec Material Design

filter_dramePremier
Lorem ipsum douleur s'asseoir amet.

endroitDeuxième
Lorem ipsum douleur s'asseoir amet.

ce qui est chaudLa troisième
Lorem ipsum douleur s'asseoir amet.

Il est important de mentionner que pour chaque élément au sein de l'accordéon, nous devons définir les classes de en-tête-pliable et le corps-pliable, c'est-à-dire le titre et le message de chacun, voyons à quoi ressemble notre premier accordéon.

AGRANDIR

Comme on peut le voir, ça a l'air plutôt bien et on n'a rien eu à faire de compliqué, maintenant on va créer notre accordéon de type popout, et pour cela, il suffit d'ajouter la classe popout pliable et gardons la structure de l'exemple précédent avec laquelle nous allons créer notre fonctionnalité, voyons l'extrait de code pour cela :

Enfin, pour créer notre accordéon extensible, nous n'avons qu'à ajouter au réductible aux données l'option extensible et comment nous faisions auparavant nous maintenions la structure et nous aurions déjà notre fonctionnalité :

Afin d'apprécier le fonctionnement de nos accordéons, voyons à quoi ils ressemblent ci-dessous.

Comme on peut le voir, nous avons créé en quelques minutes une fonctionnalité extrêmement puissante et visuellement impressionnante, il n'appartient qu'à chacun de prendre l'exemple et de l'adapter à ses besoins pour créer des fonctionnalités riches et utiles pour n'importe quel site web ou application actuel.

accordion_material_design.html 2.87K 170 téléchargements