Pagination 페이지 매김

데이터량이 너무 많을 때 페이지를 나누어 표시하며, 제어 / 비제어, 페이지당 항목 수 전환, 페이지 점프를 지원합니다.

기본 사용법

기본 사용법

import { useState } from 'react'
import { LhPagination } from '@lh-ui/react'

export default function Demo() {
  const [current, setCurrent] = useState(1)

  return (
    <LhPagination
      total={128}
      current={current}
      onChange={(page) => setCurrent(page)}
    />
  )
}

Pagination Props

프로퍼티	설명	타입	선택 가능한 값	기본값
total	데이터 총수 (필수)	number	—	—
current	현재 페이지 (제어, 1부터)	number	—	—
defaultCurrent	현재 페이지 기본값 (비제어)	number	—	1
pageSize	페이지당 항목 수 (제어)	number	—	—
defaultPageSize	페이지당 항목 수 기본값 (비제어)	number	—	10
pageSizes	페이지당 항목 수 옵션	number[]	—	[10, 20, 30, 40]
siblingCount	현재 페이지 양쪽에 각각 표시할 페이지 번호 수	number	—	1
showTotal	총 항목 수 표시 여부	boolean	—	false
showSizeChanger	페이지당 항목 수 전환 표시 여부	boolean	—	false
showJumper	페이지 점프 입력 표시 여부	boolean	—	false
simple	간결한 모드	boolean	—	false
disabled	비활성화 여부	boolean	—	false
sx	빠른 레이아웃 프로퍼티	SxProps	—	—

Pagination 이벤트

이벤트	설명	콜백 시그니처	Vue 대응
onChange	페이지 번호 변화 시 발생 (페이지 전환, 페이지 점프, 페이지당 항목 수 변화로 인한 클램프 모두 발생)	(current: number, pageSize: number) => void	@change
onSizeChange	페이지당 항목 수 변화 시 발생	(pageSize: number) => void	@size-change

제어 / 비제어

current를 전달하면 제어입니다 (컴포넌트가 내부 상태를 가지지 않고 외부에서 구동). defaultCurrent를 전달하면 비제어 내부 상태로 동작합니다. pageSize도 동일합니다. 두 모드 모두 onChange가 발생합니다.

페이지 번호 클램프

pageSize 변화로 전체 페이지 수가 줄어들 때, 현재 페이지가 범위를 벗어나면 컴포넌트가 effect에서 자동으로 마지막 페이지로 클램프하고 onChange를 발생시킵니다. 비즈니스 측의 폴백이 필요 없습니다.

키보드 상호작용

페이지 점프 입력 상자: Enter로 점프를 제출하고, 포커스를 잃을 때에도 제출합니다. 잘못된 값 (범위를 벗어나거나 숫자가 아님)은 유효한 범위로 클램프됩니다.

접근성

루트 요소는 <nav aria-label>입니다. 현재 페이지는 aria-current="page"를 출력하고, 각 페이지 번호 버튼에는 aria-label이 있습니다 (언어 팩 pagination.page 템플릿, 예: 3 페이지).

ref

forwardRef<HTMLElement> —— <nav> 루트 요소.

스타일

import '@lh-ui/react/theme.css'
import '@lh-ui/react/style/pagination'