Layout
Drawer
semantic HTML화면 가장자리에서 보조 영역을 엽니다.
Live example
<button type="button" data-example-action="open-drawer">Open filters</button><dialog data-standard-component="drawer" data-placement="end"><span data-slot="title">Filters</span><label>Status<select><option>All</option><option>Active</option></select></label><button data-slot="footer" type="button" data-example-action="close-drawer">Apply</button></dialog>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.2 |
| HTML contract | Native HTML elements and attributes |
| Events | Native browser events |
Accessibility
Dialog와 동일한 modal 포커스 계약을 적용하고 좁은 화면에서도 닫기 버튼을 항상 사용할 수 있게 합니다.
Server template guidance
<!-- Render the semantic HTML on the server. Load enhancement JavaScript only when this interaction is needed. -->