Stepper

一组用于指示多步骤流程进度的步骤。

View code

Address

Add your address here

Shipping

Set your preferred shipping method

Checkout

Confirm your order

Step 2 of 0

功能特点

支持受控或非受控模式。
支持水平/垂直方向。
支持线性/非线性激活。
完整的键盘导航支持。

安装

通过命令行安装该组件。

$ npm add reka-ui

结构

导入所有部件并组合在一起。

vue

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

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

      <StepperTitle />
      <StepperDescription />

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

API 参考

Root

包含所有步进器组件部件。

Prop	Default	Type
`as`	`'div'`	`AsTag \| Component` The element or component this component should render as. Can be overwritten by `asChild`.
`asChild`		`boolean` Change the default rendered element for the one passed as a child, merging their props and behavior. Read our Composition guide for more details.
`defaultValue`	`1`	`number` The value of the step that should be active when initially rendered. Use when you do not need to control the state of the steps.
`dir`		`'ltr' \| 'rtl'` The reading direction of the combobox when applicable. If omitted, inherits globally from `ConfigProvider` or assumes LTR (left-to-right) reading mode.
`linear`	`true`	`boolean` Whether or not the steps must be completed in order.
`modelValue`		`number` The controlled value of the step to activate. Can be bound as `v-model`.
`orientation`	`'horizontal'`	`'vertical' \| 'horizontal'` The orientation the steps are laid out. Mainly so arrow navigation is done accordingly (left & right vs. up & down).

Emit	Payload
`update:modelValue`	`[payload: number]` Event handler called when the value changes

Slots (default)	Payload
`modelValue`	`number \| undefined` Current step
`totalSteps`	`number` Total number of steps
`isNextDisabled`	`boolean` Whether or not the next step is disabled
`isPrevDisabled`	`boolean` Whether or not the previous step is disabled
`isFirstStep`	`boolean` Whether or not the first step is active
`isLastStep`	`boolean` Whether or not the last step is active
`goToStep`	`(step: number): void` Go to a specific step
`nextStep`	`(): void` Go to the next step
`prevStep`	`(): void` Go to the previous step
`hasNext`	`(): boolean` Whether or not there is a next step
`hasPrev`	`(): boolean` Whether or not there is a previous step

Methods	Type
`goToStep`	`(step: number) => void`
`nextStep`	`() => void`
`prevStep`	`() => void`
`hasNext`	`() => boolean`
`hasPrev`	`() => boolean`

Data Attribute	Value
`[data-orientation]`	`"vertical" \| "horizontal"`
`[data-linear]`	Present when linear

Item

步骤项组件。

Prop	Default	Type
`as`	`'div'`	`AsTag \| Component` The element or component this component should render as. Can be overwritten by `asChild`.
`asChild`		`boolean` Change the default rendered element for the one passed as a child, merging their props and behavior. Read our Composition guide for more details.
`completed`	`false`	`boolean` Shows whether the step is completed.
`disabled`	`false`	`boolean` When `true`, prevents the user from interacting with the step.
`step*`		`number` A unique value that associates the stepper item with an index

Slots (default)	Payload
`state`	`'active' \| 'completed' \| 'inactive'` The current state of the stepper item

Data Attribute	Value
`[data-state]`	`"active" \| "inactive" \| "completed"`
`[data-disabled]`	Present when disabled
`[data-orientation]`	`"vertical" \| "horizontal"`

Trigger

用于切换步骤的触发器。

Prop	Default	Type
`as`	`'button'`	`AsTag \| Component` The element or component this component should render as. Can be overwritten by `asChild`.
`asChild`		`boolean` Change the default rendered element for the one passed as a child, merging their props and behavior. Read our Composition guide for more details.

Data Attribute	Value
`[data-state]`	`"active" \| "inactive" \| "completed"`
`[data-disabled]`	Present when disabled
`[data-orientation]`	`"vertical" \| "horizontal"`

Indicator

步骤的指示器。

Prop	Default	Type
`as`	`'div'`	`AsTag \| Component` The element or component this component should render as. Can be overwritten by `asChild`.
`asChild`		`boolean` Change the default rendered element for the one passed as a child, merging their props and behavior. Read our Composition guide for more details.

Slots (default)	Payload
`step`	`number` Current step

Title

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

如果您想隐藏标题，可以使用我们的视觉隐藏工具将其包装起来，如 <VisuallyHidden asChild>。

Prop	Default	Type
`as`	`'h4'`	`AsTag \| Component` The element or component this component should render as. Can be overwritten by `asChild`.
`asChild`		`boolean` Change the default rendered element for the one passed as a child, merging their props and behavior. Read our Composition guide for more details.

Description

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

如果您想隐藏描述，可以使用我们的视觉隐藏工具将其包装起来，如 <VisuallyHidden asChild>。如果您想完全移除描述，请移除此部件，并将 aria-describedby="undefined" 传递给 StepperTrigger。

Prop	Default	Type
`as`	`'div'`	`AsTag \| Component` The element or component this component should render as. Can be overwritten by `asChild`.
`asChild`		`boolean` Change the default rendered element for the one passed as a child, merging their props and behavior. Read our Composition guide for more details.
`completed`	`false`	`boolean` Shows whether the step is completed.
`disabled`	`false`	`boolean` When `true`, prevents the user from interacting with the step.
`step*`		`number` A unique value that associates the stepper item with an index

Slots (default)	Payload
`state`	`'active' \| 'completed' \| 'inactive'` The current state of the stepper item

示例

垂直方向

您可以使用 orientation 属性创建垂直步骤。

vue

<script setup>
import { StepperDescription, StepperIndicator, StepperItem, StepperRoot, StepperTitle } from 'reka-ui'
</script>

<template>
  <StepperRoot
    :default-value="1"
    orientation="vertical"
  >
    <StepperItem>
      <StepperIndicator />
      <StepperTitle />
      <StepperDescription />
    </StepperItem>
    <StepperItem>
      <StepperIndicator />
      <StepperTitle />
      <StepperDescription />
    </StepperItem>
  </StepperRoot>
</template>

带控制按钮

您可以使用按钮为步进器添加额外的控制，并通过 useTemplateRef 访问类型化的组件实例。

vue

<script setup lang="ts">
const stepper = useTemplateRef('stepper')
</script>

<template>
  <StepperRoot
    ref="stepper"
    :default-value="1"
  >
    <StepperItem>
      <StepperIndicator />
      <StepperTitle />
      <StepperDescription />
    </StepperItem>
    <StepperItem>
      <StepperIndicator />
      <StepperTitle />
      <StepperDescription />
    </StepperItem>
  </StepperRoot>

  <div class="flex gap-2 justify-between mt-4">
    <button
      :disabled="!stepper?.hasPrev()"
      @click="stepper?.prevStep()"
    >
      上一步
    </button>

    <button
      :disabled="!stepper?.hasNext()"
      @click="stepper?.nextStep()"
    >
      下一步
    </button>
  </div>
</template>

可访问性

键盘交互

Key	Description
`Tab`	当焦点移动到步骤上时，聚焦于第一个步骤。
`ArrowDown`	根据`orientation`将焦点移动到下一个步骤。
`ArrowRight`	根据`orientation`将焦点移动到下一个步骤。
`ArrowUp`	根据`orientation`将焦点移动到上一个步骤。
`ArrowLeft`	根据`orientation`将焦点移动到上一个步骤。
`EnterSpace`	选择聚焦的步骤。

Stepper ​

Address

Shipping

Checkout

功能特点 ​

安装 ​

结构 ​

API 参考 ​

Root ​

Item ​

Trigger ​

Indicator ​

Title ​

Description ​

示例 ​

垂直方向 ​

带控制按钮 ​

可访问性 ​

键盘交互 ​