Helpers
Resize Observer
semantic HTML요소 크기 변경을 선언적 이벤트로 제공합니다.
Live example
Resize target
<section data-standard-component="resize-observer"><div class="example-observer-target example-resize-target">Resize target</div><button type="button" data-example-action="resize">Resize</button><output data-example-output aria-live="polite">Waiting for resize</output></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
크기에 따라 정보나 조작 기능이 사라지지 않게 설계하고 확대 및 reflow 환경에서도 동일한 읽기 순서를 유지합니다.
Server template guidance
<!-- Render the semantic HTML on the server. Load enhancement JavaScript only when this interaction is needed. -->