Menu
Os menus exibem uma lista de opções em superfícies temporárias.
O menu exibe uma lista de opções em uma superfície temporária. Aparece quando o usuário interage com um botão ou outro controle.
Menu básico
Um menu básico abre sobre o elemento âncora por padrão (esta opção pode ser alterada através de propriedades). Quando estão perto de uma borda da tela, menus básicos realinham verticalmente para garantir que todos os itens do menu fiquem completamente visíveis.
Escolhendo uma opção deve confirmar imediatamente a opção e fechar o menu.
Desambiguação: Em contraste com menus simples, uma caixa de diálogo simples pode apresentar detalhes adicionais relacionados às opções disponíveis para um item da lista ou fornecer navegação ou ações indiretas relacionada à tarefa principal. Embora eles possam exibir o mesmo conteúdo, menus simples são preferidos em relação a caixas de diálogo simples, porque menus simples são menos disruptivos no contexto atual do usuário.
- Cut
⌘X
- Copy
⌘C
- Paste
⌘V
- Web Clipboard
Menu posicionado
Para o menu que tem uma longa lista e um longo texto, você pode usar a propriedade dense para reduzir o tamanho do preenchimento e do texto.
- Single
- 1.15
- Double
- Custom: 1.2
- Add space before paragraph
- Add space after paragraph
- Custom spacing...
Composição de MenuList
Se usado para seleção de itens, quando abertos, menus simples colocam o foco inicial no item do menu selecionado. O item de menu atualmente selecionado é definido usando a propriedade selected (de ListItem). Para usar um item do menu selecionado sem impactar o foco inicial, defina a propriedade variant para "menu".
Menu customizado
Devido ao componente Menu usar o componente Popover para se posicionar, você pode usar as mesmas propriedades de posicionamento para posicioná-lo. Por exemplo, você pode exibir o menu abaixo da âncora:
Composição de MenuList
O componente Menu usa o componente Popover internamente. No entanto, você pode querer usar uma estratégia de posicionamento diferente ou não bloquear a rolagem. Para atender a essas situações, disponibilizamos um componente MenuList que você pode compor com o uso do Popper, veja o exemplo a seguir.
A principal responsabilidade do componente MenuList é manipular o foco.
- Profile
- My account
- Logout
Limitações
Se a altura de um menu impede que todos os itens de menu sejam exibidos, o menu terá internamente a opção de rolagem.
Contact
Profile
Trocar transição
Aqui está um exemplo de customização do componente. You can learn more about this in the overrides documentation page.
O MenuItem é um encapsulador em torno de ListItem com alguns estilos adicionais. Você pode usar os mesmos recursos de composição de lista com o componente MenuItem:
🎨 Se você está procurando inspiração, você pode verificar os exemplos de customização de MUI Treasury.
Menu de contexto
Se a altura de um menu impede que todos os itens de menu sejam exibidos, o menu terá internamente a opção de rolagem.
Projetos Complementares
Existe um problema com flexbox que impede text-overflow: ellipsis de funcionar em um leiaute flexível. Você pode usar o componente Typography com noWrap para solucionar esse problema:
A short message
A very long text that overflows
A very long text that overflows
Menu de contexto
Aqui está um exemplo de um menu de contexto. (Clique com o botão direito para abrir.)
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.
Projetos Complementares
Para situações de uso mais avançadas, você pode tirar proveito com:
PopupState helper
Existe um pacote de terceiros material-ui-popup-state que cuida do estado do menu para você na maioria das situações.
Unstyled
The component also comes with an unstyled version. It's ideal for doing heavy customizations and minimizing bundle size.