컴포넌트 · 내비게이션

Pagination

업무용 웹의 대량 목록을 페이지 단위로 나눕니다. 모바일(앱 · QR)에서는 페이지네이션 대신 무한 스크롤 또는 ‘더보기’ 버튼을 씁니다.

기본

81–100 / 3,204건

플랫폼별 방식

플랫폼방식페이지 크기
Admin · ConsolePagination + 페이지 크기 선택20 · 50 · 100
Sales (모바일)더보기 버튼20
App · QR무한 스크롤 + 스켈레톤20
POS페이지 넘김 버튼 (터치 · 큰 화살표)화면에 맞춰 고정

사용 규칙

이렇게 하세요

  • 현재 페이지는 aria-current=page
  • 페이지 이동 후 목록 상단으로 스크롤
  • 필터 변경 시 1페이지로 초기화

이렇게 하지 마세요

  • 7개 넘는 페이지 번호 나열 (말줄임 사용)
  • 페이지 번호만 있고 전체 건수 미표시

Props

PropTypeDefault설명
page*number—현재 페이지 (1부터)
total*number—전체 페이지 수
onChange*(p: number) => void—페이지 변경