Tabs

@hua-labs/ui

v1.1.0

Tabbed content navigation with keyboard support and multiple visual variants.

설치

bash

npm install @hua-labs/hua

Import

tsx

import { Tabs, TabsList, TabsTrigger, TabsContent } from "@hua-labs/hua";

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

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

라이브 데모

기본 사용법

Account Settings

Manage your account information and preferences.

변형

Pills

Underline

Cards

크기

제어됨

Current:

account

Props

이름	타입	기본값	설명
`defaultValue`	`string`	-	Initial active tab value (uncontrolled)
`value`	`string`	-	Active tab value (controlled)
`onValueChange`	`(value: string) => void`	-	Callback when tab changes
`orientation`	`"horizontal" \| "vertical"`	`"horizontal"`	Tab orientation
`variant`	`"default" \| "pills" \| "underline" \| "cards"`	`"default"`	시각적 스타일 변형
`size`	`"sm" \| "md" \| "lg"`	`"md"`	Tab size

코드 예시

기본 사용법tsx

1// Via framework (recommended)
2import {
3  Tabs,
4  TabsList,
5  TabsTrigger,
6  TabsContent,
7} from '@hua-labs/ui/interactive';
8// Or direct import
9// import { Tabs, TabsList, TabsTrigger, TabsContent } from '@hua-labs/ui/interactive';
10 
11<Tabs defaultValue="tab1">
12  <TabsList>
13    <TabsTrigger value="tab1">Tab 1</TabsTrigger>
14    <TabsTrigger value="tab2">Tab 2</TabsTrigger>
15    <TabsTrigger value="tab3">Tab 3</TabsTrigger>
16  </TabsList>
17  <TabsContent value="tab1">Content for Tab 1</TabsContent>
18  <TabsContent value="tab2">Content for Tab 2</TabsContent>
19  <TabsContent value="tab3">Content for Tab 3</TabsContent>
20</Tabs>

제어 모드tsx

1const [activeTab, setActiveTab] = useState("account");
2 
3<Tabs value={activeTab} onValueChange={setActiveTab}>
4  <TabsList>
5    <TabsTrigger value="account">Account</TabsTrigger>
6    <TabsTrigger value="settings">Settings</TabsTrigger>
7  </TabsList>
8  <TabsContent value="account">Account settings...</TabsContent>
9  <TabsContent value="settings">App settings...</TabsContent>
10</Tabs>

변형tsx

1// Pills variant
2<Tabs variant="pills" defaultValue="tab1">
3  <TabsList>
4    <TabsTrigger value="tab1">Tab 1</TabsTrigger>
5    <TabsTrigger value="tab2">Tab 2</TabsTrigger>
6  </TabsList>
7</Tabs>
8 
9// Underline variant
10<Tabs variant="underline" defaultValue="tab1">
11  ...
12</Tabs>

접근성

•키보드 탐색: 화살표 키로 탭 이동, Home/End 키로 첫/마지막 탭으로 이동
•ARIA: role='tablist', role='tab', role='tabpanel'과 적절한 aria 속성 적용
•포커스 관리: 포커스는 선택에 따라 이동하며, tabindex는 자동으로 관리됩니다.

Accordion Tooltip