Dropdown - EO Framework

Dropdown standard (liste)

<div class="wpeo-dropdown">
	<div class="dropdown-toggle wpeo-button button-main"><span>Label</span><i class="button-icon fas fa-caret-down"></i></div>
	<ul class="dropdown-content">
		<li class="dropdown-item">Item 1</li>
		<li class="dropdown-item">Item 2</li>
		<li class="dropdown-item">Item 3</li>
	</ul>
</div>

Dropdown grille

On peut ajouter le module Grid au module Dropdown. Les deux modules associés permettent un affichage grille en dropdown assez poussé.

<div class="wpeo-dropdown dropdown-grid">
	<div class="dropdown-toggle wpeo-button button-main"><span>Cliquer ici</span><i class="button-icon fas fa-caret-down"></i></div>
	<ul class="dropdown-content wpeo-grid grid-3">
		<li class="dropdown-item"><img src="url_de_mon_image" /></li>
		<li class="dropdown-item"><img src="url_de_mon_image" /></li>
		<li class="dropdown-item"><img src="url_de_mon_image" /></li>
	</ul>
</div>

Icones pour le Toggle

Le module bouton est compatible avec le module Dropdown. Certaines icones changent si le dropdown est activé ou non.

Flèche 1

<div class="wpeo-dropdown">
	<div class="dropdown-toggle wpeo-button button-main"><span>Cliquer ici</span><i class="button-icon fas fa-caret-down"></i></div>
	<ul class="dropdown-content">
		<li class="dropdown-item">Item 1</li>
	</ul>
</div>

Flèche 2

<div class="wpeo-dropdown">
	<div class="dropdown-toggle wpeo-button button-main"><span>Cliquer ici</span><i class="button-icon fas fa-caret-circle-down"></i></div>
	<ul class="dropdown-content">
		<li class="dropdown-item">Item 1</li>
	</ul>
</div>

Flèche 3

<div class="wpeo-dropdown">
	<div class="dropdown-toggle wpeo-button button-main"><span>Cliquer ici</span><i class="button-icon far fa-angle-down"></i></div>
	<ul class="dropdown-content">
		<li class="dropdown-item">Item 1</li>
	</ul>
</div>

Flèche 4

<div class="wpeo-dropdown">
	<div class="dropdown-toggle wpeo-button button-main"><span>Cliquer ici</span><i class="button-icon fas fa-chevron-circle-down"></i></div>
	<ul class="dropdown-content">
		<li class="dropdown-item">Item 1</li>
	</ul>
</div>

Icones liste

<div class="wpeo-dropdown">
	<div class="dropdown-toggle wpeo-button button-main"><span>Cliquer ici</span><i class="button-icon fas fa-caret-down"></i></div>
	<ul class="dropdown-content">
		<li class="dropdown-item"><i class="fas fa-archive fa-fw"></i> <span>Item 1</span></li>
		<li class="dropdown-item"><i class="fas fa-trash fa-fw"></i> <span>Item 2</span></li>
	</ul>
</div>

Alignement

Liste alignée sur la gauche du bouton

<div class="wpeo-dropdown dropdown-left">...</div>

Liste alignée sur la droite du bouton

<div class="wpeo-dropdown dropdown-right">...</div>

Taille

dropdown-small : Contenu de petite taille
dropdown-medium : Contenu de taille moyenne (par défaut)
dropdown-large : Contenu de grande taille

Padding

dropdown-padding-0 : Pas de padding pour le contenu
dropdown-padding-1 : Padding de 0.6em pour le contenu
dropdown-padding-2 : Padding de 1.2em pour le contenu