Context Menu
Um menu de contexto com suporte a grupos, atalhos, ícones, submenus, e seleção por radio ou checkbox.
Clique com o botão direito aqui
Utilização
index.tsx
import {
ContextMenu,
ContextMenuTrigger,
ContextMenuContent,
ContextMenuItem,
ContextMenuSeparator,
ContextMenuShortcut
} from "@convertcompany/ui";
Exemplos
Com atalhos
Clique com o botão direito aqui
Com grupos e rótulos
Clique com o botão direito aqui
Com submenus
Clique com o botão direito aqui
Com Checkbox e Radio
Clique com o botão direito aqui
Props
Este componente é baseado na biblioteca Radix UI Context Menu, e suas props seguem os padrões dos componentes Radix.
ContextMenu
| Propriedade | Tipo |
|---|---|
| childrenConteúdo que envolve o trigger e o menu. | ReactNode |
ContextMenuTrigger
| Propriedade | Tipo |
|---|---|
| asChildPermite renderizar o trigger como um elemento filho. | boolean |
ContextMenuContent
| Propriedade | Tipo |
|---|---|
| classNameClasse CSS adicional para o conteúdo do menu. | string |
| childrenItens e grupos dentro do menu. | ReactNode |
ContextMenuItem, ContextMenuCheckboxItem, ContextMenuRadioItem
| Propriedade | Tipo |
|---|---|
| childrenConteúdo do item. | ReactNode |
| classNameClasse CSS adicional. | string |
| onSelectFunção executada ao selecionar o item. | () => void |
| checkedEstado de seleção (apenas checkbox/radio). | boolean |
ContextMenuSub, ContextMenuSubTrigger, ContextMenuSubContent
| Propriedade | Tipo |
|---|---|
| childrenConteúdo do submenu. | ReactNode |
| classNameClasse CSS adicional. | string |
ContextMenuLabel, ContextMenuGroup, ContextMenuSeparator
| Propriedade | Tipo |
|---|---|
| childrenConteúdo do componente. | ReactNode |
| classNameClasse CSS adicional. | string |
ContextMenuShortcut
| Propriedade | Tipo |
|---|---|
| childrenTexto do atalho exibido no item. | ReactNode |
| classNameClasse CSS adicional. | string |