Menu déroulant

Liste de menu s'affichant vers le bas. Trois déclencheurs : survol, clic, clic droit ; les éléments de menu peuvent porter un identifiant de commande et des séparateurs.

Menu déroulant

<template>
  <div class="demo-col" style="padding: 40px 0">
    <div class="demo-row" style="gap: 24px; flex-wrap: wrap; justify-content: center">
      <LhDropdown placement="bottom-start" @command="onCommand">
        <LhButton>Déclenchement au survol (par défaut)</LhButton>
        <template #dropdown>
          <LhDropdownItem command="copy">Copier l'inscription</LhDropdownItem>
          <LhDropdownItem command="move">Déplacer vers le rouleau</LhDropdownItem>
          <LhDropdownItem divided command="delete">Supprimer</LhDropdownItem>
        </template>
      </LhDropdown>
      <LhDropdown trigger="click" placement="bottom" :max-height="180" @command="onCommand">
        <LhButton>click + maxHeight</LhButton>
        <template #dropdown>
          <LhDropdownItem v-for="i in 8" :key="i" :command="'item-' + i">Option {{ i }}</LhDropdownItem>
        </template>
      </LhDropdown>
      <LhDropdown trigger="contextmenu" placement="bottom-end" @command="onCommand">
        <LhButton>Déclenchement par clic droit</LhButton>
        <template #dropdown>
          <LhDropdownItem command="ctx-a">Menu contextuel A</LhDropdownItem>
          <LhDropdownItem command="ctx-b" disabled>Menu contextuel B (désactivé)</LhDropdownItem>
        </template>
      </LhDropdown>
    </div>
    <p class="demo-note">Commande : {{ command || '(aucune)' }}</p>
    <p class="demo-note">Avec hideOnClick=false, le menu ne se referme pas après un clic sur un élément ; :visible.sync permet le contrôle manuel ; flip=false impose un positionnement strict.</p>
    <div class="demo-row" style="gap: 24px; flex-wrap: wrap; justify-content: center">
      <LhDropdown :hide-on-click="false" placement="top" @command="onCommand">
        <LhButton>hideOnClick=false</LhButton>
        <template #dropdown>
          <LhDropdownItem command="keep-1">Ne se referme pas après le clic</LhDropdownItem>
          <LhDropdownItem command="keep-2">Deuxième élément</LhDropdownItem>
        </template>
      </LhDropdown>
      <LhDropdown :visible.sync="manual" placement="top-start" :flip="false" popper-class="my-popper">
        <LhButton @click="manual = !manual">Interrupteur manuel ({{ manual ? "ouvert" : "fermé" }})</LhButton>
        <template #dropdown>
          <LhDropdownItem command="manual-1">Élément de menu manuel</LhDropdownItem>
        </template>
      </LhDropdown>
      <LhDropdown disabled>
        <LhButton disabled>disabled</LhButton>
        <template #dropdown>
          <LhDropdownItem command="never">N'apparaîtra pas</LhDropdownItem>
        </template>
      </LhDropdown>
    </div>
  </div>
</template>

<script>
export default {
  data: () => ({
    command: '',
    manual: false,
  }),
  methods: {
    onCommand(cmd) {
      this.command = String(cmd)
    },
  },
}
</script>

Props

Prop	Description	Type	Valeur par défaut
trigger	Mode de déclenchement	'hover' \| 'click' \| 'contextmenu'	'hover'
placement	Position d'affichage	'top' \| 'top-start' \| 'top-end' \| 'bottom' \| 'bottom-start' \| 'bottom-end' \| 'left' \| 'left-start' \| 'left-end' \| 'right' \| 'right-start' \| 'right-end'	'bottom'
flip	Inverser la direction lorsque l'espace sur l'axe principal est insuffisant (activé par défaut) ; à false, le positionnement suit strictement le placement et le dépassement du viewport est autorisé	boolean	true
visible	État d'affichage contrôlé manuellement (:visible.sync)	boolean	—
disabled	Désactivé ou non	boolean	false
hideOnClick	Fermer automatiquement après un clic sur un élément de menu ou non	boolean	true
teleportTarget	Cible de montage de la couche flottante (sélecteur ou élément, body par défaut ; pas de Teleport en 2.7, déplacement de l'hôte)	string \| HTMLElement	—
popperClass	Classe personnalisée de la couche flottante	string	—
maxHeight	Hauteur maximale du menu	string \| number	—
themeVars	Variables de thème au niveau du composant, remplaçant la configuration de ConfigProvider	Record<string, string>	—
bgPattern	Motif de fond au niveau du composant, remplaçant la configuration de ConfigProvider	string	—
sx	Raccourci de mise en page sx (agit sur l'élément racine du déclencheur)	—	—

DropdownItem Props

Prop	Description	Type	Valeur par défaut
command	Identifiant de commande, émis avec l'événement command lors du clic	string \| number	—
disabled	Désactivé ou non (conserve la possibilité de focus afin de rester dans l'arbre d'accessibilité)	boolean	false
divided	Afficher un séparateur ou non	boolean	false

Events

Événement	Description	Paramètre de rappel
command	Clic sur un élément de menu	La commande de l'élément
visible-change	Changement d'état d'affichage	boolean

Slots

Slot	Description
default	Déclencheur
dropdown	Contenu du menu (y placer des LhDropdownItem)