Pagination
페이지 탐색을 위한 페이지네이션 컴포넌트
개요
Pagination은 대량의 데이터를 페이지 단위로 탐색하는 컴포넌트입니다. 총 건수 표시, 페이지 사이즈 변경 등 다양한 옵션을 제공합니다.
주요 특징
- ✅ 페이지 탐색: 첫/이전/다음/마지막 페이지 이동
- ✅ 총 건수 표시:
showTotal로 전체 건수 표시 - ✅ 페이지 사이즈 변경:
pageSizeOptions로 페이지당 항목 수 변경 - ✅ 커스터마이징: 총 건수 레이블, 페이지 사이즈 레이블 커스텀
- ✅ 접근성: WAI-ARIA Navigation 패턴
- ✅ 디자인 토큰: 테마 커스터마이징 지원
기본 사용
Preview
총 건수 표시
showTotal을 설정하면 좌측에 전체 건수가 표시됩니다.
Preview
전체 건수 256
페이지 사이즈 변경
pageSizeOptions를 설정하면 우측에 페이지 사이즈 셀렉트가 표시됩니다.
Preview
전체 기능 (Total + Pagination + Page Size)
showTotal과 pageSizeOptions를 함께 사용하면 DataTable과 동일한 레이아웃을 구성할 수 있습니다.
Preview
전체 건수 256
사용 예시
예시 1: 커스텀 총 건수 레이블
totalLabel로 총 건수 영역의 표시 형식을 커스터마이징할 수 있습니다.
Preview
전체 건수 1,234
예시 2: 커스텀 페이지 사이즈 레이블
pageSizeLabel로 페이지 사이즈 드롭다운의 항목 형식을 커스터마이징할 수 있습니다.
Preview
전체 건수 256
예시 3: 다양한 페이지 사이즈
Preview
API Reference
Props
| Prop | Type | Default | Description |
|---|---|---|---|
total | number | 0 | 전체 항목 수 |
current | number | 1 | 현재 페이지 (1-indexed) |
itemsPerPage | number | 10 | 페이지당 항목 수 |
siblingCount | number | 1 | 현재 페이지 양쪽에 표시할 페이지 수 |
showTotal | boolean | false | 전체 건수 표시 여부 |
totalLabel | (total: number) => React.ReactNode | - | 커스텀 총 건수 렌더러 |
pageSizeOptions | number[] | - | 페이지 사이즈 드롭다운 옵션 |
pageSizeLabel | (size: number) => string | - | 커스텀 페이지 사이즈 레이블 |
className | string | - | 추가 CSS 클래스 |
Events
| Event | Type | Description |
|---|---|---|
onChange | (page: number) => void | 페이지 변경 시 호출 |
onPageSizeChange | (pageSize: number) => void | 페이지 사이즈 변경 시 호출 |
기본 사용법
import { Pagination } from "@vortex/ui-icignal"
<Pagination total={100} itemsPerPage={10} current={1} onChange={setPage} />
<Pagination
total={256}
itemsPerPage={10}
current={1}
showTotal
pageSizeOptions={[10, 20, 50, 100]}
onPageSizeChange={setPageSize}
/>접근성
ARIA 속성
<Pagination total={100} itemsPerPage={10} current={1} />권장 사항
- ✅
aria-label로 탐색 목적 전달 (navigationrole 자동 설정) - ✅ 키보드: Tab/Enter로 페이지 이동
- ✅ 비활성 버튼에
aria-disabled자동 설정 - ❌ 데이터 없이 단독 사용 지양
관련 컴포넌트
Last updated on