Skip to content
On this page

Progress Indicator

Sub-component for Carousel

Usage

Simple Usage

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

Number of Dots

preview
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.

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

Binding v-model

You can binding current active with v-model

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

Active :

API

Props

PropsTypeDefaultDescription
directionStringhorizontalIndicator direction, valid values is horizontal, vertical
lengthNumber6Number of dots
modelValueNumber1v-model value

Slots

NameDescription
There no slots here

Events

NameArgumentsDescription
changeStringEvent when value changed

Released under the MIT License.