본문으로 건너뛰기
표시

페이지네이션

이전/다음 묶음으로 목록의 페이지를 이동하는 내비게이션이다. 현재 범위를 label로 보여주고, 양 끝에서는 해당 방향 버튼을 잠근다.

상태

first
middle
last

활용 방법

목록 페이지 이동

hasPrevious·hasNext로 양 끝 버튼을 잠그고 label로 현재 범위를 보여준다.

Preview
tsx
<Pagination hasPrevious hasNext label="26-50 / 248" previousHref="?page=1" nextHref="?page=3" />

속성

이름타입기본값설명
hasPreviousbooleanfalse이전 버튼 활성
hasNextbooleanfalse다음 버튼 활성
previousHrefstring-이전 링크
nextHrefstring-다음 링크
onPrevious() => void-이전 콜백
onNext() => void-다음 콜백
labelReactNode-현재 범위 표시