Dropdown Menu (BcDropdownMenu) ​

Menu contextuel déclenché par un bouton, avec liste d'items configurable. Utilisé dans les tables et cartes pour les actions contextuelles sur un enregistrement.

Démo ​

Implémentation ​

vue
<script setup>
const menuItems = [
  { id: 'view',   label: 'Voir le détail' },
  { id: 'edit',   label: 'Modifier' },
  { id: 'export', label: 'Exporter' },
  { id: 'delete', label: 'Supprimer' },
]
</script>

<BcDropdownMenu
  :items="menuItems"
  trigger-label="Actions"
  @select="({ id, item, index }) => handleAction(id)"
/>

Props ​

PropTypeDéfautDescription
itemsDropdownItem[][]Liste des items { id, label, disabled? }
triggerLabelString"Actions"Texte du bouton déclencheur
menuLabelString—Label ARIA du menu (accessibilité)
disabledBooleanfalseDésactive tout le composant

Type DropdownItem ​

typescript
interface DropdownItem {
  id: string
  label: string
  disabled?: boolean
}

Événements ​

ÉvénementPayloadDescription
@select{ id, item, index }Émis au clic sur un item non désactivé

Slot personnalisé ​

vue
<!-- Rendu personnalisé de chaque item -->
<BcDropdownMenu :items="menuItems" @select="handleAction">
  <template #item="{ item, index }">
    <span>{{ item.label }}</span>
  </template>
</BcDropdownMenu>

Cas d'usage ​

Bouton "Actions" dans la colonne droite d'une DataGrid :

vue
<!-- Dans un slot cell-actions de BcDataGrid -->
<template #cell-actions="{ row }">
  <BcDropdownMenu
    :items="[
      { id: 'view',   label: 'Voir le détail' },
      { id: 'edit',   label: 'Modifier' },
      { id: 'delete', label: 'Supprimer' },
    ]"
    trigger-label="···"
    @select="({ id }) => handleRowAction(id, row)"
  />
</template>

Règles d'utilisation ​

  • Items désactivés : utiliser disabled: true sur l'item — l'item reste visible mais non cliquable
  • Ordre : actions primaires en haut, actions destructives en bas (utiliser disabled pour les séparer visuellement si nécessaire)
  • Trigger : le triggerLabel est affiché tel quel dans le bouton — utiliser "···" pour un icon-only contextuel dans les tables