Shadwire
Componentes

Menubar

Uma barra de menus horizontal (padrão WAI-ARIA menubar) coordenada por um controller.

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 menubar --yes

O item menubar do registry instala estes arquivos:

  • app/components/ui_component.rb
  • app/components/ui/menubar_component.rb
  • app/components/ui/menubar/menu_component.rb
  • app/components/ui/menubar/trigger_component.rb
  • app/components/ui/menubar/content_component.rb
  • app/components/ui/menubar/item_component.rb
  • app/components/ui/menubar/separator_component.rb
  • app/components/ui/menubar/label_component.rb
  • app/components/ui/menubar/shortcut_component.rb
  • app/helpers/ui/menubar_helper.rb
  • app/javascript/controllers/ui_menubar_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_menubar do %>
  <%= ui_menubar_menu do %>
    <%= ui_menubar_trigger { "Arquivo" } %>
    <%= ui_menubar_content do %>
      <%= ui_menubar_item { "Novo" } %>
    <% end %>
  <% end %>
<% end %>

Exemplos

Padrão

Dois menus com itens, separadores e atalhos.

<%= ui_menubar do %>
  <%= ui_menubar_menu do %>
    <%= ui_menubar_trigger { "Arquivo" } %>
    <%= ui_menubar_content do %>
      <%= ui_menubar_item do %>
        Novo
        <%= ui_menubar_shortcut { "⌘N" } %>
      <% end %>