安裝
Terminal
pnpm dlx shadcn-vue add @admin/stepperimport { AdminStepper, AdminStepperDescription, AdminStepperIndicator, AdminStepperItem, AdminStepperSeparator, AdminStepperTitle, AdminStepperTrigger,} from '@/components/admin/stepper'用法
<script setup lang="ts">import { ref } from 'vue'import { AdminStepper, AdminStepperIndicator, AdminStepperItem, AdminStepperSeparator, AdminStepperTitle, AdminStepperTrigger} from '@/components/admin/stepper'const step = ref<number | undefined>(1)const steps = [ { value: 1, title: 'Details' }, { value: 2, title: 'Review' }, { value: 3, title: 'Done' }]</script><template> <admin-stepper v-model="step" class="w-full max-w-md"> <admin-stepper-item v-for="s in steps" :key="s.value" :step="s.value"> <admin-stepper-trigger> <admin-stepper-indicator>{{ s.value }}</admin-stepper-indicator> <admin-stepper-title>{{ s.title }}</admin-stepper-title> </admin-stepper-trigger> <admin-stepper-separator v-if="s.value !== steps.length" /> </admin-stepper-item> </admin-stepper></template>場景
線性三步驟
<script setup lang="ts">import { ref } from 'vue'import { AdminStepper, AdminStepperIndicator, AdminStepperItem, AdminStepperSeparator, AdminStepperTitle, AdminStepperTrigger} from '@/components/admin/stepper'const step = ref<number | undefined>(1)const steps = [ { value: 1, title: '填寫資料' }, { value: 2, title: '確認' }, { value: 3, title: '完成' }]</script><template> <admin-stepper v-model="step" class="w-full max-w-md"> <admin-stepper-item v-for="(s, index) in steps" :key="s.value" :step="s.value"> <admin-stepper-trigger> <admin-stepper-indicator>{{ s.value }}</admin-stepper-indicator> <admin-stepper-title>{{ s.title }}</admin-stepper-title> </admin-stepper-trigger> <admin-stepper-separator v-if="index < steps.length - 1" /> </admin-stepper-item> </admin-stepper></template>停用尚未開放的步驟
<script setup lang="ts">import { ref } from 'vue'import { AdminStepper, AdminStepperIndicator, AdminStepperItem, AdminStepperSeparator, AdminStepperTitle, AdminStepperTrigger} from '@/components/admin/stepper'const step = ref<number | undefined>(2)</script><template> <admin-stepper v-model="step" class="w-full max-w-md"> <admin-stepper-item :step="1"> <admin-stepper-trigger> <admin-stepper-indicator>1</admin-stepper-indicator> <admin-stepper-title>已完成</admin-stepper-title> </admin-stepper-trigger> <admin-stepper-separator /> </admin-stepper-item> <admin-stepper-item :step="2"> <admin-stepper-trigger> <admin-stepper-indicator>2</admin-stepper-indicator> <admin-stepper-title>進行中</admin-stepper-title> </admin-stepper-trigger> <admin-stepper-separator /> </admin-stepper-item> <admin-stepper-item disabled :step="3"> <admin-stepper-trigger> <admin-stepper-indicator>3</admin-stepper-indicator> <admin-stepper-title>尚未開放</admin-stepper-title> </admin-stepper-trigger> </admin-stepper-item> </admin-stepper></template>步驟附說明文字
<script setup lang="ts">import { ref } from 'vue'import { AdminStepper, AdminStepperDescription, AdminStepperIndicator, AdminStepperItem, AdminStepperSeparator, AdminStepperTitle, AdminStepperTrigger} from '@/components/admin/stepper'const step = ref<number | undefined>(1)const steps = [ { value: 1, title: '帳號', description: '建立登入資訊' }, { value: 2, title: '付款', description: '選擇付款方式' }, { value: 3, title: '完成', description: '確認並送出' }]</script><template> <admin-stepper v-model="step" class="w-full max-w-lg"> <admin-stepper-item v-for="s in steps" :key="s.value" :step="s.value"> <admin-stepper-trigger> <admin-stepper-indicator>{{ s.value }}</admin-stepper-indicator> <div class="flex flex-col items-start"> <admin-stepper-title>{{ s.title }}</admin-stepper-title> <admin-stepper-description>{{ s.description }}</admin-stepper-description> </div> </admin-stepper-trigger> <admin-stepper-separator v-if="s.value !== steps.length" /> </admin-stepper-item> </admin-stepper></template>API 參考
組成
<template> <admin-stepper v-model="currentStep"> <admin-stepper-item :step="1"> <admin-stepper-trigger> <admin-stepper-indicator>1</admin-stepper-indicator> <div class="flex flex-col items-start"> <admin-stepper-title>步驟一</admin-stepper-title> <admin-stepper-description>建立登入資訊</admin-stepper-description> </div> </admin-stepper-trigger> </admin-stepper-item> <admin-stepper-separator /> <admin-stepper-item :step="2"> <admin-stepper-trigger> <admin-stepper-indicator>2</admin-stepper-indicator> <admin-stepper-title>步驟二</admin-stepper-title> </admin-stepper-trigger> </admin-stepper-item> </admin-stepper></template>admin-stepper
Props
| 名稱 | 型別 | 預設值 | 說明 |
|---|---|---|---|
defaultValue | number | undefined | — | 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. |
orientation | DataOrientation | undefined | horizontal | The orientation the steps are laid out. Mainly so arrow navigation is done accordingly (left & right vs. up & down). |
dir | Direction | undefined | — | The reading direction of the combobox when applicable. If omitted, inherits globally from `ConfigProvider` or assumes LTR (left-to-right) reading mode. |
modelValue | number | undefined | — | The controlled value of the step to activate. Can be bound as `v-model`. |
linear | boolean | undefined | — | Whether or not the steps must be completed in order. |
asChild | boolean | undefined | — | Change the default rendered element for the one passed as a child, merging their props and behavior. Read our [Composition](https://www.reka-ui.com/docs/guides/composition) guide for more details. |
as | globalThis.Component | AsTag | undefined | "div" | The element or component this component should render as. Can be overwritten by `asChild`. |
class | ClassValue | — | 根元素之自訂 class |
Events
| 名稱 | Payload | 說明 |
|---|---|---|
update:modelValue | number | undefined | — |
Slots
| 名稱 | Bindings | 說明 |
|---|---|---|
default | {} | — |
admin-stepper-item
Props
| 名稱 | 型別 | 預設值 | 說明 |
|---|---|---|---|
step* | number | — | A unique value that associates the stepper item with an index |
disabled | boolean | undefined | — | When `true`, prevents the user from interacting with the step. |
completed | boolean | undefined | — | Shows whether the step is completed. |
asChild | boolean | undefined | — | Change the default rendered element for the one passed as a child, merging their props and behavior. Read our [Composition](https://www.reka-ui.com/docs/guides/composition) guide for more details. |
as | globalThis.Component | AsTag | undefined | "div" | The element or component this component should render as. Can be overwritten by `asChild`. |
class | ClassValue | — | 根元素之自訂 class |
* 代表必填
Slots
| 名稱 | Bindings | 說明 |
|---|---|---|
default | { state: StepperState; } | — |
admin-stepper-trigger
Props
| 名稱 | 型別 | 預設值 | 說明 |
|---|---|---|---|
asChild | boolean | undefined | — | Change the default rendered element for the one passed as a child, merging their props and behavior. Read our [Composition](https://www.reka-ui.com/docs/guides/composition) guide for more details. |
as | globalThis.Component | AsTag | undefined | "div" | The element or component this component should render as. Can be overwritten by `asChild`. |
class | ClassValue | — | 根元素之自訂 class |
Slots
| 名稱 | Bindings | 說明 |
|---|---|---|
default | {} | — |
admin-stepper-indicator
Props
| 名稱 | 型別 | 預設值 | 說明 |
|---|---|---|---|
asChild | boolean | undefined | — | Change the default rendered element for the one passed as a child, merging their props and behavior. Read our [Composition](https://www.reka-ui.com/docs/guides/composition) guide for more details. |
as | globalThis.Component | AsTag | undefined | "div" | The element or component this component should render as. Can be overwritten by `asChild`. |
class | ClassValue | — | 根元素之自訂 class |
Slots
| 名稱 | Bindings | 說明 |
|---|---|---|
default | { step: number; } | — |
admin-stepper-title
Props
| 名稱 | 型別 | 預設值 | 說明 |
|---|---|---|---|
asChild | boolean | undefined | — | Change the default rendered element for the one passed as a child, merging their props and behavior. Read our [Composition](https://www.reka-ui.com/docs/guides/composition) guide for more details. |
as | globalThis.Component | AsTag | undefined | "div" | The element or component this component should render as. Can be overwritten by `asChild`. |
class | ClassValue | — | 根元素之自訂 class |
Slots
| 名稱 | Bindings | 說明 |
|---|---|---|
default | {} | — |
admin-stepper-description
Props
| 名稱 | 型別 | 預設值 | 說明 |
|---|---|---|---|
asChild | boolean | undefined | — | Change the default rendered element for the one passed as a child, merging their props and behavior. Read our [Composition](https://www.reka-ui.com/docs/guides/composition) guide for more details. |
as | globalThis.Component | AsTag | undefined | "div" | The element or component this component should render as. Can be overwritten by `asChild`. |
class | ClassValue | — | 根元素之自訂 class |
Slots
| 名稱 | Bindings | 說明 |
|---|---|---|
default | {} | — |
admin-stepper-separator
Props
| 名稱 | 型別 | 預設值 | 說明 |
|---|---|---|---|
orientation | DataOrientation | undefined | — | Orientation of the component. Either `vertical` or `horizontal`. Defaults to `horizontal`. |
decorative | boolean | undefined | — | Whether or not the component is purely decorative. When `true`, accessibility-related attributes are updated so that that the rendered element is removed from the accessibility tree. |
asChild | boolean | undefined | — | Change the default rendered element for the one passed as a child, merging their props and behavior. Read our [Composition](https://www.reka-ui.com/docs/guides/composition) guide for more details. |
as | globalThis.Component | AsTag | undefined | "div" | The element or component this component should render as. Can be overwritten by `asChild`. |
class | ClassValue | — | 根元素之自訂 class |