Dropdown

Le contenu du menu déroulant est placé dans un slot="content", qui peut être n’importe quel élément HTML.

<script>
    import { Dropdown } from 'gros/dropdown'
</script>


<Dropdown>
    <button>Drop me!</button>
    <ul slot="content">
        <li>Option 1</li>
        <li>Option 2</li>
        <li>Option 3</li>
        <li>Option 4</li>
    </ul>
</Dropdown>

Placement

param	default	options	required
position	‘bottom’	bottom, bottom-start, bottom-end left, left-start, left-end top, top-start, top-end left, right-start, right-end	false
active	false	true, false	false
disabled	false	true, false	false

Le placement du menu s’adapte à l’espace disponible dans la fenêtre.

<Dropdown position="bottom-start">
    <button>Click</button>
    <aside slot="content">
        <!-- stuff -->
    </aside>
</Dropdown>

Empêcher la fermeture du menu

Par défaut le composant Dropdown se ferme dès le premier évènement click.

En passant le paramètre preventClosing au composant, le menu demeure affiché.

On peut définir un ou plusieurs éléments de fermeture en attributant la class close-dropdown.

<Dropdown preventClosing>
    <button>Drop me!</button>
    <ul slot="content">
        <li>No closure</li>
        <li class="close-dropdown">Close</li>
        <li>No closure</li>
        <li class="close-dropdown">Close</li>
    </ul>
</Dropdown>

Largeur prédéfinie du menu

Par défault le menu est redimensionné de manière à avoir une largeur égale ou supérieure à la largeur du déclencheur.

Dans certains cas, le menu a une largeur plus petite, prédéfinie, et un placement particulier.

On passe le paramètre fixedWidth pour empêcher le redimensionnement du menu.

<Dropdown fixedWidth position="bottom-end">
    <button>
        Drop me!
    </button>
    <ul slot="content">
        <li>Option 1</li>
        <li>Option 2</li>
        <li>Option 3</li>
        <li>Option 4</li>
    </ul>
</Dropdown>