GitHub

Pagination

페이지 이동, 이전/다음 링크를 제공하는 페이지네이션입니다.

examples/krds/pagination-demo.tsx
import {
  Pagination,
  PaginationContent,

설치

pnpm dlx shadcn@latest add https://krdscn.gwlee.kr/r/pagination.json

사용법

import {
  Pagination,
  PaginationContent,
  PaginationEllipsis,
  PaginationItem,
  PaginationLink,
  PaginationNext,
  PaginationPrevious,
} from "@/components/ui/pagination"
<Pagination>
  <PaginationContent>
    <PaginationItem>
      <PaginationPrevious href="#" />
    </PaginationItem>
    <PaginationItem>
      <PaginationLink href="#">1</PaginationLink>
    </PaginationItem>
    <PaginationItem>
      <PaginationLink href="#" isActive>
        2
      </PaginationLink>
    </PaginationItem>
    <PaginationItem>
      <PaginationLink href="#">3</PaginationLink>
    </PaginationItem>
    <PaginationItem>
      <PaginationEllipsis />
    </PaginationItem>
    <PaginationItem>
      <PaginationNext href="#" />
    </PaginationItem>
  </PaginationContent>
</Pagination>

구성

다음 조합으로 Pagination:

Pagination
└── PaginationContent
    ├── PaginationItem
    │   └── PaginationPrevious
    ├── PaginationItem
    │   └── PaginationLink
    ├── PaginationItem
    │   └── PaginationEllipsis
    └── PaginationItem
        └── PaginationNext

예제

단순형

페이지 번호만 표시하는 기본 페이지네이션입니다.

examples/krds/pagination-simple.tsx
import {
  Pagination,
  PaginationContent,

아이콘형

페이지 번호 없이 이전/다음 버튼만 표시합니다. 페이지당 행 수 선택기가 있는 데이터 테이블에 적합합니다.

examples/krds/pagination-icons-only.tsx
import { Field, FieldLabel } from "@/components/ui/field"
import {
  Pagination,

Next.js

기본적으로 <PaginationLink /> 컴포넌트는 <a /> 태그를 렌더링합니다.

Next.js <Link /> 컴포넌트를 사용하려면 pagination.tsx를 다음처럼 조정합니다.

+ import Link from "next/link"

- type PaginationLinkProps = ... & React.ComponentProps<"a">
+ type PaginationLinkProps = ... & React.ComponentProps<typeof Link>

const PaginationLink = ({...props }: ) => (
  <PaginationItem>
-   <a>
+   <Link>
      // ...
-   </a>
+   </Link>
  </PaginationItem>
)

참고: CLI가 이 변경을 자동 적용하도록 업데이트 중입니다.

RTL

RTL 지원을 활성화하려면 RTL 설정 가이드를 참고하세요.

examples/krds/pagination-rtl.tsx
"use client"

import * as React from "react"

변경 내역

RTL 지원

이전 버전의 Pagination 컴포넌트에서 업그레이드하는 경우 text prop을 추가하려면 다음 변경을 적용합니다.

PaginationPrevious를 수정합니다.

  function PaginationPrevious({
    className,
+   text = "Previous",
    ...props
- }: React.ComponentProps<typeof PaginationLink>) {
+ }: React.ComponentProps<typeof PaginationLink> & { text?: string }) {
    return (
      <PaginationLink
        aria-label="Go to previous page"
        size="default"
        className={cn("cn-pagination-previous", className)}
        {...props}
      >
        <ChevronLeftIcon />
        <span className="cn-pagination-previous-text hidden sm:block">
-         Previous
+         {text}
        </span>
      </PaginationLink>
    )
  }

PaginationNext를 수정합니다.

  function PaginationNext({
    className,
+   text = "Next",
    ...props
- }: React.ComponentProps<typeof PaginationLink>) {
+ }: React.ComponentProps<typeof PaginationLink> & { text?: string }) {
    return (
      <PaginationLink
        aria-label="Go to next page"
        size="default"
        className={cn("cn-pagination-next", className)}
        {...props}
      >
-       <span className="cn-pagination-next-text hidden sm:block">Next</span>
+       <span className="cn-pagination-next-text hidden sm:block">{text}</span>
        <ChevronRightIcon />
      </PaginationLink>
    )
  }