탐색과 공개@neumorphism-ui/pagination

Pagination

nav, ul, li, anchor의 시맨틱을 유지하는 조합형 pagination입니다. 활성 페이지, 이전·다음 링크, 축약 표시를 제공합니다.

@neumorphism-ui/pagination

Registry JSON

미리보기

설치

npx shadcn@latest add @neumorphism-ui/pagination

CLI가 npm 의존성, base 토큰, utils와 컴포넌트 소스를 순서대로 확인하고 설치합니다.

Registry를 처음 사용한다면 namespace 설정 을 먼저 완료하세요.

사용법

Import

import {
  Pagination,
  PaginationContent,
  PaginationEllipsis,
  PaginationItem,
  PaginationLink,
  PaginationNext,
  PaginationPrevious,
} from "@/components/ui/pagination"

Example

<Pagination>
  <PaginationContent>
    <PaginationItem>
      <PaginationPrevious href="?page=1" />
    </PaginationItem>
    <PaginationItem>
      <PaginationLink href="?page=1">1</PaginationLink>
    </PaginationItem>
    <PaginationItem>
      <PaginationLink href="?page=2" isActive>2</PaginationLink>
    </PaginationItem>
    <PaginationItem><PaginationEllipsis /></PaginationItem>
    <PaginationItem>
      <PaginationNext href="?page=3" />
    </PaginationItem>
  </PaginationContent>
</Pagination>

API 레퍼런스

컴포넌트	속성	타입	기본값	설명
`Pagination`	`aria-label`	`string`	`"pagination"`	pagination navigation 영역의 접근 가능한 이름입니다.
`PaginationLink`	`href`필수	`string`	`—`	대상 페이지의 실제 URL입니다.
`PaginationLink`	`isActive`	`boolean`	`false`	현재 페이지 스타일과 aria-current=page를 설정합니다.
`PaginationPrevious / PaginationNext`	`children`	`React.ReactNode`	`"Previous" / "Next"`	기본 이동 문구를 교체합니다.

미리보기

설치

사용법

Import

Example

API 레퍼런스

접근성