Shadwire
Componentes

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 a sua aplicação 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: 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 { "Clique com o botão direito" } %>
  <%= ui_context_menu_content do %>
    <%= ui_context_menu_item { "Voltar" } %>
  <% end %>
<% end %>

Exemplos

Padrão

Área que abre o menu no clique direito.

Clique com o botão direito aqui
<%= 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") { "Clique com o botão direito aqui" } %>
  <%= ui_context_menu_content(class: "w-48") do %>
    <%= ui_context_menu_label { "Ações" } %>
    <%= ui_context_menu_item do %>
      Voltar
      <%= ui_context_menu_shortcut { "⌘[" } %>
    <% end %>