Ravox KitSobreposição
Menu de contexto
O menu do botão direito, na posição do cursor. Abre também com Shift+F10 ou a tecla de menu (junto do elemento em foco) e segurando o dedo no toque; o botão ⋯ (MenuContextoGatilho) abre o mesmo menu para leitor de tela e para quem não conhece o toque longo. Usa os mesmos itens do Menu: marcar, escolha única, submenu, atalhos.
Botão direito num arquivo, toque longo ou ⋯ no celular, Shift+F10 no teclado
Ajustes
Exemplos
Quadro de desenho
Quadro · 100%
Num elemento qualquer (asChild)
Entrega prevista para 12 de outubro. O cliente pediu para ligar antes, no (11) 98765-4321.
Instalação
O shadcn cria components/ui/menu-contexto.tsx no seu projeto e instala o tema junto. O arquivo é seu: edite à vontade.
npx shadcn@latest add https://ui.ravoxlabs.com/r/menu-contexto.jsonOpções
| Opção | Tipo | Padrão | O que faz |
|---|---|---|---|
| <MenuContexto aberto aoMudar> | boolean / (aberto) => void | — | A raiz. Solto por padrão. |
| <MenuContextoArea asChild desabilitado> | boolean / boolean | — | A região que responde ao botão direito. Qualquer elemento com foco dentro dela abre o menu pelo teclado. desabilitado devolve o menu do navegador. |
| <MenuContextoGatilho aria-label> | ComponentProps<"button"> | — | Botão ⋯ ("Mais ações" por padrão) que abre o mesmo menu logo abaixo dele. Use junto do alvo: com leitor de tela no celular o toque longo não é confiável. O foco volta para ele ao fechar. |
| <MenuContextoConteudo> | ComponentProps<"div"> | — | A caixa do menu. Dê um aria-label (ex.: "Ações do arquivo"): não há botão para nomeá-la. |
| <MenuContextoItem icone atalho destrutivo aoEscolher> | ReactNode / string / boolean / (e) => void | — | Igual ao <MenuItem> (é o mesmo componente). |
| Marcavel, Radio, RadioItem, Grupo, Rotulo, Separador, Sub… | — | — | Os mesmos do Menu, com o prefixo MenuContexto. Instala o menu junto. |