Radix Vue

外観

タブ ​

一度に1つずつ表示される、コンテンツの階層化されたセクション（タブパネルとして知られる）のセット。

ここでアカウントを変更してください。完了したら保存をクリックしてください。

vue
<script setup lang="ts">
import { TabsContent, TabsIndicator, TabsList, TabsRoot, TabsTrigger } from 'radix-vue'
</script>

<template>
  <TabsRoot
    class="flex flex-col w-full sm:w-[300px] shadow-[0_2px_10px] shadow-blackA4"
    default-value="tab1"
  >
    <TabsList
      class="relative shrink-0 flex border-b border-mauve6"
      aria-label="Manage your account"
    >
      <TabsIndicator class="absolute px-8 left-0 h-[2px] bottom-0 w-[--radix-tabs-indicator-size] translate-x-[--radix-tabs-indicator-position] rounded-full transition-[width,transform] duration-300">
        <div class="bg-grass8 w-full h-full" />
      </TabsIndicator>
      <TabsTrigger
        class="bg-white px-5 h-[45px] flex-1 flex items-center justify-center text-[15px] leading-none text-mauve11 select-none  rounded-tl-md  hover:text-grass11 data-[state=active]:text-grass11 outline-none cursor-default focus-visible:relative focus-visible:shadow-[0_0_0_2px] focus-visible:shadow-black"
        value="tab1"
      >
        Account
      </TabsTrigger>
      <TabsTrigger
        class="bg-white px-5 h-[45px] flex-1 flex items-center justify-center text-[15px] leading-none text-mauve11 select-none  rounded-tr-md hover:text-grass11 data-[state=active]:text-grass11 outline-none cursor-default focus-visible:relative focus-visible:shadow-[0_0_0_2px] focus-visible:shadow-black"
        value="tab2"
      >
        Password
      </TabsTrigger>
    </TabsList>
    <TabsContent
      class="grow p-5 bg-white rounded-b-md outline-none focus:shadow-[0_0_0_2px] focus:shadow-black"
      value="tab1"
    >
      <p class="mb-5 !mt-0 text-mauve11 text-[15px] !leading-normal">
        Make changes to your account here. Click save when you're done.
      </p>
      <fieldset class="mb-[15px] w-full flex flex-col justify-start">
        <label
          class="text-[13px] leading-none mb-2.5 text-green12 block"
          for="name"
        > Name </label>
        <input
          id="name"
          class="grow shrink-0 rounded px-2.5 text-[15px] leading-none text-grass11 shadow-[0_0_0_1px] shadow-green7 h-[35px] focus:shadow-[0_0_0_2px] focus:shadow-green8 outline-none"
          value="Pedro Duarte"
        >
      </fieldset>
      <fieldset class="mb-[15px] w-full flex flex-col justify-start">
        <label
          class="text-[13px] leading-none mb-2.5 text-green12 block"
          for="username"
        > Username </label>
        <input
          id="username"
          class="grow shrink-0 rounded px-2.5 text-[15px] leading-none text-grass11 shadow-[0_0_0_1px] shadow-green7 h-[35px] focus:shadow-[0_0_0_2px] focus:shadow-green8 outline-none"
          value="@peduarte"
        >
      </fieldset>
      <div class="flex justify-end mt-5">
        <button
          class="inline-flex items-center justify-center rounded px-[15px] text-[15px] leading-none font-medium h-[35px] bg-green4 text-green11 hover:bg-green5 focus:shadow-[0_0_0_2px] focus:shadow-green7 outline-none cursor-default"
        >
          Save changes
        </button>
      </div>
    </TabsContent>
    <TabsContent
      class="grow p-5 bg-white rounded-b-md outline-none focus:shadow-[0_0_0_2px] focus:shadow-black"
      value="tab2"
    >
      <p class="mb-5 !mt-0 text-mauve11 text-[15px] !leading-normal">
        Change your password here. After saving, you'll be logged out.
      </p>
      <fieldset class="mb-[15px] w-full flex flex-col justify-start">
        <label
          class="text-[13px] leading-none mb-2.5 text-green12 block"
          for="currentPassword"
        >
          Current password
        </label>
        <input
          id="currentPassword"
          class="grow shrink-0 rounded px-2.5 text-[15px] leading-none text-grass11 shadow-[0_0_0_1px] shadow-green7 h-[35px] focus:shadow-[0_0_0_2px] focus:shadow-green8 outline-none"
          type="password"
        >
      </fieldset>
      <fieldset class="mb-[15px] w-full flex flex-col justify-start">
        <label
          class="text-[13px] leading-none mb-2.5 text-green12 block"
          for="newPassword"
        > New password </label>
        <input
          id="newPassword"
          class="grow shrink-0 rounded px-2.5 text-[15px] leading-none text-grass11 shadow-[0_0_0_1px] shadow-green7 h-[35px] focus:shadow-[0_0_0_2px] focus:shadow-green8 outline-none"
          type="password"
        >
      </fieldset>
      <fieldset class="mb-[15px] w-full flex flex-col justify-start">
        <label
          class="text-[13px] leading-none mb-2.5 text-green12 block"
          for="confirmPassword"
        >
          Confirm password
        </label>
        <input
          id="confirmPassword"
          class="grow shrink-0 rounded px-2.5 text-[15px] leading-none text-grass11 shadow-[0_0_0_1px] shadow-green7 h-[35px] focus:shadow-[0_0_0_2px] focus:shadow-green8 outline-none"
          type="password"
        >
      </fieldset>
      <div class="flex justify-end mt-5">
        <button
          class="inline-flex items-center justify-center rounded px-[15px] text-[15px] leading-none font-medium h-[35px] bg-green4 text-green11 hover:bg-green5 focus:shadow-[0_0_0_2px] focus:shadow-green7 outline-none cursor-default"
        >
          Change password
        </button>
      </div>
    </TabsContent>
  </TabsRoot>
</template>

機能 ​

  • 制御ありまたは制御なしにすることができます。
  • 水平/垂直方向をサポートします。
  • 自動/手動アクティベーションをサポートします。
  • フルキーボードナビゲーション。

インストール ​

コマンドラインからコンポーネントをインストールします。

sh
$ npm add radix-vue

構造 ​

すべての部品をインポートして組み合わせます。

vue
<script setup>
import { TabsContent, TabsIndicator, TabsList, TabsRoot, TabsTrigger } from 'radix-vue'
</script>

<template>
  <TabsRoot>
    <TabsList>
      <TabsIndicator />
      <TabsTrigger />
    </TabsList>
    <TabsContent />
  </TabsRoot>
</template>

APIリファレンス ​

ルート ​

すべてのタブコンポーネント部品を含みます。

プロパティデフォルト型
activationMode
'automatic'
'automatic' | 'manual'

タブが自動的に（フォーカス時）または手動で（クリック時）アクティブになるかどうか。

as
'div'
AsTag | Component

このコンポーネントがレンダリングされる要素またはコンポーネント。asChildで上書きできます。

asChild
boolean

子として渡された要素のデフォルトのレンダリング要素を変更し、それらのプロパティと動作をマージします。

詳細については、コンポジションガイドをお読みください。

defaultValue
string | number

最初にレンダリングされたときにアクティブにする必要のあるタブの値。タブの状態を制御する必要がない場合に使用します。

dir
'ltr' | 'rtl'

該当する場合のコンボボックスの読み取り方向。
省略した場合、ConfigProviderからグローバルに継承するか、LTR（左から右）の読み取りモードを想定します。

modelValue
string | number

アクティブにするタブの制御された値。v-modelとしてバインドできます。

orientation
'horizontal'
'vertical' | 'horizontal'

タブがレイアウトされる方向。主に、矢印ナビゲーションがそれに応じて（左右対上下）行われるようにするためです。

エミットペイロード
update:modelValue
[payload: StringOrNumber]

値が変更されたときに呼び出されるイベントハンドラー

スロット (デフォルト)ペイロード
modelValue
string | number

現在の入力値

データ属性値
[data-orientation]"vertical" | "horizontal"

リスト ​

アクティブなコンテンツのエッジに沿って整列されたトリガーが含まれています。

プロパティデフォルト型
as
'div'
AsTag | Component

このコンポーネントがレンダリングされる要素またはコンポーネント。asChildで上書きできます。

asChild
boolean

子として渡された要素のデフォルトのレンダリング要素を変更し、それらのプロパティと動作をマージします。

詳細については、コンポジションガイドをお読みください。

loop
true
boolean

trueの場合、キーボードナビゲーションは最後のタブから最初のタブへ、およびその逆へループします。

データ属性値
[data-orientation]"vertical" | "horizontal"

トリガー ​

関連付けられたコンテンツをアクティブにするボタン。

プロパティデフォルト型
as
'button'
AsTag | Component

このコンポーネントがレンダリングされる要素またはコンポーネント。asChildで上書きできます。

asChild
boolean

子として渡された要素のデフォルトのレンダリング要素を変更し、それらのプロパティと動作をマージします。

詳細については、コンポジションガイドをお読みください。

disabled
false
boolean

trueの場合、ユーザーがタブを操作することを防ぎます。

value*
string | number

トリガーをコンテンツと関連付ける一意の値。

データ属性値
[data-state]"active" | "inactive"
[data-disabled]無効になっている場合に存在します
[data-orientation]"vertical" | "horizontal"

インジケーター ​

現在アクティブなタブを強調表示するインジケーター。

プロパティデフォルト型
as
'div'
AsTag | Component

このコンポーネントがレンダリングされる要素またはコンポーネント。asChildで上書きできます。

asChild
boolean

子として渡された要素のデフォルトのレンダリング要素を変更し、それらのプロパティと動作をマージします。

詳細については、コンポジションガイドをお読みください。

CSS変数説明
--radix-tabs-indicator-size
インジケーターのサイズ。
--radix-tabs-indicator-position
インジケーターの位置

コンテンツ ​

各トリガーに関連付けられたコンテンツが含まれています。

プロパティデフォルト型
as
'div'
AsTag | Component

このコンポーネントがレンダリングされる要素またはコンポーネント。asChildで上書きできます。

asChild
boolean

子として渡された要素のデフォルトのレンダリング要素を変更し、それらのプロパティと動作をマージします。

詳細については、コンポジションガイドをお読みください。

forceMount
boolean

より多くの制御が必要な場合にマウントを強制するために使用されます。Vueアニメーションライブラリでアニメーションを制御する場合に役立ちます。

value*
string | number

コンテンツをトリガーに関連付ける一意の値。

データ属性値
[data-state]"active" | "inactive"
[data-orientation]"vertical" | "horizontal"

例 ​

垂直 ​

orientationプロパティを使用することで、垂直タブを作成できます。

vue
<script setup>
import { TabsContent, TabsList, TabsRoot, TabsTrigger } from 'radix-vue'
</script>

<template>
  <TabsRoot
    default-value="tab1"
    orientation="vertical"
  >
    <TabsList aria-label="tabs example">
      <TabsTrigger value="tab1">
        One
      </TabsTrigger>
      <TabsTrigger value="tab2">
        Two
      </TabsTrigger>
      <TabsTrigger value="tab3">
        Three
      </TabsTrigger>
    </TabsList>
    <TabsContent value="tab1">
      Tab one content
    </TabsContent>
    <TabsContent value="tab2">
      Tab two content
    </TabsContent>
    <TabsContent value="tab3">
      Tab three content
    </TabsContent>
  </TabsRoot>
</template>

アクセシビリティ ​

タブWAI-ARIAデザインパターンに準拠しています。

キーボード操作 ​

キー説明
タブ
フォーカスがタブに移動すると、アクティブなトリガーにフォーカスします。トリガーにフォーカスがある場合、フォーカスをアクティブなコンテンツに移動します。
ArrowDown
orientationに応じて、次のトリガーにフォーカスを移動し、関連付けられたコンテンツをアクティブにします。
ArrowRight
orientationに応じて、次のトリガーにフォーカスを移動し、関連付けられたコンテンツをアクティブにします。
ArrowUp
orientationに応じて、前のトリガーにフォーカスを移動し、関連付けられたコンテンツをアクティブにします。
ArrowLeft
orientationに応じて、前のトリガーにフォーカスを移動し、関連付けられたコンテンツをアクティブにします。
Home
最初のトリガーにフォーカスを移動し、関連付けられたコンテンツをアクティブにします。
End
最後のトリガーにフォーカスを移動し、関連付けられたコンテンツをアクティブにします。