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 o seu app 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, 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_collapsible do %>
  <%= ui_collapsible_trigger { "Show more" } %>
  <%= ui_collapsible_content { "Hidden content." } %>
<% end %>

Exemplos

Padrão

Uma lista que mostra mais itens ao abrir.

@shadwire has 3 repositories

@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 has 3 repositories</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: "Toggle") %>
    <% end %>
  </div>
  <div class="rounded-md border px-4 py-2 font-mono text-sm">@shadwire/ui</div>

<%= 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 has 3 repositories</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: "Toggle") %>
    <% end %>
  </div>
  <div class="rounded-md border px-4 py-2 font-mono text-sm">@shadwire/ui</div>
  <%= ui_collapsible_content(open: true, class: "space-y-2") do %>
    <div class="rounded-md border px-4 py-2 font-mono text-sm">@shadwire/registry</div>
    <div class="rounded-md border px-4 py-2 font-mono text-sm">@shadwire/cli</div>
  <% end %>
<% end %>

Referência da API

Toda parte aceita class / class_name e **attrs.

Componente	Argumento	Padrão	Descrição
`Collapsible`	`open`	`false`	Começa aberto.
`Collapsible::Trigger`	`open`	`false`	Passe também o `open:` da raiz, para o servidor já renderizar o `aria-expanded` certo.
`Collapsible::Content`	`open`	`false`	Passe também o `open:` da raiz, para o conteúdo não ficar oculto até o controller conectar.