Q
v0.3

Tabs

NEW

コンテンツを整理するタブナビゲーションコンポーネント

Basic

基本的なタブ

Account Settings

Manage your account details and preferences here.

With Icons

アイコン付きタブ

Overview content with dashboard summary.

Usage

コンポーネントの使用例

tsx
class="token keyword">import { Tabs, TabsList, TabTrigger, TabContent } class="token keyword">from class="token keyword">class="token string">"@/components/ui";

<class="token tag">Tabs defaultValue=class="token keyword">class="token string">"tab1">
  <class="token tag">TabsList>
    <class="token tag">TabTrigger value=class="token keyword">class="token string">"tab1">Tab class="token number">1</class="token tag">TabTrigger>
    <class="token tag">TabTrigger value=class="token keyword">class="token string">"tab2">Tab class="token number">2</class="token tag">TabTrigger>
    <class="token tag">TabTrigger value=class="token keyword">class="token string">"tab3">Tab class="token number">3</class="token tag">TabTrigger>
  </class="token tag">TabsList>
  <class="token tag">TabContent value=class="token keyword">class="token string">"tab1">
    Content class="token keyword">for tab class="token number">1
  </class="token tag">TabContent>
  <class="token tag">TabContent value=class="token keyword">class="token string">"tab2">
    Content class="token keyword">for tab class="token number">2
  </class="token tag">TabContent>
  <class="token tag">TabContent value=class="token keyword">class="token string">"tab3">
    Content class="token keyword">for tab class="token number">3
  </class="token tag">TabContent>
</class="token tag">Tabs>