Tabs

참고: Tabs는 shadcn/ui 구조를 그대로 구현했습니다. 접근성 속성(ARIA)이 포함되어 있으며, 프론트엔드에서 React로 전환 시 동일한 구조를 사용할 수 있습니다.

기본 사용법

기본 탭 스타일

          <Tabs id="tabs-default" defaultValue="account"> <TabsList
          tabsId="tabs-default"> <TabsTrigger value="account"
          tabsId="tabs-default">Account</TabsTrigger> <TabsTrigger value="password"
          tabsId="tabs-default">Password</TabsTrigger> </TabsList> <TabsContent
          value="account" tabsId="tabs-default"> Account content here </TabsContent>
          <TabsContent value="password" tabsId="tabs-default"> Password content here
          </TabsContent> </Tabs>
        

Icons

아이콘과 텍스트를 함께 표시하는 탭

          <Tabs id="tabs-icons" defaultValue="preview"> <TabsList tabsId="tabs-icons">
          <TabsTrigger value="preview" tabsId="tabs-icons" class="gap-2">
          <svg>...</svg> Preview </TabsTrigger> <TabsTrigger value="code"
          tabsId="tabs-icons" class="gap-2"> <svg>...</svg> Code </TabsTrigger>
          </TabsList> <TabsContent value="preview" tabsId="tabs-icons"> Preview content
          </TabsContent> <TabsContent value="code" tabsId="tabs-icons"> Code content
          </TabsContent> </Tabs>
        

주요 기능

접근성:

ARIA 속성 자동 설정 (role="tablist", role="tab", role="tabpanel")
aria-selected 속성으로 선택 상태 표시
aria-controls와 aria-labelledby로 탭과 패널 연결
키보드 네비게이션 지원 (화살표 키, Home/End, Enter/Space)
포커스 관리 (선택된 탭만 tabindex="0")

스타일 Variant:

variant="default": 기본 스타일 (배경색 있는 탭)

사용 시 주의사항:

각 Tabs는 고유한 id를 가져야 합니다
TabsList, TabsTrigger, TabsContent의 tabsId는 모두 동일해야 합니다
TabsTrigger의 value와 TabsContent의 value가 일치해야 합니다
defaultValue는 초기에 선택될 탭의 value를 지정합니다
아이콘을 사용할 경우 TabsTrigger의 슬롯에 추가하면 됩니다

키보드 단축키:

←/→ 또는 ↑/↓: 이전/다음 탭으로 이동
Home: 첫 번째 탭으로 이동
End: 마지막 탭으로 이동
Enter/Space: 현재 포커스된 탭 선택

기본 사용법

Account Settings

Password Settings

Icons

Preview

Code

주요 기능