PersonaProgress Indicator
Sub-component for Carousel
Usage
Simple Usage
vue
<template>
<p-progress-indicator />
</template>Number of Dots
vue
<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.
vue
<template>
<p-progress-indicator direction="vertical" />
</template>Binding v-model
You can binding current active with v-model
vue
<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 |