Shadwire
Componentes

Collapsible

Uma seção que expande e recolhe, controlada pelo controller ui-collapsible.

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

O item collapsible do registry instala estes arquivos:

  • app/components/ui_component.rb
  • app/components/ui/collapsible_component.rb
  • app/components/ui/collapsible/trigger_component.rb
  • app/components/ui/collapsible/content_component.rb
  • app/helpers/ui/collapsible_helper.rb
  • app/javascript/controllers/ui_collapsible_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_collapsible do %>
  <%= ui_collapsible_trigger { "Mostrar mais" } %>
  <%= ui_collapsible_content { "Conteúdo escondido." } %>
<% end %>

Exemplos

Padrão

Lista que revela itens adicionais.

@shadwire publicou 3 repositórios
@shadwire/ui
@shadwire/registry
@shadwire/cli
<%= ui_collapsible(open: true, class: "w-80 space-y-2") do %>
  <div class="flex items-center justify-between gap-4">
    <span class="text-sm font-semibold">@shadwire publicou 3 repositórios</span>
    <%= ui_collapsible_trigger(open: true, class: "inline-flex size-8 items-center justify-center rounded-md border") do %>
      <%= ui_icon("chevrons-up-down", label: "Alternar") %>
    <% end %>
  </div>
  <div class="rounded-md border px-4 py-2 font-mono text-sm">@shadwire/ui</div>