Pagination

Pagination (페이지네이션)

일련의 페이지를 탐색하는 컴포넌트예요. 크기·변형·형제 개수·링크 렌더링 등을 지원해요.

출처: 문서

본문

사용법 (Usage)

import { Pagination } from "@chakra-ui/react"

<Pagination.Root>
  <Pagination.PrevTrigger />
  <Pagination.Ellipsis />
  <Pagination.Item />
  <Pagination.PageText />
  <Pagination.NextTrigger />
</Pagination.Root>

단축키 (Shortcuts)

Pagination 컴포넌트는 흔한 사용 사례에 대한 단축키 집합도 제공해요.

PaginationItems

이 컴포넌트는 count와 pageSize prop을 기반으로 페이지 수를 렌더링해요.

이렇게 렌더링하는 것은:

<Pagination.Items />

이것의 약칭이에요:

<Pagination.Context>
  {({ pages }) =>
    pages.map((page, index) =>
      page.type === "page" ? (
        <Pagination.Item key={index} {...page} />
      ) : (
        <Pagination.Ellipsis key={index} index={index} />
      ),
    )
  }
</Pagination.Context>

예제 (Examples)

크기 (Sizes)

size prop을 사용해 페이지네이션의 크기를 변경해요.

:::info

페이지네이션 크기는 Button 컴포넌트 크기에 매핑돼요.

:::

변형 (Variants)

variant prop을 사용해 페이지네이션 항목과 줄임표의 변형을 제어해요.

변형은 Button 컴포넌트 변형과 일치해요.

제어 (Controlled)

page와 onPageChange prop을 사용해 현재 페이지를 제어해요.

형제 개수 (Sibling Count)

siblingCount를 사용해 현재 페이지 앞뒤에 표시할 형제 페이지 수를 제어해요.

컴팩트 (Compact)

Pagination.PageText를 사용해 컴팩트한 페이지네이션을 만들어요. 모바일 뷰에서 유용해요.

링크로 (As Link)

페이지네이션을 링크로 렌더링하는 예시예요.

붙이기 (Attached)

Group 컴포넌트와 함께 페이지네이션을 조합해 페이지네이션 항목과 트리거를 붙이는 예시예요.

개수 텍스트 (Count Text)

Pagination.PageText 컴포넌트에 format="long"을 전달해 개수 텍스트를 표시해요.

커스텀 페이지 텍스트 (Custom Page Text)

Pagination.PageText의 format prop에 함수를 전달해 페이지 텍스트를 커스터마이즈하거나 로컬라이즈해요.

데이터 기반 (Data Driven)

페이지네이션 상태를 제어하고 그 상태를 사용해 데이터를 청크로 나누는 예시예요.

Props

Root

Pagination 컴포넌트의 Root 부분에 대한 prop 테이블 (대화형 문서 참고).