Progress Steps
Progress Steps is a navigation component that helps users track their progress through a multi-step process or workflow. It provides visual feedback about the current state, completed steps, and remaining steps.
Basic Usage
The basic progress steps component displays steps in a horizontal layout.
Account Setup
[Complete]<br/>Start your journey by creating a new account or signing into an existing one.
Email Verification
[Complete] Verify your email address by clicking the link sent to your inbox to ensure security.
3
Profile Completion
[In Progress] Complete your profile by providing necessary details such as your name, address, and preferences.
Settings Selection
[Warning] Choose your notification and communication preferences to customize your experience.
Connect Services
[Error] Link your account to relevant services or integrations to unlock more features.
6
Review Terms
[Pending] Carefully read and agree to the terms and conditions to proceed.
<template>
<HLProgressSteps :steps="steps" />
</template>
<script setup lang="ts">
import { HLProgressSteps } from '@platform-ui/highrise'
const steps = [
{
title: 'Account Setup',
subtitle: '[Complete] Start your journey by creating a new account or signing into an existing one.',
status: 'complete',
},
{
title: 'Email Verification',
subtitle: '[Complete] Verify your email address by clicking the link sent to your inbox to ensure security.',
status: 'complete',
},
{
title: 'Profile Completion',
subtitle: '[In Progress] Complete your profile by providing necessary details such as your name, address, and preferences.',
status: 'current',
},
{
title: 'Settings Selection',
subtitle: '[Warning] Choose your notification and communication preferences to customize your experience.',
status: 'warning',
},
{
title: 'Connect Services',
subtitle: '[Error] Link your account to relevant services or integrations to unlock more features.',
status: 'error',
},
{
title: 'Review Terms',
subtitle: '[Pending] Carefully read and agree to the terms and conditions to proceed.',
},
]
</script>Vertical Layout
Account Setup
[Complete]<br/>Start your journey by creating a new account or signing into an existing one.
Email Verification
[Complete] Verify your email address by clicking the link sent to your inbox to ensure security.
3
Profile Completion
[In Progress] Complete your profile by providing necessary details such as your name, address, and preferences.
Settings Selection
[Warning] Choose your notification and communication preferences to customize your experience.
Connect Services
[Error] Link your account to relevant services or integrations to unlock more features.
6
Review Terms
[Pending] Carefully read and agree to the terms and conditions to proceed.
<HLProgressSteps :steps="steps" vertical />const steps = [
{
title: 'Account Setup',
subtitle: '[Complete] Start your journey by creating a new account or signing into an existing one.',
status: 'complete',
},
{
title: 'Email Verification',
subtitle: '[Complete] Verify your email address by clicking the link sent to your inbox to ensure security.',
status: 'complete',
},
{
title: 'Profile Completion',
subtitle: '[In Progress] Complete your profile by providing necessary details such as your name, address, and preferences.',
status: 'current',
},
{
title: 'Settings Selection',
subtitle: '[Warning] Choose your notification and communication preferences to customize your experience.',
status: 'warning',
},
{
title: 'Connect Services',
subtitle: '[Error] Link your account to relevant services or integrations to unlock more features.',
status: 'error',
},
{
title: 'Review Terms',
subtitle: '[Pending] Carefully read and agree to the terms and conditions to proceed.',
},
]Clickable Steps
You can make steps clickable and handle navigation between steps. The component emits an update:step event when a step is clicked. Add the className prop with value 'clickable-step' to show the pointer cursor on hover.
Account Setup
[Complete]<br/>Start your journey by creating a new account or signing into an existing one.
Email Verification
[Complete] Verify your email address by clicking the link sent to your inbox to ensure security.
3
Profile Completion
[In Progress] Complete your profile by providing necessary details such as your name, address, and preferences.
4
Settings Selection
[Warning] Choose your notification and communication preferences to customize your experience.
5
Connect Services
[Error] Link your account to relevant services or integrations to unlock more features.
6
Review Terms
[Pending] Carefully read and agree to the terms and conditions to proceed.
<template>
<HLProgressSteps :steps="clickableSteps" @update:step="handleStepClick" />
</template>
<style>
.clickable-step {
cursor: pointer;
}
.clickable-step:hover {
opacity: 0.9;
}
</style>const currentStep = ref(2)
const clickableSteps = computed(() =>
steps.map((step, index) => ({
...step,
status: index === currentStep.value ? 'current' : index < currentStep.value ? 'complete' : 'default',
className: 'clickable-step',
}))
)
const handleStepClick = index => {
currentStep.value = index
}Props
| Name | Type | Default | Description |
|---|---|---|---|
| id * | string | undefined | undefined | The id of the element |
| steps * | HLProgressStepProps[] | undefined | Array of step objects defining the workflow |
| vertical | boolean | false | Whether to display steps in vertical layout |
| className | string | undefined | undefined | Additional CSS class names |
Types
HLProgressStepProps
export type HLProgressStepProps = {
id?: string
className?: string
count?: number
last?: boolean
popoverProps?: boolean | PopoverProps
renderIcon?: () => VNodeChild | undefined
subtitle?: string
status?: StepStatus
vertical?: boolean
title: string
}Emits
| Name | Parameters | Description |
|---|---|---|
@update:step | (index: number) | Emitted when a step is clicked |