Pagination
테이블이나 리스트의 페이지 이동을 위한 페이지네이션 컴포넌트입니다.
설치
Terminal
npx @msub-core/ui-cli add pagination
사용법
TSX
import {
Pagination,
PaginationContent,
PaginationItem,
PaginationLink,
PaginationPrevious,
PaginationNext,
PaginationEllipsis,
SimplePagination,
} from "@msub-core/ui/components/pagination"
function MyComponent() {
const [page, setPage] = React.useState(1)
return (
<SimplePagination
currentPage={page}
totalPages={10}
onPageChange={setPage}
/>
)
}SimplePagination
현재 페이지: 5
| Prop | Type | Default | Required | Description |
|---|---|---|---|---|
| currentPage | number | - | Yes | 현재 페이지 번호 |
| totalPages | number | - | Yes | 전체 페이지 수 |
| onPageChange | (page: number) => void | - | Yes | 페이지 변경 콜백 |
| siblingCount | number | 1 | No | 현재 페이지 양쪽에 표시할 페이지 수 |
많은 페이지
페이지가 많으면 자동으로 생략 표시(...)가 나타납니다. 현재 페이지: 1
커스텀 페이지네이션
| Prop | Type | Default | Required | Description |
|---|---|---|---|---|
| isActive | boolean | false | No | 현재 페이지 활성 상태 |
| size | "default" | "sm" | "lg" | "icon" | "icon" | No | 링크 크기 |
| variant | "default" | "outline" | "default" | No | 스타일 변형 |
이전/다음만
애니메이션
animated prop을 추가하면 호버, 클릭 시 스케일 효과와 페이지 전환 애니메이션이 적용됩니다.
| Prop | Type | Default | Required | Description |
|---|---|---|---|---|
| animated | boolean | false | No | 페이지네이션 애니메이션 효과 활성화 |