Tabs

インポート

import { Tabs, TabsList, TabsTrigger, TabsContent } from '@caroainc/ui-components/client'

基本的な使い方

アカウント

アカウント設定を変更します。

<Tabs defaultValue="account">
  <TabsList>
    <TabsTrigger value="account">アカウント</TabsTrigger>
    <TabsTrigger value="password">パスワード</TabsTrigger>
  </TabsList>
  <TabsContent value="account">
    アカウントの内容
  </TabsContent>
  <TabsContent value="password">
    パスワードの内容
  </TabsContent>
</Tabs>

Props

Tabs

Prop	Type	Default	Description
`defaultValue`	`string`	`-`	初期選択タブの値
`value`	`string`	`-`	選択タブ（制御コンポーネント）
`onValueChange`	`(value: string) => void`	`-`	タブ変更時のコールバック

TabsTrigger

Prop	Type	Default	Description
`value*`	`string`	`-`	タブの識別値
`disabled`	`boolean`	`false`	無効状態

Tabs

インポート

基本的な使い方

アカウント

Props

Tabs

TabsTrigger

On this page

アカウント