Layout

Split View

semantic HTML

두 콘텐츠 영역을 나란히 또는 전환형으로 배치합니다.

stablefreeSince 0.4

Live example

Editor

Primary workspace

Preview

Secondary workspace

<section data-standard-component="split-view" class="standard-split-view"><section class="ui-card"><strong>Editor</strong><p>Primary workspace</p></section><section class="ui-card"><strong>Preview</strong><p>Secondary workspace</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를 제공하는 Resizable Pane을 사용합니다.

Server template guidance

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