Context Menu

Um menu aberto com o botão direito, posicionado no ponteiro, com navegação por teclado.

Instalação

O Shadwire segue o modelo open code do shadcn/ui: o código-fonte do componente é copiado para o seu app e passa a ser seu. Instale com a CLI:

shadwire add context-menu --yes

O item context-menu do registry instala estes arquivos:

app/components/ui_component.rb
app/components/ui/context_menu_component.rb
app/components/ui/context_menu/trigger_component.rb
app/components/ui/context_menu/content_component.rb
app/components/ui/context_menu/item_component.rb
app/components/ui/context_menu/label_component.rb
app/components/ui/context_menu/separator_component.rb
app/components/ui/context_menu/group_component.rb
app/components/ui/context_menu/shortcut_component.rb
app/helpers/ui/context_menu_helper.rb
app/javascript/controllers/ui_context_menu_controller.js
vendor/shadwire/shadwire.css

Este componente usa Stimulus, então a aplicação precisa de importmap-rails e stimulus-rails com carregamento automático de controllers.

Ainda não instalou a CLI? gem install shadwire e depois shadwire init.

Uso

<%= ui_context_menu do %>
  <%= ui_context_menu_trigger { "Right-click here" } %>
  <%= ui_context_menu_content do %>
    <%= ui_context_menu_item { "Voltar" } %>
  <% end %>
<% end %>

Exemplos

Padrão

Uma área que abre o menu com o botão direito do mouse.

Right-click here

<%= ui_context_menu do %>
  <%= ui_context_menu_trigger(class: "flex h-32 w-72 items-center justify-center rounded-md border border-dashed text-sm text-muted-foreground") { "Right-click here" } %>
  <%= ui_context_menu_content(class: "w-48") do %>
    <%= ui_context_menu_label { "Actions" } %>
    <%= ui_context_menu_item do %>
      Back
      <%= ui_context_menu_shortcut { "⌘[" } %>
    <% end %>

<%= ui_context_menu do %>
  <%= ui_context_menu_trigger(class: "flex h-32 w-72 items-center justify-center rounded-md border border-dashed text-sm text-muted-foreground") { "Right-click here" } %>
  <%= ui_context_menu_content(class: "w-48") do %>
    <%= ui_context_menu_label { "Actions" } %>
    <%= ui_context_menu_item do %>
      Back
      <%= ui_context_menu_shortcut { "⌘[" } %>
    <% end %>
    <%= ui_context_menu_item { "Forward" } %>
    <%= ui_context_menu_separator %>
    <%= ui_context_menu_item(variant: :destructive) { "Delete" } %>
  <% end %>
<% end %>

Referência da API

Toda parte aceita class / class_name e **attrs.

Componente	Argumento	Padrão	Descrição
`ContextMenu::Item`	`inset`	`false`	Recua o texto para alinhar com os itens que têm ícone.
`ContextMenu::Item`	`variant`	`:default`	`:destructive` marca uma ação perigosa.
`ContextMenu::Item`	`disabled`	`false`	Desabilita: não recebe clique e o teclado o pula.
`ContextMenu::Item`	`tag`	`:button`	`:a` com `href:` para um item que navega.
`ContextMenu::Label`	`inset`	`false`	Recua o texto para alinhar com os itens que têm ícone.