Menú
Los menús muestran una lista de opciones en superficies temporales.
Un menú muestra una lista de opciones en una superficie temporal. Aparece cuando el usuario interactúa con un botón u otro control.
Introducción
Los menús se implementan utilizando una colección de componentes relacionados:
- Menú (
Menu): El contenedor/superficie del menú. - Elemento del menú (
MenuItem): Una opción para que los usuarios seleccionen del menú. - Lista de menús (
MenuList): Contenedor componible alternativo para los Elementos del Menú—vea Composición con Lista de Menús para más detalles.
Menú básico
Por defecto, un menú básico se abre sobre el elemento de anclaje (esta opción se puede cambiar mediante propiedades). Cuando se acerca a un borde de la pantalla, un menú básico se realinea verticalmente para asegurarse de que todos los elementos del menú sean completamente visibles.
Debe configurar el componente para que la selección de una opción la confirme inmediatamente y cierre el menú, como se muestra en la demostración siguiente.
Menú de iconos
En la vista de escritorio, se aumenta el relleno para dar más espacio al menú.
- Cortar
⌘X
- Copiar
⌘C
- Pegar
⌘V
- Portapapeles web
Menú denso
Para el menú que tiene una lista larga y un texto largo, puedes usar la propiedad dense para reducir el relleno y el tamaño del texto.
- Solo
- 1.15
- Doble
- Personalizado: 1.2
- Añadir espacio antes del párrafo
- Añadir espacio después del párrafo
- Espaciado personalizado...
Menú seleccionado
Si se utiliza para la selección de elementos, al abrirse, los menús simples colocan el foco inicial en el elemento de menú seleccionado.
El elemento de menú seleccionado se establece usando la propiedad selected (de ListItem).
Para utilizar un elemento de menú seleccionado sin afectar al foco inicial, establezca la propiedad variant en "menu".
Menú posicionado
Como el componente Menu utiliza el componente Popover para posicionarse, puedes utilizar el mismo positioning props para posicionarlo.
Por ejemplo, puedes mostrar el menú encima del ancla:
Composición con MenuList
El componente Menú (Menu) utiliza internamente el componente Popover.
Pero es posible que desee utilizar una estrategia de posicionamiento diferente, o que prefiera no bloquear el desplazamiento, por ejemplo.
El componente Lista de menús (MenuList) le permite componer su propio menú para este tipo de casos de uso; su finalidad principal es gestionar el foco.
Consulte la demostración siguiente para ver un ejemplo de composición que utiliza MenuList y sustituye el Popover predeterminado del menú por un componente Popper:
- Perfil
- Mi cuenta
- Cerrar sesión
Menú de cuenta
El contenido de Menu puede mezclarse con otros componentes como Avatar.
Contact
Profile
Personalización
Este es un ejemplo de personalización del componente. Puedes aprender más sobre esto en la página de documentación de overrides.
El MenuItem es una envoltura alrededor de ListItem con algunos estilos adicionales.
Puedes usar las mismas características de composición de listas con el componente MenuItem:
🎨 Si buscas inspiración, puedes consultar Ejemplos de personalización de MUI Treasury.
Altura máxima del menú
Si la altura de un menú impide que se muestren todos sus elementos, el menú puede desplazarse internamente.
Limitaciones
Existe un error de flexbox (Inglés) que impide que text-overflow: ellipsis funcione en un diseño flexbox.
Puede utilizar el componente Typography con noWrap para solucionar este problema:
Un breve mensaje
Un texto muy largo que se desborda
Un texto muy largo que se desborda
Cambiar transición
Utiliza una transición diferente.
Menú contextual
He aquí un ejemplo de menú contextual. (Haga clic con el botón derecho para abrirlo).
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam ipsum purus, bibendum sit amet vulputate eget, porta semper ligula. Donec bibendum vulputate erat, ac fringilla mi finibus nec. Donec ac dolor sed dolor porttitor blandit vel vel purus. Fusce vel malesuada ligula. Nam quis vehicula ante, eu finibus est. Proin ullamcorper fermentum orci, quis finibus massa. Nunc lobortis, massa ut rutrum ultrices, metus metus finibus ex, sit amet facilisis neque enim sed neque. Quisque accumsan metus vel maximus consequat. Suspendisse lacinia tellus a libero volutpat maximus.
Menú Agrupado
Mostrar categorías con el componente ListSubheader.
Proyectos complementarios
Para casos de uso más avanzados podrías aprovechar:
material-ui-popup-state
El paquete material-ui-popup-state que se encarga del estado del menú por ti en la mayoría de los casos.
Sin Estilos
Si quiere controlar completamente el diseño del componente, sin estilos de interfaz de usuario que modificar, use la versión U-Base. Esta versión sin estilos del componente es la opción ideal para una gran personalización con un tamaño de paquete más pequeño.
API
Consulte la siguiente documentación para obtener una referencia completa de todos los accesorios y clases disponibles para los componentes mencionados aquí.