Radix Vue

外観

ステッパー ​

複数ステップのプロセスにおける進捗を示すために使用されるステップのセットです。

住所

配送

チェックアウト

ステップ 2 / 0
vue
<script setup lang="ts">
import { Icon } from '@iconify/vue'
import { StepperDescription, StepperIndicator, StepperItem, StepperRoot, StepperSeparator, StepperTitle, StepperTrigger } from 'radix-vue'

const steps = [{
  step: 1,
  title: 'Address',
  description: 'Add your address here',
  icon: 'radix-icons:home',
}, {
  step: 2,
  title: 'Shipping',
  description: 'Set your preferred shipping method',
  icon: 'radix-icons:archive',
}, {
  step: 3,
  title: 'Checkout',
  description: 'Confirm your order',
  icon: 'radix-icons:check',
}]
</script>

<template>
  <StepperRoot
    :default-value="2"
    class="flex gap-2 w-full max-w-[32rem]"
  >
    <StepperItem
      v-for="item in steps"
      :key="item.step"
      class="w-full flex justify-center gap-2 cursor-pointer group data-[disabled]:pointer-events-none relative px-4"
      :step="item.step"
    >
      <StepperTrigger class="inline-flex items-center group-data-[disabled]:text-gray-400 group-data-[state=active]:bg-green11 group-data-[state=active]:text-white justify-center rounded-full text-gray-400 w-10 h-10 shrink-0 bg-gray-300 group-data-[state=completed]:bg-white group-data-[state=completed]:text-green10 focus:shadow-[0_0_0_2px] focus:shadow-black focus:outline-none">
        <StepperIndicator>
          <Icon
            :icon="item.icon"
            class="w-5 h-5"
          />
        </StepperIndicator>
      </StepperTrigger>

      <StepperSeparator
        v-if="item.step !== steps[steps.length - 1].step"
        class="absolute block top-5 left-[calc(50%+30px)] right-[calc(-50%+20px)] h-0.5 rounded-full group-data-[disabled]:bg-gray-300 bg-gray-300 group-data-[state=completed]:bg-white bg-green5 shrink-0"
      />

      <div class="absolute text-center top-full left-0 w-full mt-2 text-white group-data-[state=inactive]:text-gray-300">
        <StepperTitle class="font-medium">
          {{ item.title }}
        </StepperTitle>
        <StepperDescription class="hidden sm:block text-xs">
          {{ item.description }}
        </StepperDescription>
      </div>
    </StepperItem>
  </StepperRoot>
</template>

機能 ​

  • 制御可能または非制御にできます。
  • 水平/垂直方向をサポートします。
  • 線形/非線形のアクティベーションをサポートします。
  • 完全なキーボードナビゲーション。

インストール ​

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

sh
$ npm add radix-vue

構造 ​

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

vue
<script setup>
import { StepperDescription, StepperIndicator, StepperItem, StepperRoot, StepperTitle, StepperTrigger } from 'radix-vue'
</script>

<template>
  <StepperRoot>
    <StepperItem>
      <StepperTrigger />
      <StepperIndicator />

      <StepperTitle />
      <StepperDescription />

      <StepperSeparator />
    </StepperItem>
  </StepperRoot>
</template>

APIリファレンス ​

ルート ​

すべてのステッパーコンポーネントパーツを含みます。

プロパティデフォルトタイプ
as
'div'
AsTag | コンポーネント

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

asChild
boolean

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

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

defaultValue
1
number

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

dir
'ltr' | 'rtl'

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

linear
true
boolean

ステップを順番に完了する必要があるかどうか

modelValue
number

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

orientation
'horizontal'
'vertical' | 'horizontal'

タブのレイアウト方向。主に、矢印ナビゲーションが適切に行われるようにします（左右または上下）。

Emitペイロード
update:modelValue
[payload: number]

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

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

現在のステップ

totalSteps
number

ステップの総数

isNextDisabled
boolean

次のステップが無効かどうか

isPrevDisabled
boolean

前のステップが無効かどうか

isFirstStep
boolean

最初のステップがアクティブかどうか

isLastStep
boolean

最後のステップがアクティブかどうか

goToStep

特定のステップに移動する

nextStep

次のステップに移動する

prevStep

前のステップに移動する

データ属性値
[data-orientation]"vertical" | "horizontal"
[data-linear]線形の場合に表示

アイテム ​

ステップアイテムコンポーネント。

プロパティデフォルトタイプ
as
'div'
AsTag | コンポーネント

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

asChild
boolean

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

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

completed
false
boolean

ステップが完了したかどうかを示します。

disabled
false
boolean

trueの場合、ユーザーがタブを操作できないようにします。

step*
number

ステッパーアイテムをインデックスに関連付ける一意の値

スロット (デフォルト)ペイロード
state
'active' | 'completed' | 'inactive'

ステッパーアイテムの現在の状態

データ属性値
[data-state]"active" | "inactive" | "completed"
[data-disabled]無効の場合に表示
[data-orientation]"vertical" | "horizontal"

トリガー ​

ステップを切り替えるトリガー。

プロパティデフォルトタイプ
as
'button'
AsTag | コンポーネント

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

asChild
boolean

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

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

データ属性値
[data-state]"active" | "inactive" | "completed"
[data-disabled]無効の場合に表示
[data-orientation]"vertical" | "horizontal"

インジケーター ​

ステップのインジケーター。

プロパティデフォルトタイプ
as
'div'
AsTag | コンポーネント

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

asChild
boolean

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

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

タイトル ​

ステッパートリガーにフォーカスがある場合にアナウンスされるアクセシブルなタイトル。

タイトルを非表示にする場合は、<VisuallyHidden asChild>のように、視覚的に非表示ユーティリティでラップします。

プロパティデフォルトタイプ
as
'h4'
AsTag | コンポーネント

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

asChild
boolean

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

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

説明 ​

ステッパートリガーにフォーカスがある場合にアナウンスされるオプションのアクセシブルな説明。

説明を非表示にする場合は、<VisuallyHidden asChild>のように、視覚的に非表示ユーティリティでラップします。説明を完全に削除する場合は、この部分を削除し、StepperTriggerにaria-describedby="undefined"を渡します。

プロパティデフォルトタイプ
as
'div'
AsTag | コンポーネント

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

asChild
boolean

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

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

completed
false
boolean

ステップが完了したかどうかを示します。

disabled
false
boolean

trueの場合、ユーザーがタブを操作できないようにします。

step*
number

ステッパーアイテムをインデックスに関連付ける一意の値

スロット (デフォルト)ペイロード
state
'active' | 'completed' | 'inactive'

ステッパーアイテムの現在の状態

例 ​

垂直 ​

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

vue
<script setup>
import { StepperDescription, StepperIndicator, StepperItem, StepperList, StepperRoot, StepperTitle } from 'radix-vue'
</script>

<template>
  <StepperRoot
    :default-value="1"
    orientation="vertical"
  >
    <StepperList aria-label="stepper example">
      <StepperItem>
        <StepperIndicator />
        <StepperTitle />
        <StepperDescription />
      </StepperItem>
      <StepperItem>
        <StepperIndicator />
        <StepperTitle />
        <StepperDescription />
      </StepperItem>
    </StepperList>
  </StepperRoot>
</template>

アクセシビリティ ​

キーボード操作 ​

キー説明
Tab
フォーカスがステップに移動すると、最初のステップにフォーカスが移動します。
ArrowDown
orientationに応じて、次のステップにフォーカスを移動します。
ArrowRight
orientationに応じて、次のステップにフォーカスを移動します。
ArrowUp
orientationに応じて、前のステップにフォーカスを移動します。
ArrowLeft
orientationに応じて、前のステップにフォーカスを移動します。
EnterSpace
フォーカスされたステップを選択します。