CorpGlory / vue-progress-list

vue-progress-list

Quick start

1. Install using npm: npm install CorpGlory/vue-progress-list
2. Import the component: import VueProgressList from 'vue-progress-list';
3. Import styles in main project file (src/main.js / src/main.ts): import 'vue-progress-list/dist/vue-progress-list.css';
4. Register the component globally or in a separate component

Usage example

<template>
  <vue-progress-list
    :items="[
      { title: 'Foo', value: 20, backgroundColor: 'green' }, 
      { title: 'Bar', value: 80, backgroundColor: 'red' }
    ]"
    :config="{ maxValue: 100 }"
  />
</template>
...

Result:

Props

• items — (required) array of configs for each progress bar, e.g:

:items=[
  { title: 'Foo', value: 1, backgroundColor: 'green' },
  { title: 'Bar', value: 100, backgroundColor: 'red' }
]

• config — (required) progress-list config, e.g:

:config={ maxValue: 100 }

• maxValue - (optional) maximum of item`s value, e.g:

:maxValue=100

• opacity - (optional) css stype for progress bars, e.g:

:opacity=0.5

• stops - (optional) config with stop values and colors, eg:

:stops={
  values: {
    upperValue: 60,
    lowerValue: 20
  },
  colors: {
    high: 'red',
    medium: 'yellow',
    low: 'green'
  }
}

Result:

• valueFormat - (optional) format of item`s values, 'persentage' or 'absolute', eg:

:valueFormat='absolute'

Development

Project setup

npm install

Compiles and hot-reloads for development

npm run serve

Compiles and minifies for production

npm run build

Customize configuration

See Configuration Reference.