Pagination
현재 페이지와 앞뒤 이동을 분명하게.
- 라이브러리 전용
개요
미리보기
예시
상태
첫 페이지
가운데
마지막
5쪽
compact
이렇게 · 이렇게 하지 않기
- 이렇게 내보내기 미리보기처럼 쪽 개념이 있는 곳에만 쓴다.
- 이렇게 하지 않기 기록 목록은 페이지 대신 계속 스크롤한다.
- 이렇게 현재 페이지는 aria-current로 알린다.
- 이렇게 하지 않기 버튼 + onClick으로 만들지 않는다. 페이지는 URL(?page=)이고 링크다.
토큰과 속성
| 이름 | 타입 | 기본값 | 설명 |
|---|---|---|---|
page | number | — | 현재 페이지(1부터). 미리보기 기본 5. |
total | number | — | 전체 페이지 수. 미리보기 기본 20. |
variant? | 'full' | 'compact' | full | full = 번호와 말줄임, compact = 이전 · “20쪽 중 5쪽” · 다음. 좁은 폭에서는 자동 compact. |
hrefFor?: (page) => string | — | — | 페이지 URL. 기본 ?page=n(pushState). 페이지를 바꾸면 결과 목록 제목으로 초점을 옮긴다(소비자 몫). |
pageRange(page, total) | — | — | 보일 번호(1 … 4 5 6 … 20)를 계산하는 함수. 테스트용으로 export. |
| 그 밖의 속성 | — | — | id, aria-label(기본 “페이지”) 등 네이티브 nav 속성은 그대로 전달된다. className·style·children은 받지 않는다. |
접근성
키보드: 링크를 Tab으로 지난다.
- 각 링크 이름은 “3 페이지”(숫자가 이름 안의 한 단어가 되게 띄운다). 말줄임은 aria-hidden. 현재 페이지는 aria-current="page" + 테두리.
- 이전/다음이 없으면 링크 대신 aria-disabled 텍스트.