Paginationstandard

쪽 이동(pagination)입니다. 이전·다음과 쪽 번호 링크를 놓습니다. shadcn base-nova 의 `pagination` 을 그대로 싣습니다. 쪽 수와 현재 쪽 계산은 직접 합니다.

설치

pnpm

pnpm dlx shadcn@4.23.0 add @uikit/pagination

의존 아이템button

Default

Basic

Simple

With Select

Rows per page

pagination-example.tsx

"use client"
import {  Example,  ExampleWrapper,} from "@/components/example"import { Field, FieldLabel } from "@/components/ui/field"import {  Pagination,  PaginationContent,  PaginationEllipsis,  PaginationItem,  PaginationLink,  PaginationNext,  PaginationPrevious,} from "@/components/ui/pagination"import {  Select,  SelectContent,  SelectGroup,  SelectItem,  SelectTrigger,  SelectValue,} from "@/components/ui/select"
export default function PaginationExample() {  return (    <ExampleWrapper>      <PaginationBasic />      <PaginationSimple />      <PaginationIconsOnly />    </ExampleWrapper>  )}
function PaginationBasic() {  return (    <Example title="Basic">      <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>    </Example>  )}
function PaginationSimple() {  return (    <Example title="Simple">      <Pagination>        <PaginationContent>          <PaginationItem>            <PaginationLink href="#">1</PaginationLink>          </PaginationItem>          <PaginationItem>            <PaginationLink href="#" isActive>              2            </PaginationLink>          </PaginationItem>          <PaginationItem>            <PaginationLink href="#">3</PaginationLink>          </PaginationItem>          <PaginationItem>            <PaginationLink href="#">4</PaginationLink>          </PaginationItem>          <PaginationItem>            <PaginationLink href="#">5</PaginationLink>          </PaginationItem>        </PaginationContent>      </Pagination>    </Example>  )}
function PaginationIconsOnly() {  return (    <Example title="With Select">      <div className="flex items-center justify-between gap-4">        <Field orientation="horizontal" className="w-fit">          <FieldLabel htmlFor="select-rows-per-page">Rows per page</FieldLabel>          <Select defaultValue="25">            <SelectTrigger className="w-20" id="select-rows-per-page">              <SelectValue />            </SelectTrigger>            <SelectContent align="start">              <SelectGroup>                <SelectItem value="10">10</SelectItem>                <SelectItem value="25">25</SelectItem>                <SelectItem value="50">50</SelectItem>                <SelectItem value="100">100</SelectItem>              </SelectGroup>            </SelectContent>          </Select>        </Field>        <Pagination className="mx-0 w-auto">          <PaginationContent>            <PaginationItem>              <PaginationPrevious href="#" />            </PaginationItem>            <PaginationItem>              <PaginationNext href="#" />            </PaginationItem>          </PaginationContent>        </Pagination>      </div>    </Example>  )}