ContextMenu

Menu contextuel du clic droit avec sous-menus imbriqués et icônes.

Import

import { ContextMenu } from 'asterui'

Exemples

Menu contextuel de base

Cliquez avec le bouton droit sur l'élément pour afficher le menu.

</>

Right-click here

import { ContextMenu, notification } from 'asterui'

function App() {
  return (
      <ContextMenu onSelect={(key) => notification.info({ message: `Selected: ${key}` })}>
        <div className="p-8 bg-base-200 rounded-lg text-center cursor-context-menu">
          Right-click here
        </div>
        <ContextMenu.Item key="copy">Copy</ContextMenu.Item>
        <ContextMenu.Item key="paste">Paste</ContextMenu.Item>
        <ContextMenu.Item key="cut">Cut</ContextMenu.Item>
      </ContextMenu>
    )
}

export default App

Modèle piloté par données

Utiliser la prop items pour les menus pilotés par données.

</>

Right-click here

import { ContextMenu, notification } from 'asterui'

function App() {
  const items = [
    { key: 'copy', label: 'Copy' },
    { key: 'paste', label: 'Paste' },
    { key: 'cut', label: 'Cut' },
  ]
  
  return (
      <ContextMenu items={items} onSelect={(key) => notification.info({ message: `Selected: ${key}` })}>
        <div className="p-8 bg-base-200 rounded-lg text-center cursor-context-menu">
          Right-click here
        </div>
      </ContextMenu>
    )
}

export default App

Avec icônes

Éléments de menu avec icônes.

</>

Right-click for options

import { ContextMenu, notification } from 'asterui'

function App() {
  const items = [
    { key: 'edit', label: 'Edit', icon: <span>✏️</span> },
    { key: 'duplicate', label: 'Duplicate', icon: <span>📋</span> },
    { key: 'delete', label: 'Delete', icon: <span>🗑️</span>, danger: true },
  ]
  
  return (
      <ContextMenu items={items} onSelect={(key) => notification.info({ message: `Selected: ${key}` })}>
        <div className="p-8 bg-base-200 rounded-lg text-center cursor-context-menu">
          Right-click for options
        </div>
      </ContextMenu>
    )
}

export default App

Avec séparateurs

Séparer les sections de menu avec des séparateurs.

</>

Right-click for menu with sections

import { ContextMenu, notification } from 'asterui'

function App() {
  const items = [
    { key: 'undo', label: 'Undo' },
    { key: 'redo', label: 'Redo' },
    { key: 'divider1', divider: true },
    { key: 'cut', label: 'Cut' },
    { key: 'copy', label: 'Copy' },
    { key: 'paste', label: 'Paste' },
    { key: 'divider2', divider: true },
    { key: 'select-all', label: 'Select All' },
  ]
  
  return (
      <ContextMenu items={items} onSelect={(key) => notification.info({ message: `Selected: ${key}` })}>
        <div className="p-8 bg-base-200 rounded-lg text-center cursor-context-menu">
          Right-click for menu with sections
        </div>
      </ContextMenu>
    )
}

export default App

Sous-menu imbriqué

Éléments de menu avec sous-menus imbriqués.

</>

Right-click for nested menu

import { ContextMenu, notification } from 'asterui'

function App() {
  const items = [
    { key: 'new', label: 'New', children: [
      { key: 'new-file', label: 'File' },
      { key: 'new-folder', label: 'Folder' },
      { key: 'new-project', label: 'Project' },
    ]},
    { key: 'open', label: 'Open' },
    { key: 'save', label: 'Save' },
    { key: 'divider', divider: true },
    { key: 'export', label: 'Export', children: [
      { key: 'export-pdf', label: 'PDF' },
      { key: 'export-png', label: 'PNG' },
      { key: 'export-svg', label: 'SVG' },
    ]},
  ]
  
  return (
      <ContextMenu items={items} onSelect={(key) => notification.info({ message: `Selected: ${key}` })}>
        <div className="p-8 bg-base-200 rounded-lg text-center cursor-context-menu">
          Right-click for nested menu
        </div>
      </ContextMenu>
    )
}

export default App

Éléments désactivés

Certains éléments de menu peuvent être désactivés.

</>

Right-click (some items disabled)

import { ContextMenu, notification } from 'asterui'

function App() {
  const items = [
    { key: 'copy', label: 'Copy' },
    { key: 'paste', label: 'Paste', disabled: true },
    { key: 'cut', label: 'Cut' },
    { key: 'delete', label: 'Delete', danger: true, disabled: true },
  ]
  
  return (
      <ContextMenu items={items} onSelect={(key) => notification.info({ message: `Selected: ${key}` })}>
        <div className="p-8 bg-base-200 rounded-lg text-center cursor-context-menu">
          Right-click (some items disabled)
        </div>
      </ContextMenu>
    )
}

export default App

API

ContextMenu

Propriété	Description	Type	Défaut
children	Élément qui déclenche le menu contextuel au clic droit	React.ReactNode	-
items	Éléments de menu	ContextMenuItem[]	-
onSelect	Callback lorsqu’un élément est sélectionné	(key: string) => void	-
disabled	Si le menu contextuel est désactivé	boolean	false
className	Classes CSS supplémentaires pour le menu	string	-
data-testid	ID de test pour les tests	string	-

ContextMenuItem (pour la prop items)

Propriété	Description	Type	Défaut
key	Identifiant unique pour l’élément	string	-
label	Libellé d’affichage	React.ReactNode	-
icon	Élément d’icône	React.ReactNode	-
disabled	État désactivé	boolean	false
danger	Afficher comme action dangereuse/destructive	boolean	false
divider	Rendre comme séparateur	boolean	false
children	Éléments de sous-menu	ContextMenuItem[]	-
data-testid	ID de test pour les tests	string	-

ContextMenu.Item (modèle composé)

Propriété	Description	Type	Défaut
key	Clé unique pour l’élément (prop key React)	string	-
children	Contenu de l’élément	React.ReactNode	-
icon	Icône à afficher avant le libellé	React.ReactNode	-
disabled	Si l’élément est désactivé	boolean	false
danger	Afficher comme action dangereuse/destructive	boolean	false
data-testid	ID de test pour les tests	string	-

ContextMenu.SubMenu (modèle composé)

Propriété	Description	Type	Défaut
key	Clé unique pour le sous-menu (prop key React)	string	-
label	Libellé du sous-menu	React.ReactNode	-
icon	Icône à afficher avant le libellé	React.ReactNode	-
disabled	Si le sous-menu est désactivé	boolean	false
children	Éléments de sous-menu	React.ReactNode	-
data-testid	ID de test pour les tests	string	-

Accessibilité

• Le menu se ferme à la pression de la touche Échap
• Le menu se ferme lors d’un clic à l’extérieur
• Les éléments de menu sont navigables au clavier
• Les éléments désactivés sont correctement annoncés