Patterns
Admin Pattern
semantic HTML탐색, 필터, grid, 일괄 작업을 조합한 관리 화면입니다.
Live example
| User | Role | Status |
|---|---|---|
| Ada | Owner | Active |
| Grace | Editor | Invited |
<section class="x-admin-shell" data-standard-component="admin-pattern"><nav aria-label="Admin"><strong>Admin</strong><a href="#users" aria-current="page">Users</a><a href="#roles">Roles</a></nav><section class="x-scroll" aria-label="Users"><table><caption class="x-sr-only">Admin users</caption><thead><tr><th>User</th><th>Role</th><th>Status</th></tr></thead><tbody><tr><td>Ada</td><td>Owner</td><td>Active</td></tr><tr><td>Grace</td><td>Editor</td><td>Invited</td></tr></tbody></table></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
navigation landmark와 데이터 table의 caption 또는 accessible name을 제공합니다.
Server template guidance
<!-- Render the semantic HTML on the server. Load enhancement JavaScript only when this interaction is needed. -->