Primitivelayout

Resizable

Stable

Primitive de layout para painéis que o usuário redimensiona arrastando, ou pelo teclado, a borda entre eles. Composto sobre react-resizable-panels, que guarda o layout em porcentagens e expõe cada borda como um separator focável; o grupo ocupa a caixa que o envolve, em linha ou em coluna, e pode ser aninhado.

Instalação

npx up-web-ds add resizable

Preview

Basic

Navegação

Conteúdo

Default

Navegação

Conteúdo

Vertical

Cabeçalho

Resultados da validação

With Handle

Arquivos

Editor

Nested

Catálogo

Código-fonte

Console

All states

Basic

Navegação

Conteúdo

Default

Navegação

Conteúdo

Vertical

Cabeçalho

Resultados da validação

With Handle

Arquivos

Editor

Nested

Catálogo

Código-fonte

Console

Usage

@/components/ui/resizable

import {
  ResizableHandle,
  ResizablePanel,
  ResizablePanelGroup,
} from '@/components/ui/resizable'

Resizable

1
2
3
4
5<ResizablePanelGroup>
  <ResizablePanel>Navegação</ResizablePanel>
  <ResizableHandle aria-label="Redimensionar a navegação" />
  <ResizablePanel>Conteúdo</ResizablePanel>
</ResizablePanelGroup>

Props

ResizablePanelGroup

Props de ResizablePanelGroup
Prop	Type	Default	Description
defaultLayout	`Layout`	sem valor padrão	Default layout for the Group. ℹ️ This value allows layouts to be remembered between page reloads. ⚠️ Slight layout shift may occur when server-rendering panels with percentage-based default sizes. Refer to the documentation for suggestions on how to minimize the impact of this.
disableCursor	`boolean`	sem valor padrão	This library sets custom mouse cursor styles to indicate drag state. Use this prop to disable that behavior for Panels and Separators in this group.
disabled	`boolean`	sem valor padrão	Disable resize functionality.
elementRef	`Ref<HTMLDivElement \| null>`	sem valor padrão	Ref attached to the root `HTMLDivElement`.
groupRef	`Ref<GroupImperativeHandle \| null>`	sem valor padrão	Exposes the following imperative API: - `getLayout(): Layout` - `setLayout(layout: Layout): void` ℹ️ The `useGroupRef` and `useGroupCallbackRef` hooks are exported for convenience use in TypeScript projects.
onLayoutChange	`((layout: Layout) => void \| undefined)`	sem valor padrão	Called when the Group's layout is changing. ⚠️ For layout changes caused by pointer events, this method is called each time the pointer is moved. For most cases, it is recommended to use the `onLayoutChanged` callback instead.
onLayoutChanged	`((layout: Layout, meta: LayoutChangedMeta) => void)`	sem valor padrão	Called after the Group's layout has been changed. ℹ️ For layout changes caused by pointer events, this method is not called until the pointer has been released. This method is recommended when saving layouts to some storage api. ℹ️ The second argument contains meta information about the layout change. The `isUserInteraction` attribute signals whether the resize was caused by direct user input. It is true for resizes caused by pointer or keyboard input and false for other triggers (e.g. imperative API calls, initial mount, etc.)
orientation	`"horizontal" \| "vertical"`	sem valor padrão	Specifies the resizable orientation ("horizontal" or "vertical"); defaults to "horizontal"
resizeTargetMinimumSize	`{ coarse: number; fine: number; }`	sem valor padrão	Minimum size of the resizable hit target area (either `Separator` or `Panel` edge) This threshold ensures are large enough to avoid mis-clicks. - Coarse inputs (typically a finger on a touchscreen) have reduced accuracy; to ensure accessibility and ease of use, hit targets should be larger to prevent mis-clicks. - Fine inputs (typically a mouse) can be smaller ℹ️ [Apple interface guidelines](https://developer.apple.com/design/human-interface-guidelines/accessibility) suggest `20pt` (`27px`) on desktops and `28pt` (`37px`) for touch devices In practice this seems to be much larger than many of their own applications use though.

Estende ResizablePrimitive.GroupProps. Aceita também os atributos padrão de um elemento React (278 não listados).

ResizablePanel

Props de ResizablePanel
Prop	Type	Default	Description
collapsedSize	`string \| number`	sem valor padrão	Panel size when collapsed; defaults to 0%.
collapsible	`boolean`	sem valor padrão	This panel can be collapsed. ℹ️ A collapsible panel will collapse when it's size is less than of the specified `minSize`
defaultSize	`string \| number`	sem valor padrão	Default size of Panel within its parent group; default is auto-assigned based on the total number of Panels. ℹ️ Interpretation rules: - Numbers are interpreted as pixels (e.g. `defaultSize={200}` is 200 pixels) - Strings without explicit units are interpreted as percentage (e.g. `defaultSize="50"` is 50 percent) - Use explicit units (e.g. "px", "%", "em", "rem", "vh", or "vw") to change interpretation ⚠️ Percentage based sizes may cause slight layout shift when server-rendering. For more information see the documentation.
disabled	`boolean`	sem valor padrão	When disabled, a panel cannot be resized either directly or indirectly (by resizing another panel).
elementRef	`Ref<HTMLDivElement \| null>`	sem valor padrão	Ref attached to the root `HTMLDivElement`.
groupResizeBehavior	`"preserve-relative-size" \| "preserve-pixel-size"`	sem valor padrão	How should this Panel behave if the parent Group is resized? Defaults to `preserve-relative-size`. - `preserve-relative-size`: Retain the current relative size (as a percentage of the Group) - `preserve-pixel-size`: Retain its current size (in pixels) ℹ️ Panel min/max size constraints may impact this behavior. ⚠️ A Group must contain at least one Panel with `preserve-relative-size` resize behavior.
maxSize	`string \| number`	sem valor padrão	Maximum size of Panel within its parent group; defaults to `"100%"`. ℹ️ Interpretation rules: - Numbers are interpreted as pixels (e.g. `maxSize={200}` is 200 pixels) - Strings without explicit units are interpreted as percentage (e.g. `maxSize="50"` is 50 percent) - Use explicit units (e.g. "px", "%", "em", "rem", "vh", or "vw") to change interpretation
minSize	`string \| number`	sem valor padrão	Minimum size of Panel within its parent group; defaults to 0%. ℹ️ Interpretation rules: - Numbers are interpreted as pixels (e.g. `minSize={200}` is 200 pixels) - Strings without explicit units are interpreted as percentage (e.g. `minSize="50"` is 50 percent) - Use explicit units (e.g. "px", "%", "em", "rem", "vh", or "vw") to change interpretation
onResize	`((panelSize: PanelSize, id: string \| number \| undefined, prevPanelSize: PanelSize \| undefined) => void)`	sem valor padrão	Called when panel sizes change.
panelRef	`Ref<PanelImperativeHandle \| null>`	sem valor padrão	Exposes the following imperative API: - `collapse(): void` - `expand(): void` - `getSize(): number` - `isCollapsed(): boolean` - `resize(size: number): void` ℹ️ The `usePanelRef` and `usePanelCallbackRef` hooks are exported for convenience use in TypeScript projects.

Estende ResizablePrimitive.PanelProps. Aceita também os atributos padrão de um elemento React (278 não listados).

ResizableHandle

Props de ResizableHandle
Prop	Type	Default	Description
withHandle	`boolean`	`false`	Draws a grip on the line. The line is enough for a pointer; the grip says "this edge moves" to someone who has not tried it yet.
disabled	`boolean`	sem valor padrão	When disabled, the separator cannot be used to resize its neighboring panels. ℹ️ The panels may still be resized indirectly (while other panels are being resized). To prevent a panel from being resized at all, it needs to also be disabled.
disableDoubleClick	`boolean`	sem valor padrão	When true, double-clicking this `Separator` will not reset its `Panel` to its default size.
elementRef	`Ref<HTMLDivElement>`	sem valor padrão	Ref attached to the root `HTMLDivElement`.

Estende ResizablePrimitive.SeparatorProps. Aceita também os atributos padrão de um elemento React (276 não listados).

Composition

Painéis e separators são filhos diretos do grupo, alternados: cada ResizableHandle controla o painel imediatamente antes dele. Um grupo pode morar dentro de um painel para dividir o outro eixo.

Composição de ResizablePanelGroup

ResizablePanelGroup

ResizablePanelGroup
- ResizablePanel
- ResizableHandle
- ResizablePanel

Metadata

Notas de acessibilidade

Teclado verificado por teste e em navegador: cada borda é um separator na sequência de tabulação, com outline de foco visível; ArrowLeft e ArrowRight redimensionam um grupo em linha, ArrowUp e ArrowDown um grupo em coluna — as setas do outro eixo não fazem nada —, e Home e End levam o painel ao mínimo e ao máximo. Um separator desabilitado sai da sequência de tabulação, é anunciado por aria-disabled e ignora as teclas. Leitor de tela verificado por teste: o separator declara aria-valuenow, aria-valuemin e aria-valuemax com o tamanho do painel anterior, aria-controls aponta para esse painel e aria-orientation é o da linha, oposto ao do grupo. O separator não tem nome próprio, porque não sabe quais painéis separa: quem compõe passa aria-label, e todos os examples passam — dois separators sem nome seriam duas paradas idênticas. O grip é decorativo e fica fora da árvore de acessibilidade. Touch verificado em viewport de 375px com emulação de toque: a linha tem 1px, e um pseudo-elemento after estende a área pressionável 12px para cada lado, sem ocupar espaço dos painéis, acima do piso de 24x24 da política de interação do Up Web DS; arrastar por toque redimensiona. Reduced motion verificado em navegador com prefers-reduced-motion: reduce — o layout acompanha o ponteiro e a tecla sem nenhuma interpolação, então não há movimento a acomodar; a única transição é a de cor da linha em hover e arraste, que não é movimento e por isso permanece.

Classificação

Layer: Primitive
Domínio: Domain-free (compartilhado)
Categoria: layout
Status: Stable

Origem e distribuição

Fonte: shadcn registry / resizable
Licença: MIT
URL: https://ui.shadcn.com/r/styles/base-vega/resizable.json
Distribuição: Interna

Acessibilidade

Teclado: revisado
Leitor de tela: revisado
Touch: revisado
Reduced motion: revisado

Dependências

Pacotes: react-resizable-panels
Ícones: Nenhum
Construído sobre: Nenhum
Usado por: Nenhum ainda