Pagination

@hua-labs/ui

v1.1.0

커스터마이즈 가능한 스타일과 접근성을 지원하는 페이지네이션 네비게이션 컴포넌트입니다.

설치

bash

npm install @hua-labs/hua

Import

tsx

import { Pagination, PaginationWithInfo } from "@hua-labs/hua";

@hua-labs/ui의 UI 컴포넌트를 @hua-labs/hua에서 통합 제공합니다.

UI 컴포넌트, 모션 훅, i18n을 하나의 패키지로 사용할 수 있습니다.

라이브 데모

기본 스타일

...

현재 페이지: 1

Outlined 변형

......

현재 페이지: 5

Minimal 변형

...

현재 페이지: 1

원형 버튼

...

현재 페이지: 3

크기

Small

Medium

Large

페이지 정보 포함

1 - 10 of 100 results

...

Props

이름	타입	기본값	설명
`currentPage*`	`number`	-	현재 페이지 번호
`totalPages*`	`number`	-	전체 페이지 수
`onPageChange*`	`(page: number) => void`	-	페이지 변경 시 콜백 함수
`variant`	`"default" \| "outlined" \| "minimal"`	`"default"`	페이지네이션 스타일 변형
`size`	`"sm" \| "md" \| "lg"`	`"md"`	페이지네이션 크기
`shape`	`"square" \| "circle"`	`"square"`	버튼 모양
`showFirstLast`	`boolean`	`true`	첫/마지막 페이지 버튼 표시
`showPrevNext`	`boolean`	`true`	이전/다음 페이지 버튼 표시
`maxVisiblePages`	`number`	`5`	표시할 최대 페이지 버튼 수

코드 예시

기본 사용법tsx

1import { Pagination } from '@hua-labs/ui';
2import { useState } from 'react';
3 
4const [page, setPage] = useState(1);
5 
6<Pagination
7  currentPage={page}
8  totalPages={10}
9  onPageChange={setPage}
10/>

스타일 변형tsx

1// Default
2<Pagination currentPage={page} totalPages={10} onPageChange={setPage} />
3 
4// Outlined
5<Pagination variant="outlined" currentPage={page} totalPages={10} onPageChange={setPage} />
6 
7// Minimal
8<Pagination variant="minimal" currentPage={page} totalPages={10} onPageChange={setPage} />

원형 버튼tsx

1<Pagination
2  currentPage={page}
3  totalPages={10}
4  onPageChange={setPage}
5  shape="circle"
6/>

페이지 정보 포함tsx

1import { PaginationWithInfo } from '@hua-labs/ui';
2 
3<PaginationWithInfo
4  currentPage={page}
5  totalPages={10}
6  onPageChange={setPage}
7  totalItems={100}
8  itemsPerPage={10}
9/>

접근성

•ARIA Current: 현재 페이지에 aria-current='page' 사용
•ARIA 레이블: 네비게이션 버튼에 설명적인 aria-label 적용
•키보드 탐색: 포커스 인디케이터와 함께 키보드 탐색 지원

Breadcrumb PageNavigation