Menú

Componentes de menú de la RCL

Tabla de contenidos

PanMenuWrapper

Un contenedor adaptable alrededor de una lista de elementos de menú. Elige la presentación según el tamaño de pantalla y renderiza sus children dentro:

  • Desde el punto de corte sm: una ventana emergente MUI Menu estándar anclada a anchorEl (componente interno PanMenu).
  • Por debajo de sm: un cajón deslizable desde la parte inferior de la pantalla con un tirador, donde los hijos se colocan en un MenuList (componente interno PanMenuDrawer). anchorEl se ignora.

PanMenu y PanMenuDrawer son detalles de implementación y no se exportan; use PanMenuWrapper.

Propiedad Tipo Valor por defecto Qué hace
isOpen boolean obligatorio Indica si el menú (o el cajón) es visible. El componente padre gestiona este estado.
setIsOpen (open: boolean) => void obligatorio Función de actualización de estado llamada con false cuando el usuario descarta el menú (clic fuera, Escape o deslizar el cajón hacia abajo). Su código se encarga de volver a abrirlo.
anchorEl HTMLElement ninguno El elemento DOM junto al cual se posiciona la ventana emergente, normalmente el botón que la abrió (event.currentTarget). Solo se usa en pantallas grandes.
children ReactNode ninguno Las entradas del menú, normalmente elementos MUI MenuItem (con ListItemIcon y ListItemText) y Divider.

Ejemplos

Un menú abierto desde un botón:

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>

Hay demostraciones funcionales en src/componentDemos/V1.0 del repositorio core-client-rcl.