Media

Zoomable Frame

semantic HTML

iframe 또는 이미지를 확대하고 이동합니다.

stablefreeSince 0.4

Live example

Architecture map

SSR->Upgrade->Ship

<section data-standard-component="zoomable-frame" class="standard-zoom"><div class="zoom-toolbar"><button type="button" data-zoom-out aria-label="Zoom out">-</button><button type="button" data-zoom-reset>100%</button><button type="button" data-zoom-in aria-label="Zoom in">+</button></div><div class="zoom-viewport"><div class="example-zoom-content" data-zoom-content><strong>Architecture map</strong><div class="ui-cluster"><span class="ui-badge">SSR</span><span>-></span><span class="ui-badge">Upgrade</span><span>-></span><span class="ui-badge">Ship</span></div></div></div></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

확대율을 버튼 이름에 포함하고 키보드의 +, -, 0으로 확대·축소·초기화를 지원합니다.

Server template guidance

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