Navigation

@hua-labs/ui

v1.1.0

pills, underline, cards 변형을 지원하는 탭 기반 네비게이션 컴포넌트입니다. 제어/비제어 모드를 지원합니다.

설치

bash

npm install @hua-labs/hua

Import

tsx

import { Navigation, NavigationList, NavigationItem, NavigationContent } from "@hua-labs/hua";

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

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

라이브 데모

Pills (default)

Underline

Cards

크기

하위 컴포넌트

• NavigationList - 탭 목록 컨테이너
• NavigationItem - 개별 탭 버튼
• NavigationContent - 탭 콘텐츠 영역

Props

이름	타입	기본값	설명
`value`	`string`	-	활성 탭 값 (제어 모드)
`defaultValue`	`string`	-	기본 활성 탭 (비제어 모드)
`onValueChange`	`(value: string) => void`	-	탭 변경 콜백
`variant`	`"pills" \| "underline" \| "cards"`	`"pills"`	네비게이션 스타일
`scale`	`"small" \| "medium" \| "large"`	`"medium"`	크기

코드 예시

docs:common.basicUsagetsx

1import { NavigationContent } from '@hua-labs/ui';
2import { Navigation, NavigationList, NavigationItem } from '@hua-labs/ui/navigation';
3 
4<Navigation defaultValue="tab1">
5  <NavigationList>
6    <NavigationItem value="tab1">Tab 1</NavigationItem>
7    <NavigationItem value="tab2">Tab 2</NavigationItem>
8  </NavigationList>
9  <NavigationContent value="tab1">Content 1</NavigationContent>
10  <NavigationContent value="tab2">Content 2</NavigationContent>
11</Navigation>

docs:components.navigation.examples.variantstsx

1// Pills (기본)
2<Navigation variant="pills">...</Navigation>
3 
4// Underline
5<Navigation variant="underline">...</Navigation>
6 
7// Cards
8<Navigation variant="cards">...</Navigation>

docs:components.navigation.examples.controlledtsx

1const [active, setActive] = useState("tab1");
2 
3<Navigation value={active} onValueChange={setActive}>
4  <NavigationList>
5    <NavigationItem value="tab1">Tab 1</NavigationItem>
6    <NavigationItem value="tab2">Tab 2</NavigationItem>
7  </NavigationList>
8</Navigation>

접근성

•키보드: 키보드 탐색 시 포커스 링 표시
•포커스 표시: ring-1 ring-blue-400 ring-offset-2

Timeline Breadcrumb