Skip to content
On this page

Progress

Sub-component for Wizard and Timeline.

Usage

Simple Usage

Step 1
Step 2
Step 3
Step 4
Step 5
preview
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
preview
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
preview
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
preview
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
preview
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
preview
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>

PropsTypeDefaultDescription
variantStringdotProgress point variant, valid value is dot, counter
titleVariantStringspecificProgress title variant, valid value is specific, general
verticalBooleanfalseVertical mode

Slots <p-progress>

NameDescription
defaultContent to place progress item

Events <p-progress>

NameArgumentsDescription
There no event here

Props <p-progress-item>

PropsTypeDefaultDescription
titleString-Progress Item title
activeBooleanfalseProgress Item active state

Slots <p-progress-item>

NameDescription
titleContent to use as title
iconContent to place as progress point icon

Events <p-progress-item>

NameArgumentsDescription
There no event here

See Also

Released under the MIT License.