PersonaProgress
Sub-component for Wizard and Timeline.
Usage
Simple Usage
Step 1
Step 2
Step 3
Step 4
Step 5
vue
<template>
<p-progress>
<p-progress-item title="Step 1" />
<p-progress-item title="Step 2" active />
<p-progress-item title="Step 3" />
<p-progress-item title="Step 4" />
<p-progress-item title="Step 5" />
</p-progress>
</template>Multiple Active
Step 1
Step 2
Step 3
Step 4
Step 5
vue
<template>
<p-progress>
<p-progress-item title="Step 1" active />
<p-progress-item title="Step 2" active />
<p-progress-item title="Step 3" active />
<p-progress-item title="Step 4" />
<p-progress-item title="Step 5" />
</p-progress>
</template>Variants
There are 2 variants, dot and counter, default is dot
Step 1
Step 2
Step 3
Step 4
Step 1
Step 2
Step 3
Step 4
vue
<template>
<p-progress variant="dot">
<p-progress-item title="Step 1" />
<p-progress-item title="Step 2" />
<p-progress-item title="Step 3" />
<p-progress-item title="Step 4" />
</p-progress>
<p-progress variant="counter">
<p-progress-item title="Step 1" />
<p-progress-item title="Step 2" />
<p-progress-item title="Step 3" />
<p-progress-item title="Step 4" />
</p-progress>
</template>Title Variants
There are 2 label's variants, specific and general, default is specific
Step 1
Step 2
Step 3
Step 4
Step 1
Step 2
Step 3
Step 4
Step 2
vue
<template>
<p-progress title-variant="specific">
<p-progress-item title="Step 1" active />
<p-progress-item title="Step 2" active />
<p-progress-item title="Step 3" />
<p-progress-item title="Step 4" />
</p-progress>
<p-progress title-variant="general">
<p-progress-item title="Step 1" active />
<p-progress-item title="Step 2" active />
<p-progress-item title="Step 3" />
<p-progress-item title="Step 4" />
</p-progress>
</template>Custom Icon
You can customize progress point with icon with slot icon.
Step 1
Step 2
Step 3
Step 4
vue
<template>
<p-progress variant="dot">
<p-progress-item title="Step 1" />
<p-progress-item title="Step 2" active>
<template #icon>
<IconDocument />
</template>
</p-progress-item>
<p-progress-item title="Step 3" />
<p-progress-item title="Step 4" />
</p-progress>
</template>
<script setup>
import IconDocument from '@privyid/persona-icon/vue/document-filled/20.vue'
</script>Vertical Mode
Step 1
Step 2
Step 3
Step 4
vue
<template>
<p-progress vertical>
<p-progress-item title="Step 1" active />
<p-progress-item title="Step 2" active />
<p-progress-item title="Step 3" />
<p-progress-item title="Step 4" />
</p-progress>
</template>Variables
Progress use local CSS variables on .progress for enhanced real-time customization.
sass
--p-bg-bar-active-state: theme(backgroundColor.info.emphasis);
--p-bg-bar-normal-state: theme(backgroundColor.subtle.DEFAULT);
--p-bg-dark-bar-active-state: theme(backgroundColor.dark.info.emphasis);
--p-bg-dark-bar-normal-state: theme(backgroundColor.dark.subtle.DEFAULT);API
Props <p-progress>
| Props | Type | Default | Description |
|---|---|---|---|
variant | String | dot | Progress point variant, valid value is dot, counter |
titleVariant | String | specific | Progress title variant, valid value is specific, general |
vertical | Boolean | false | Vertical mode |
Slots <p-progress>
| Name | Description |
|---|---|
default | Content to place progress item |
Events <p-progress>
| Name | Arguments | Description |
|---|---|---|
| There no event here | ||
Props <p-progress-item>
| Props | Type | Default | Description |
|---|---|---|---|
title | String | - | Progress Item title |
active | Boolean | false | Progress Item active state |
Slots <p-progress-item>
| Name | Description |
|---|---|
title | Content to use as title |
icon | Content to place as progress point icon |
Events <p-progress-item>
| Name | Arguments | Description |
|---|---|---|
| There no event here | ||