Components
Pagination
페이지네이션 컴포넌트
Pagination
페이지네이션 컴포넌트는 목록이나 테이블의 페이지 이동을 제공합니다.
기본 사용법
'use client';import { useState } from 'react';import Pagination from '@aift/ui/Pagination';export default function Preview() { const [page, setPage] = useState(1); return <Pagination count={10} page={page} onChange={setPage} />;}Color
import Pagination from '@aift/ui/Pagination';export default function Color() { return ( <div className="flex flex-col gap-6"> <Pagination count={10} color="primary" defaultPage={3} /> <Pagination count={10} color="positive" defaultPage={3} /> <Pagination count={10} color="cautionary" defaultPage={3} /> <Pagination count={10} color="destructive" defaultPage={3} /> <Pagination count={10} color="info" defaultPage={3} /> </div> );}Disabled
import Pagination from '@aift/ui/Pagination';export default function Disabled() { return <Pagination count={10} defaultPage={3} disabled />;}Props
| Prop | Type | Default | Description |
|---|---|---|---|
| count | number | - | 총 페이지 수 |
| color | 'primary' | 'positive' | 'cautionary' | 'destructive' | 'info' | 'default' | 'primary' | 활성 페이지 색상 |
| defaultPage | number | 1 | 기본 페이지 (비제어) |
| page | number | - | 현재 페이지 (제어) |
| onChange | (page: number) => void | - | 페이지 변경 콜백 |
| disabled | boolean | false | 비활성화 여부 |
| visibleCount | number | 5 | 한 번에 표시할 페이지 버튼 수 |
| startIndex | 0 | 1 | 1 | 페이지 번호 시작 인덱스 |