Navigation
Tab
semantic HTMLtabs 안에서 패널을 선택하는 레이블입니다.
Live example
Overview content is visible.
Activity content is visible.
<section data-standard-component="tabs" aria-label="Details"><button type="button" data-standard-component="tab" selected>Overview</button><button type="button" data-standard-component="tab">Activity</button><section data-standard-component="tab-panel"><p>Overview content is visible.</p></section><section data-standard-component="tab-panel" hidden><p>Activity content is visible.</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.2 |
| HTML contract | Native HTML elements and attributes |
| Events | Native browser events |
Accessibility
소속 Tabs 안에서 panel을 명시하고 selected와 disabled 상태를 키보드 사용자에게 제공합니다.
Server template guidance
<!-- Render the semantic HTML on the server. Load enhancement JavaScript only when this interaction is needed. -->