Data

Virtual List

semantic HTML

보이는 항목만 렌더링해 대량 목록을 처리합니다.

stablefreeSince 0.4

Live example

Job 00001
Job 00002
Job 00003

3 visible fallback jobs

<section data-standard-component="virtual-list" style="--virtual-height:16rem"><div class="standard-virtual-list" tabindex="0"><ul><li>Job 00001</li><li>Job 00002</li><li>Job 00003</li></ul></div><output data-example-output aria-live="polite">3 visible fallback jobs</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

보이는 항목에 전체 개수와 위치를 제공하고 viewport 자체에 접근 가능한 이름을 제공합니다.

Server template guidance

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