Components
Pagination
Overview
Pagination은 큰 데이터를 페이지 단위로 탐색하는 컴포넌트입니다. Prev · 페이지 번호 · Next 순이며, 현재 페이지 기준 앞·뒤 siblings개와 양 끝 페이지를 노출합니다. 생략(`...`)은 클릭할 수 없습니다. 상태는 controlled(page / onPageChange)로 관리합니다.
기본 컴포넌트 사용 예시입니다.
siblings로 현재 페이지 앞·뒤 노출 개수를 조절합니다.
- 1앞·뒤 1개
- 3기본 (가이드)
siblings={1}
siblings={3} (default)
showEllipsis={false}면 양 끝 고정 없이 주변 윈도우만 표시합니다.
showEllipsis={true}
showEllipsis={false}
showTotalPages로 현재/전체 페이지 요약을 표시합니다. 기본 false.
- false요약 숨김 (기본).
- true하단에 page n / total 표시.
showTotalPages={false} (default)
showTotalPages={true}
page 3 / 10
showTotalPages가 true면 컨트롤 아래에 page n / total요약을 표시합니다. 문구는 labels.totalPages로 바꿀 수 있습니다.
selectedClassName으로 선택 페이지 색을 커스텀합니다. 기본은 tokens primary.
Default (tokens)
selectedClassName
selectedClassName="bg-emerald-500 text-white …"처럼 선택 페이지만 className으로 덮습니다.
아이콘은 기본 제공. 호출 시 previousIcon·nextIcon을 넘기면 교체됩니다.
기본 아이콘
호출 시 교체
아이콘은 기본 제공됩니다. 호출할 때 previousIcon· nextIcon을 넘기면 그대로 교체됩니다.