Component

Pagination

페이지 수가 많은 목록을 탐색하는 페이지 네비게이션입니다.

Playground

옵션을 조절하며 화면과 사용 코드를 함께 확인하세요.

PC 1280px

Controls

Code

import { useState } from 'react'

import { Pagination } from '@amineslab/ui'

function PaginationExample({ total = 24, page: initialPage = 4, siblingCount = 1, boundaryCount = 1, showEdges = true, showNavLabel = false, } = {}) {
    const [page, setPage] = useState(initialPage);
    return (<div className="grid gap-3">
      <Pagination total={total} page={Math.min(page, total)} onPageChange={setPage} siblingCount={siblingCount} boundaryCount={boundaryCount} showEdges={showEdges} showNavLabel={showNavLabel}/>
    </div>);
}

export default function ExamplePreview() {
  return (<PaginationExample key={`${4}-${24}`} {...({"page":4,"total":24,"siblingCount":1,"boundaryCount":1,"showEdges":true,"showNavLabel":false} as const)}/>)
}

Props

import {
  Pagination,
  PaginationRoot,
  PaginationContent,
  PaginationItem,
  PaginationLink,
  PaginationPrevious,
  PaginationNext,
  // ...
} from '@amineslab/ui'

`Pagination`

페이지 계산과 조작 UI를 함께 제공합니다.

Name	Type	Default	Description
`total*`	`number`	-	전체 페이지 수입니다.
`page*`	`number`	-	현재 페이지입니다(1-base).
`onPageChange*`	`(page: number) => void`	-	페이지 변경 콜백입니다.
`siblingCount`	`number`	`1`	현재 페이지 양옆에 보여줄 수입니다.
`boundaryCount`	`number`	`1`	양 끝에 고정할 페이지 수입니다.
`showEdges`	`boolean`	`false`	첫 페이지·마지막 페이지 이동을 표시합니다.
`showNavLabel`	`boolean`	`false`	이전·다음 텍스트를 넓은 화면에 표시합니다.

Examples

자주 쓰는 조합을 살펴보고, 필요한 예시의 코드를 펼쳐 확인하세요.

많은 페이지

페이지 수가 많아도 목록은 내부에서 줄바꿈되어 문서 전체 가로 스크롤을 만들지 않습니다.

import { useState } from 'react'

import { Pagination } from '@amineslab/ui'

function PaginationExample({ total = 24, page: initialPage = 4, siblingCount = 1, boundaryCount = 1, showEdges = true, showNavLabel = false, } = {}) {
    const [page, setPage] = useState(initialPage);
    return (<div className="grid gap-3">
      <Pagination total={total} page={Math.min(page, total)} onPageChange={setPage} siblingCount={siblingCount} boundaryCount={boundaryCount} showEdges={showEdges} showNavLabel={showNavLabel}/>
    </div>);
}

export default function ExamplePreview() {
  return (<PaginationExample />)
}

사용 기준

권장하는 사용

ready-made Pagination은 page와 total만으로 사용할 수 있고, Root·Content·Link compound API로 화면에 맞게 조합할 수도 있습니다.
번호가 많아지면 줄바꿈하며 nav 내부 가로 스크롤로 페이지 전체가 밀리지 않게 합니다.

피해야 할 사용

겉모양만으로 사용을 결정하지 마세요.
의미와 키보드 동작, 모바일에서의 흐름을 함께 확인하세요.

접근성

화면에 맞는 이름을 제공하고, 키보드만으로 작업을 마칠 수 있는지 확인하세요.

Tab: 페이지 버튼 사이를 이동합니다.
Enter / Space: 페이지를 선택합니다.