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
布尔

更改传递为子级的默认渲染元素，合并它们的道具和行为。

阅读我们的组合指南以了解更多详细信息。

defaultValue
1
数字

最初渲染时应处于活动状态的选项卡的值。当您不需要控制选项卡的状态时使用

dir
'ltr' | 'rtl'

组合框的阅读方向（如果适用）。
如果省略，则从ConfigProvider全局继承或假设 LTR（从左到右）阅读模式。

linear
真
布尔

步骤是否必须按顺序完成

modelValue
数字

要激活的选项卡的受控值。可以绑定为v-model。

orientation
'horizontal'
'vertical' | 'horizontal'

选项卡的布局方向。主要是为了让箭头导航相应地进行（左右 vs. 上下）

发射有效载荷
update:modelValue
[有效载荷：数字]

值更改时调用的事件处理程序

插槽（默认）有效载荷
modelValue
数字 | 未定义

当前步骤

totalSteps
数字

步骤总数

isNextDisabled
布尔

下一步是否禁用

isPrevDisabled
布尔

上一步是否禁用

isFirstStep
布尔

第一步是否处于活动状态

isLastStep
布尔

最后一步是否处于活动状态

goToStep

转到特定步骤

nextStep

转到下一步

prevStep

转到上一步

数据属性价值
[data-orientation]"vertical" | "horizontal"
[data-linear]线性时出现

项目 ​

步骤项组件。

道具默认类型
as
'div'
AsTag | 组件

此组件应渲染为的元素或组件。可以被asChild覆盖

asChild
布尔

更改传递为子级的默认渲染元素，合并它们的道具和行为。

阅读我们的组合指南以了解更多详细信息。

已完成
错误的
布尔

显示步骤是否已完成。

禁用
错误的
布尔

当true时，阻止用户与选项卡交互。

step*
数字

一个唯一的值，将步进器项与索引关联起来

插槽（默认）有效载荷
状态
'active' | 'completed' | 'inactive'

步进器项的当前状态

数据属性价值
[data-state]"active" | "inactive" | "completed"
[data-disabled]禁用时出现
[data-orientation]"vertical" | "horizontal"

触发器 ​

切换步骤的触发器。

道具默认类型
as
'button'
AsTag | 组件

此组件应渲染为的元素或组件。可以被asChild覆盖

asChild
布尔

更改传递为子级的默认渲染元素，合并它们的道具和行为。

阅读我们的组合指南以了解更多详细信息。

数据属性价值
[data-state]"active" | "inactive" | "completed"
[data-disabled]禁用时出现
[data-orientation]"vertical" | "horizontal"

指示器 ​

步骤的指示器。

道具默认类型
as
'div'
AsTag | 组件

此组件应渲染为的元素或组件。可以被asChild覆盖

asChild
布尔

更改传递为子级的默认渲染元素，合并它们的道具和行为。

阅读我们的组合指南以了解更多详细信息。

标题 ​

当步进器触发器获得焦点时宣布的可访问标题。

如果您想隐藏标题，请将其包装在我们 Visual Hidden 实用程序中，如下所示：<VisuallyHidden asChild>。

道具默认类型
as
'h4'
AsTag | 组件

此组件应渲染为的元素或组件。可以被asChild覆盖

asChild
布尔

更改传递为子级的默认渲染元素，合并它们的道具和行为。

阅读我们的组合指南以了解更多详细信息。

说明 ​

当步进器触发器获得焦点时宣布的可选可访问说明。

如果您想隐藏说明，请将其包装在我们 Visual Hidden 实用程序中，如下所示：<VisuallyHidden asChild>。如果您想完全删除说明，请删除此部分并将aria-describedby="undefined"传递给StepperTrigger。

道具默认类型
as
'div'
AsTag | 组件

此组件应渲染为的元素或组件。可以被asChild覆盖

asChild
布尔

更改传递为子级的默认渲染元素，合并它们的道具和行为。

阅读我们的组合指南以了解更多详细信息。

已完成
错误的
布尔

显示步骤是否已完成。

禁用
错误的
布尔

当true时，阻止用户与选项卡交互。

step*
数字

一个唯一的值，将步进器项与索引关联起来

插槽（默认）有效载荷
状态
'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
选择获得焦点的步骤。