Pagination

• 󰯣
• 1
• 2
• 3
• 4
• 󰽵
• 12
• 󰯱

계약

Overview

Machine-readable contract from Component Spec.

component: paginationexport: Paginationversion: 1attributes: data-refineui=pagination

Anatomy

Part	data-refineui
root	pagination

States

Scope	Category	Values
component	pseudo	focus-visible
component	environment	forced-colors, dir

Keyboard

Key	Action	Native
Enter	activate	true
Space	activate	true

Focus

Section	Property	Value
visual	required	true
visual	selector	:focus-visible

Layout

Property	Value
direction	logical
rtl	true

설치

npmyarnpnpmbun

npm install @refineui/react @refineui/tokens

사용법

import {
  Pagination,
  PaginationContent,
  PaginationItem,
  PaginationLink,
  PaginationPrevious,
  PaginationNext,
  PaginationEllipsis
} from "@refineui/react";

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

API 레퍼런스

Pagination

루트 컨테이너(<nav> 요소).

PaginationContent

페이지네이션 항목 목록.

PaginationItem

리스트 항목 래퍼.

PaginationLink

Prop	Default	Type	Description
isActive	false	boolean	현재 페이지를 표시합니다.

PaginationPrevious

이전 페이지 버튼.

PaginationNext

다음 페이지 버튼.

PaginationEllipsis

건너뛴 페이지 표시기.