Progress Indicator

Sub-component for Carousel

Usage

Simple Usage

preview

<template>
  <p-progress-indicator />
</template>

Number of Dots

preview

<template>
  <p-progress-indicator length="3" />
  <p-progress-indicator length="5" />
  <p-progress-indicator length="7" />
</template>

Vertical Mode

Set prop direction to vertical to enable Vertical Mode.

preview

<template>
  <p-progress-indicator direction="vertical" />
</template>

Binding v-model

You can binding current active with v-model

preview

<template>
  <p-progress-indicator v-model="active" />
</template>

Active :

API

Props

Props	Type	Default	Description
direction	String	horizontal	Indicator direction, valid values is horizontal, vertical
length	Number	6	Number of dots
modelValue	Number	1	v-model value

Slots

Name	Description
There no slots here

Events

Name	Arguments	Description
change	String	Event when value changed

See Also

• Carousel