Dropdown

Le menu déroulant affiche un contenu contextuel, généralement associé à un menu.

Utilisation

Importez le composant :

import 'mdui/components/dropdown.js';

Importez le type TypeScript correspondant :

import type { Dropdown } from 'mdui/components/dropdown.js';

Exemple d'utilisation :

Ouvrir

Élément 1

Élément 2

<mdui-dropdown>
  <mdui-button slot="trigger">Ouvrir</mdui-button>
  <mdui-menu>
    <mdui-menu-item>Élément 1</mdui-menu-item>
    <mdui-menu-item>Élément 2</mdui-menu-item>
  </mdui-menu>
</mdui-dropdown>

Exemples

État désactivé

Ajoutez l'attribut disabled pour désactiver le menu déroulant.

Ouvrir

Élément 1

Élément 2

<mdui-dropdown disabled>
  <mdui-button slot="trigger">Ouvrir</mdui-button>
  <mdui-menu>
    <mdui-menu-item>Élément 1</mdui-menu-item>
    <mdui-menu-item>Élément 2</mdui-menu-item>
  </mdui-menu>
</mdui-dropdown>

Source

Position d'ouverture

Utilisez l'attribut placement pour définir la position du menu déroulant.

Ouvrir

Élément 1

Élément 2

<mdui-dropdown placement="right-start">
  <mdui-button slot="trigger">Ouvrir</mdui-button>
  <mdui-menu>
    <mdui-menu-item>Élément 1</mdui-menu-item>
    <mdui-menu-item>Élément 2</mdui-menu-item>
  </mdui-menu>
</mdui-dropdown>

Source

Mode de déclenchement

Utilisez l'attribut trigger pour choisir le mode d'ouverture du menu déroulant.

Ouvrir

Élément 1

Élément 2

<mdui-dropdown trigger="hover">
  <mdui-button slot="trigger">Ouvrir</mdui-button>
  <mdui-menu>
    <mdui-menu-item>Élément 1</mdui-menu-item>
    <mdui-menu-item>Élément 2</mdui-menu-item>
  </mdui-menu>
</mdui-dropdown>

Source

Ouverture à la position du pointeur

Ajoutez l'attribut open-on-pointer pour ouvrir le menu à la position du pointeur. On l'associe souvent à trigger="contextmenu" pour créer un menu contextuel.

Faites un clic droit dans cette zone pour ouvrir le menu

Élément 1

Élément 2

<mdui-dropdown trigger="contextmenu" open-on-pointer>
  <mdui-card slot="trigger" style="width:100%;height: 80px">Faites un clic droit dans cette zone pour ouvrir le menu</mdui-card>
  <mdui-menu>
    <mdui-menu-item>Élément 1</mdui-menu-item>
    <mdui-menu-item>Élément 2</mdui-menu-item>
  </mdui-menu>
</mdui-dropdown>

Source

Maintenir le menu ouvert après clic

Dans un menu déroulant, cliquer sur un élément du menu le ferme par défaut. Ajoutez l'attribut stay-open-on-click pour empêcher cette fermeture et laisser le menu déroulant ouvert après le clic.

Ouvrir

Élément 1

Élément 2

<mdui-dropdown trigger="click" stay-open-on-click>
  <mdui-button slot="trigger">Ouvrir</mdui-button>
  <mdui-menu>
    <mdui-menu-item>Élément 1</mdui-menu-item>
    <mdui-menu-item>Élément 2</mdui-menu-item>
  </mdui-menu>
</mdui-dropdown>

Source

Délai d'ouverture/fermeture

Lorsque trigger="hover" est défini, vous pouvez utiliser les attributs open-delay et close-delay pour définir les délais d'ouverture et de fermeture.

Ouvrir

Élément 1

Élément 2

<mdui-dropdown trigger="hover" open-delay="1000" close-delay="1000">
  <mdui-button slot="trigger">Ouvrir</mdui-button>
  <mdui-menu>
    <mdui-menu-item>Élément 1</mdui-menu-item>
    <mdui-menu-item>Élément 2</mdui-menu-item>
  </mdui-menu>
</mdui-dropdown>

Source

API

Propriétés

Attribut HTML	Propriété JavaScript	Type	Défaut
`open`	`open`	`boolean`	`false`
Si le Dropdown est ouvert
`disabled`	`disabled`	`boolean`	`false`
Si le Dropdown est désactivé
`trigger`	`trigger`	`'click' \| 'hover' \| 'focus' \| 'contextmenu' \| 'manual' \| string`	`'click'`
Mode d'ouverture du Dropdown. Il accepte plusieurs valeurs, séparées par des espaces. Les valeurs possibles incluent : `click` : Se déclenche au clic `hover` : Se déclenche au survol de la souris `focus` : Se déclenche au focus `contextmenu` : Se déclenche au clic droit ou par un appui long `manual` : Ne peut être ouvert ou fermé que par programmation, aucun autre mode de déclenchement ne peut être spécifié
`placement`	`placement`	`'auto' \| 'top-start' \| 'top' \| 'top-end' \| 'bottom-start' \| 'bottom' \| 'bottom-end' \| 'left-start' \| 'left' \| 'left-end' \| 'right-start' \| 'right' \| 'right-end'`	`'auto'`
Position du contenu du Dropdown. Les valeurs possibles incluent : `auto` : Position déterminée automatiquement `top-start` : En haut, aligné à gauche `top` : En haut, centré `top-end` : En haut, aligné à droite `bottom-start` : En bas, aligné à gauche `bottom` : En bas, centré `bottom-end` : En bas, aligné à droite `left-start` : À gauche, aligné en haut `left` : À gauche, centré `left-end` : À gauche, aligné en bas `right-start` : À droite, aligné en haut `right` : À droite, centré `right-end` : À droite, aligné en bas
`stay-open-on-click`	`stayOpenOnClick`	`boolean`	`false`
Après un clic sur `<mdui-menu-item>`, le Dropdown reste-t-il ouvert ?
`open-delay`	`openDelay`	`number`	`150`
Délai d'ouverture du Dropdown lors du déclenchement par survol de la souris, en millisecondes.
`close-delay`	`closeDelay`	`number`	`150`
Délai de fermeture du Dropdown lors du déclenchement par survol de la souris, en millisecondes.
`open-on-pointer`	`openOnPointer`	`boolean`	`false`
Indique si le Dropdown doit s'ouvrir à l'endroit du pointeur, ce qui est souvent utile pour afficher un menu contextuel.

Événements

Nom
`open`
Se déclenche lorsque le Dropdown commence à s'ouvrir. Vous pouvez empêcher l'ouverture du Dropdown en appelant `event.preventDefault()`.
`opened`
Se déclenche lorsque l'animation d'ouverture du Dropdown est terminée.
`close`
Se déclenche lorsque le Dropdown commence à se fermer. Vous pouvez empêcher la fermeture du Dropdown en appelant `event.preventDefault()`.
`closed`
Se déclenche lorsque l'animation de fermeture du Dropdown est terminée.

Slots

Nom
Défaut
Contenu du Dropdown
`trigger`
Élément déclencheur du Dropdown, par exemple un élément `<mdui-button>`.

CSS Parts

Nom
`trigger`
Conteneur de l'élément déclencheur du Dropdown, c'est-à-dire le conteneur du slot `trigger`.
`panel`
Conteneur du contenu du Dropdown

Propriétés CSS personnalisées

Nom
`--z-index`
Valeur CSS `z-index` du composant.

Chapitre précédent

Divider

Chapitre suivant

Fab