Data
Infinite List
semantic HTML스크롤 위치에 따라 다음 데이터를 요청합니다.
Live example
- Activity 1
- Activity 2
- Activity 3
<section data-standard-component="infinite-list"><ul data-infinite-list><li>Activity 1</li><li>Activity 2</li><li>Activity 3</li></ul><button type="button" data-load-more>Load more</button><output data-example-output aria-live="polite">3 items loaded</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
loading과 complete 상태를 안내하고 observer 미지원 환경에서도 키보드로 다음 항목을 요청할 수 있습니다.
Server template guidance
<!-- Render the semantic HTML on the server. Load enhancement JavaScript only when this interaction is needed. -->