Resizable

Painéis redimensionáveis com alças arrastáveis e ajuste 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 resizable --yes

O item resizable do registry instala estes arquivos:

app/components/ui_component.rb
app/components/ui/resizable_panel_group_component.rb
app/components/ui/resizable_panel_component.rb
app/components/ui/resizable_handle_component.rb
app/helpers/ui/resizable_helper.rb
app/javascript/controllers/ui_resizable_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_resizable_panel_group(direction: :horizontal) do %>
  <%= ui_resizable_panel(default_size: 50) { "Um" } %>
  <%= ui_resizable_handle %>
  <%= ui_resizable_panel(default_size: 50) { "Dois" } %>
<% end %>

Exemplos

Padrão

Dois painéis horizontais com uma alça.

Dois

<%= ui_resizable_panel_group(direction: :horizontal, class: "h-48 max-w-md rounded-lg border") do %>
  <%= ui_resizable_panel(default_size: 50, class: "flex items-center justify-center p-6 font-semibold") { "Um" } %>
  <%= ui_resizable_handle(with_handle: true) %>
  <%= ui_resizable_panel(default_size: 50, class: "flex items-center justify-center p-6 font-semibold") { "Dois" } %>
<% end %>