Pagination
연결된 레일에서 컬렉션의 이전, 다음, 특정 페이지로 이동합니다.
- 성숙도
- 후보
- 소스 경로
components/ui/pagination.tsx- 소스
- 소스
- 외부 의존성
@phosphor-icons/react
실제 미리보기
사용할 때
사용 기준
목록이 URL로 구분된 여러 페이지를 가질 때 씁니다.
사용하지 않을 때
슬라이드나 현재 화면 안의 탭 전환에는 쓰지 않습니다.
변형과 상태
default고정 예시이전과 다음이 실제 목적지 링크인지 확인합니다.
current고정 예시현재 페이지가 aria-current와 파란 면으로 전달되는지 확인합니다.
boundary고정 예시첫 페이지와 마지막 페이지의 비활성 방향이 목적지를 노출하지 않는지 확인합니다.
collapsed고정 예시긴 범위는 축약하되 현재 위치는 유지합니다.
접근성
이름 있는 nav, 실제 링크, aria-current와 비활성 경계를 제공합니다.
API
| 속성 | 타입 | 필수 | 설명 |
|---|---|---|---|
isCurrent | boolean | 아니요 | 현재 페이지 링크를 표시합니다. |
disabled | boolean | 아니요 | 방향 경계를 보이되 이동은 막습니다. |
label | string | 예 | 방향이나 축약 표시의 접근 가능한 이름입니다. |
사용 예시
지원 importimport {
Pagination,
PaginationContent,
PaginationItem,
PaginationLink,
PaginationPrevious,
PaginationNext,
} from "@/components/ui/pagination"
<Pagination aria-label="Document pages">
<PaginationContent>
<PaginationItem>
<PaginationLink href="?page=2" isCurrent>2</PaginationLink>
</PaginationItem>
</PaginationContent>
</Pagination>