Menu

Composants de menu de la RCL

Table des matières

PanMenuWrapper

Un conteneur adaptatif autour d’une liste d’éléments de menu. Il choisit la présentation selon la taille de l’écran et affiche vos children à l’intérieur :

  • À partir du point de rupture sm : une fenêtre contextuelle MUI Menu standard ancrée à anchorEl (composant interne PanMenu).
  • Sous sm : un tiroir glissant depuis le bas de l’écran avec une poignée, où les enfants sont placés dans un MenuList (composant interne PanMenuDrawer). anchorEl est ignoré.

PanMenu et PanMenuDrawer sont des détails d’implémentation et ne sont pas exportés ; utilisez PanMenuWrapper.

Propriété Type Défaut Rôle
isOpen boolean obligatoire Indique si le menu (ou le tiroir) est visible. Le composant parent gère cet état.
setIsOpen (open: boolean) => void obligatoire Fonction de mise à jour d’état appelée avec false lorsque l’utilisateur ferme le menu (clic à l’extérieur, Échap, ou balayage du tiroir vers le bas). Votre code est responsable de le rouvrir.
anchorEl HTMLElement aucun L’élément DOM près duquel la fenêtre contextuelle est positionnée, généralement le bouton qui l’a ouverte (event.currentTarget). Utilisé uniquement sur les grands écrans.
children ReactNode aucun Les entrées du menu, typiquement des éléments MUI MenuItem (avec ListItemIcon et ListItemText) et des Divider.

Exemples

Un menu ouvert depuis un bouton :

const [isOpen, setIsOpen] = useState(false);
const [anchorEl, setAnchorEl] = useState(null);

<Button
  onClick={(event) => {
    setAnchorEl(event.currentTarget);
    setIsOpen(true);
  }}
>
  Open Menu
</Button>
<PanMenuWrapper isOpen={isOpen} setIsOpen={setIsOpen} anchorEl={anchorEl}>
  <MenuItem onClick={() => setIsOpen(false)}>
    <ListItemText>Rename</ListItemText>
  </MenuItem>
  <Divider />
  <MenuItem onClick={() => setIsOpen(false)}>
    <ListItemText>Delete</ListItemText>
  </MenuItem>
</PanMenuWrapper>

Des démonstrations fonctionnelles se trouvent dans src/componentDemos/V1.0 du dépôt core-client-rcl.