03 · Components · 탐색
페이지네이션Pagination
긴 목록을 페이지 단위로 분할해 이동. 총 페이지 수와 현재 위치를 항상 보이게 하고 가장자리는 축약 표시합니다.
StableWCAG AA
기본
긴 목록 (축약)
총 페이지가 많을 때 현재 페이지 기준 앞뒤 siblings개만 보이고 나머지는 …로 축약합니다. 첫·마지막은 항상 노출 됩니다.
nav[aria-label="페이지네이션"]로 감싸며 현재 페이지 버튼에 aria-current="page"를 부여합니다. 이전/다음 버튼은 각각 aria-label을 제공하여 스크린리더 사용자에게 용도를 분명히 합니다.
Props API
| Prop | Type | Default | Description |
|---|---|---|---|
total | number | 전체 페이지 수. | |
current | number | 현재 페이지 (1부터 시작). | |
onChange | (page: number) => void | 페이지 변경 콜백. | |
siblings | number | 1 | 현재 기준 양옆에 보일 페이지 수. |