Pagination

미리보기

로컬 미리보기입니다. 실제 계정, 환경, 실행 데이터에는 영향을 주지 않습니다.

사용법

같은 종류의 결과를 페이지별로 탐색하게 하세요. 목록 뒤에 배치합니다. 페이지 내 상태에는 onPageChange를, 실제 URL 내비게이션에는 getPageHref를 사용하세요. 현재 페이지는 aria-current=page를 가집니다.

• 짧은 목록을 나누지 마세요. 대신 전체 목록을 보여주세요.
• 단계별 입력 흐름에는 사용하지 마세요. 대신 폼 자체의 Back과 Next 액션을 사용하세요.
• 필터 변경으로 유효하지 않게 된 페이지를 요청하지 마세요. 대신 page를 새 pageCount로 클램프하세요.
• 커서 기반 내비게이션이 알 수 없을 때 전체 페이지 수를 지어내지 마세요. 대신 일반 Previous/Next 버튼을 사용하세요.

크기: SizeProvider size="small" 포털까지 포함해 구성 전체의 크기를 바꿉니다. 기본 크기는 Default입니다. 크기 안내 및 비교

구성

named nav → Previous control + list(page controls / decorative SVG gaps) + Next control

키보드와 접근성

• Tab은 컨트롤 사이를 이동합니다.
• Enter는 컨트롤을 활성화하고 버튼은 Space에도 응답합니다. 링크는 새 탭 열기 같은 브라우저 동작을 유지합니다.
• 페이지가 하나 이하일 때 Pagination은 아무것도 렌더링하지 않습니다. 작은 화면에서는 Previous, Next, 현재/전체 페이지 요약을 보여줍니다.
• 결과 알림 방식, 로딩 표시, 페이지 변경 후 포커스 위치는 호출하는 쪽이 결정합니다.

각 컨트롤에 목적을 설명하는 이름을 지정하세요. 오류 메시지를 해당 컨트롤에 연결하고, 상태를 색만으로 알리지 마세요. 자동 검사는 수동 키보드 및 보조 기술 테스트를 대신하지 않습니다.

예시 코드

공유 컴포넌트는 디자인 토큰에서 스타일을 가져옵니다. 각 예시는 자체 구성과 접근성 속성을 설정합니다. 호출하는 화면이 콜백, ref, 제품 데이터를 정의합니다.

import { Pagination } from '@surflane/ui'

<Pagination
  page={page}
  pageCount={pageCount}
  onPageChange={setPage}
  aria-label='Pipeline run pages'
/>

<Pagination
  page={2}
  pageCount={10}
  getPageHref={(page) => `/runs?page=${page}`}
/>

주요 API

표는 공통 래퍼의 주요 props를 나열합니다. 전체 타입은 패키지 타입 선언을 참조하세요.

관련 토큰