doggy-ui-v3

Appearance

On this page

Progress ​

Type ​

<script setup lang="ts">
import { DuProgress } from 'doggy-ui-v3'
</script>

<template>
  <du-progress type="primary" :progress="40" style="margin-bottom: 0.5em" />
  <du-progress type="warning" :progress="60" style="margin-bottom: 0.5em" />
  <du-progress type="error" :progress="80" />
</template>

Indicator ​

-80-
<script setup lang="ts">
import { DuProgress } from 'doggy-ui-v3'

const indicatorFormatter = (progress: number) => `-${progress}-`
</script>

<template>
  <du-progress :progress="40" style="margin-bottom: 0.5em" />
  <du-progress :progress="80" indicator :indicator-formatter="indicatorFormatter" />
</template>

API ​

Props ​

NameDescriptionTypeDefault
typeprogress type'primary' | 'warning' | 'error''primary'
progresspercentage of progressnumber0
indicatorshow indicatorbooleanfalse
indicatorFormattercustomize indicator text(progress: number): string-