Shadwire
Componentes

Combobox

Uma receita: Popover + Command. Não é um componente novo — instala popover e command.

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

O item combobox do registry instala estes arquivos:

  • app/components/ui_component.rb
  • vendor/shadwire/shadwire.css

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

Uso

<%= ui_popover do %>
  <%= ui_popover_trigger(variant: :outline) { "Selecione" } %>
  <%= ui_popover_content(class: "!p-0") do %>
    <%= ui_command do %>
      <%= ui_command_input(placeholder: "Buscar...") %>
      <%= ui_command_list do %>
        <%= ui_command_item(value: "rails") { "Rails" } %>
      <% end %>

Exemplos

Padrão

Gatilho de popover com uma lista de comandos buscável.

<%# Combobox = Popover + Command (a composition recipe, not a new component). %>
<%= ui_popover do %>
  <%= ui_popover_trigger(variant: :outline, class: "w-72 justify-between font-normal") do %>
    Selecione o framework
    <%= ui_icon("chevrons-up-down", class: "opacity-50") %>
  <% end %>
  <%= ui_popover_content(class: "!p-0") do %>
    <%= ui_command do %>