Pagination

목록·테이블 페이지를 이동할 때 사용해요.

사용법

기본

page, totalPages, onPageChange로 페이지 이동을 제어해요.

스타일 커스터마이징

Pagination 사용 시 className, style, `classNames`로 모든 스타일을 변경할 수 있어요. CSS 변수는 컴포넌트 루트에 지정하면 variant 기본값을 덮어써요.

className / style

<Pagination
  className="shadow-md"
  style={{
    --gtd-pagination-bg: "#059669",
  }}
/>

classNames 슬롯

복합 컴포넌트는 영역별로 클래스를 지정할 수 있어요.

<Pagination
  classNames={{
    root: "my-pagination-root",
    list: "my-pagination-list",
    button: "my-pagination-button",
    dots: "my-pagination-dots"
  }}
/>

CSS 변수

변수	설명
--gtd-pagination-bg	버튼 배경
--gtd-pagination-active-bg	현재 페이지 배경
--gtd-pagination-active-color	현재 페이지 글자색

인터페이스

PaginationProps

속성	타입	기본값	설명
page*	number	—	현재 페이지 (1부터)
totalPages*	number	—	전체 페이지 수
onPageChange*	(page: number) => void	—	페이지 변경 콜백
siblingCount	number	1	현재 페이지 양옆에 보일 페이지 수
classNames	Record<string, string>	—	슬롯별 클래스 (root, label, input 등)
className	string	—	루트 요소 클래스. Tailwind·커스텀 CSS 적용
style	CSSProperties	—	인라인 스타일·CSS 변수(--gtd-*) 오버라이드

가져오기

import { Pagination } from "@/components/ui/Pagination";