Layout

Resizable Pane

semantic HTML

키보드와 포인터로 영역 크기를 조절합니다.

stablefreeSince 0.4

Live example

Files

Drag or use arrow keys.

Editor

Resizable content

<section data-standard-component="resizable-pane" class="standard-resizable-pane" style="--pane-size:45%"><section class="ui-card" data-pane-start><strong>Files</strong><p>Drag or use arrow keys.</p></section><div role="separator" tabindex="0" aria-orientation="vertical" aria-valuemin="20" aria-valuemax="80" aria-valuenow="45" data-pane-handle></div><section class="ui-card" data-pane-end><strong>Editor</strong><p>Resizable content</p></section></section>

Variants and sizes

The pattern inherits theme and density tokens. Use compact, comfortable, or roomy density when the surrounding screen requires it.

compactcomfortableroomy

Public API

Contract	Value
Implementation	`semantic HTML`
Status	`stable`
License	`free`
Since	`0.4`
HTML contract	`Native HTML elements and attributes`
Events	`Native browser events`

Accessibility

separator는 현재값과 최소·최대값을 제공하며 방향키와 orientation에 맞는 키보드 조작을 지원합니다.

Server template guidance

<!-- Render the semantic HTML on the server. Load enhancement JavaScript only when this interaction is needed. -->