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 o seu app 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, 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_resizable_panel_group(direction: :horizontal) do %>
  <%= ui_resizable_panel(default_size: 50) { "One" } %>
  <%= ui_resizable_handle %>
  <%= ui_resizable_panel(default_size: 50) { "Two" } %>
<% end %>

Exemplos

Padrão

Dois painéis horizontais com uma alça.

One

Two

<%= 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") { "One" } %>
  <%= ui_resizable_handle(with_handle: true) %>
  <%= ui_resizable_panel(default_size: 50, class: "flex items-center justify-center p-6 font-semibold") { "Two" } %>
<% end %>

Referência da API

Toda parte aceita class / class_name e **attrs.

Componente	Argumento	Padrão	Descrição
`ResizablePanelGroup`	`direction`	`:horizontal`	`:horizontal` para painéis lado a lado, `:vertical` para empilhados.
`ResizablePanel`	`default_size`	`nil`	A fatia inicial do painel, como um peso relativo aos irmãos.
`ResizableHandle`	`with_handle`	`false`	Desenha uma alça no divisor.