PXD

Steps

Guide the user to complete tasks in accordance with the process.

Steps are driven by the options prop; the indicators and labels are rendered by PSteps itself, so the markup also exists in server-rendered HTML.

Use v-model to control the current step index (starting from 0).

Cart
Review items in your cart
2
Payment
Choose a payment method
3
Done
Order confirmed
<script setup>
import { ref } from 'vue'

const current = ref(1)

const options = [
  { description: 'Review items in your cart', title: 'Cart' },
  { description: 'Choose a payment method', title: 'Payment' },
  { description: 'Order confirmed', title: 'Done' },
]
</script>

<template>
  <PSteps v-model="current" :options="options" />
</template>

Clickable

Set clickable to allow switching steps by clicking.

Cart
Review items in your cart
2
Payment
Choose a payment method
3
Done
Order confirmed
<script setup>
import { ref } from 'vue'

const current = ref(1)

const options = [
  { description: 'Review items in your cart', title: 'Cart' },
  { description: 'Choose a payment method', title: 'Payment' },
  { description: 'Order confirmed', title: 'Done' },
]
</script>

<template>
  <PSteps v-model="current" clickable :options="options" />
</template>

Uncontrolled

Without v-model the steps keep their own state, and default-value picks the current step.

Cart
2
Payment
3
Done
<script setup>
import { ref } from 'vue'

const options = [
  { title: 'Cart' },
  { title: 'Payment' },
  { title: 'Done' },
]
</script>

<template>
  <PSteps clickable default-value="1" :options="options" />
</template>

Vertical

Set direction to vertical to lay steps out vertically.

Cart
Review items in your cart
2
Payment
Choose a payment method
3
Done
Order confirmed
<script setup>
import { ref } from 'vue'

const current = ref(1)

const options = [
  { description: 'Review items in your cart', title: 'Cart' },
  { description: 'Choose a payment method', title: 'Payment' },
  { description: 'Order confirmed', title: 'Done' },
]
</script>

<template>
  <PSteps v-model="current" direction="vertical" clickable :options="options" />
</template>

Status

Set status on PSteps to control the current step’s status. Set status on an option to override the derived status.

Cart
Review items in your cart
Payment
Payment failed, please retry
3
Done
Order confirmed
<script setup>
import { ref } from 'vue'

const current = ref(1)

const options = [
  { description: 'Review items in your cart', title: 'Cart' },
  { description: 'Payment failed, please retry', title: 'Payment' },
  { description: 'Order confirmed', title: 'Done' },
]
</script>

<template>
  <PSteps v-model="current" status="error" :options="options" />
</template>

Size

Cart
2
Payment
3
Done
Cart
2
Payment
3
Done
Cart
2
Payment
3
Done
<script setup>
import { ref } from 'vue'

const current = ref(1)

const options = [{ title: 'Cart' }, { title: 'Payment' }, { title: 'Done' }]
</script>

<template>
  <div class="flex flex-col gap-8">
    <PSteps v-model="current" size="sm" :options="options" />
    <PSteps v-model="current" size="md" :options="options" />
    <PSteps v-model="current" size="lg" :options="options" />
  </div>
</template>

Disabled

Set disabled on an option to make it unclickable.

1
Cart
2
Payment
3
Done
<script setup>
import { ref } from 'vue'

const current = ref(0)

const options = [
  { title: 'Cart' },
  { disabled: true, title: 'Payment' },
  { disabled: true, title: 'Done' },
]
</script>

<template>
  <PSteps v-model="current" clickable :options="options" />
</template>

Custom step

The item slot replaces the default indicator and labels. It receives the option, its index and the resolved status.

Cart(finish)
2
Payment(process)
3
Done(wait)
<script setup>
import { ref } from 'vue'

const current = ref(1)

const options = [{ title: 'Cart' }, { title: 'Payment' }, { title: 'Done' }]
</script>

<template>
  <PSteps v-model="current" clickable :options="options">
    <template #item="{ item, status }">
      <strong>{{ item.title }}</strong>
      <span class="text-gray-600">({{ status }})</span>
    </template>
  </PSteps>
</template>

Props

NameTypeDefaultDescription
model-valuenumber-Index of the current step, starting from 0.
default-valuenumber0Step selected before the consumer binds v-model.
direction'horizontal' | 'vertical''horizontal'Layout direction of steps.
status'process' | 'finish' | 'error' | 'wait''process'Status of the current step.
size'sm' | 'md' | 'lg'configProvider.sizeSize of indicators and text.
clickablebooleanfalseAllow switching steps by clicking.
optionsStepsOption[][]Steps to render; each entry is { title?, description?, status?, disabled? }.

Events

NameTypeDescription
change(value: number) => voidEmitted when the current step changes.
update:modelValue(value: number) => voidEmitted together with change.

Slots

NameScopeDescription
item{ item, index, status }Replaces the indicator and labels of a step.

Source

Source