Skip to content
Docs
컴포넌트로 돌아가기

PageNavigation

@hua-labs/ui
v1.0.0

이전/다음 페이지 네비게이션 컴포넌트입니다. 문서 페이지나 멀티페이지 가이드에 적합합니다.

설치

bash
npm install @hua-labs/hua
Import
tsx
import { PageNavigation } from "@hua-labs/hua";

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

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

라이브 데모

모바일 동작

기본적으로 PageNavigation은 데스크톱에서만 표시됩니다. 모바일에서도 표시하려면 showOnMobile prop을 사용하세요.

Props

이름타입기본값설명
prevPage{ title: string; href: string }-Previous page info
nextPage{ title: string; href: string }-Next page info
showOnMobilebooleanfalseShow on mobile devices

Code Examples

docs:common.basicUsagetsx
1import { PageNavigation } from '@hua-labs/ui/navigation';
2 
3<PageNavigation
4  prevPage={{ title: "Introduction", href: "/docs/intro" }}
5  nextPage={{ title: "Getting Started", href: "/docs/getting-started" }}
6/>
docs:components.pageNavigation.examples.previousOnlytsx
1<PageNavigation
2  prevPage={{ title: "Back to Components", href: "/docs/components" }}
3/>
docs:components.pageNavigation.examples.nextOnlytsx
1<PageNavigation
2  nextPage={{ title: "Continue to Hooks", href: "/docs/hooks" }}
3/>
docs:components.pageNavigation.examples.showOnMobiletsx
1<PageNavigation
2  prevPage={{ title: "Prev", href: "/prev" }}
3  nextPage={{ title: "Next", href: "/next" }}
4  showOnMobile
5/>

접근성

  • •링크 요소: 네비게이션에 앵커 요소 사용
  • •호버 애니메이션: 시각적 피드백을 위해 호버 시 화살표 애니메이션