Dropdown

Le contenu du menu déroulant est placé dans le #snippet content().

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

<Dropdown>
    <div>Drop me!</div>
    {#snippet content()}
    <ul>
        <li>Option 1</li>
        <li>Option 2</li>
        <li>Option 3</li>
        <li>Option 4</li>
    </ul>
    {/snippet}
</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>
    {#snippet content()}
        <!-- stuff -->
    {/snippet}
</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>
    {#snippet content()}
        <ul>
            <li>No closure</li>
            <li class="close-dropdown">Close</li>
            <li>No closure</li>
            <li class="close-dropdown">Close</li>
        </ul>
    {/snippet}
</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>
    {#snippet content()}
        <ul slot="content">
            <li>Option 1</li>
            <li>Option 2</li>
            <li>Option 3</li>
            <li>Option 4</li>
        </ul>
    {/snippet}
</Dropdown>