Pagination
긴 목록을 페이지로 나눠요. Table이나 카드 목록과 함께 쓰고, DataGrid는 pagination prop으로 붙여요.
변형
Figma 원본의 모든 variant예요. 좁은 화면(viewport=mobile)에서는 번호 대신 4 / 20만 보여요. 코드가 자동으로 처리해요.
first page
last page
showFirstLast=false
사용법
- 현재 페이지는 bg/subtle강조색은 쓰지 않아요. aria-current="page"로 화면 낭독기에 알려요.
- 항상 최대 7칸처음·마지막과 현재 양옆 1개만 보이고 나머지는 …로 줄여서 너비가 흔들리지 않아요.
- 끝에서는 버튼이 비활성첫 페이지에서는 처음·이전이, 마지막 페이지에서는 다음·마지막이 꺼져요. 포커스는 남아요.
- 좁은 화면은 4 / 20640 미만에서는 번호와 행 수 라벨을 숨겨요. Select 이름은 aria-label로 남아요.
Props
| prop | 값 | 기본값 |
|---|---|---|
| page · onPageChange | 현재 페이지(1부터)와 바뀔 때 | (필수) |
| pageCount | 전체 페이지 수 | (필수) |
| pageSize · onPageSizeChange | 넘기면 왼쪽에 "페이지당 행" Select가 생겨요 | — |
| pageSizeOptions | 페이지당 행 수 목록 | [10, 20, 50] |
| showFirstLast | 처음·마지막 버튼 | true |
| aria-label | 페이지 이동 영역 이름 | "페이지" |
코드
tsx
<Pagination page={page} pageCount={20} onPageChange={setPage} />
<Pagination page={page} pageCount={20} onPageChange={setPage} pageSize={pageSize} onPageSizeChange={setPageSize} showFirstLast={false} />