1.0.1 • Published 5 years ago

vue-skill-bar v1.0.1

Weekly downloads
30
License
MIT
Repository
github
Last release
5 years ago

vue-skill-bar

a ligthweight progress skill bar for vue

Install

npm install --save-dev vue-skill-bar

Usage

ES6

import Vue from 'vue'
import { SkillBar } from 'vue-skill-bar'

Vue.component('skill-bar', SkillBar)

or

<template>
	<div id="app">
		<skill-bar barSize="small" skill="CSS" level="90" />
	</div>
</template>
<script>
import { SkillBar } from 'vue-skill-bar'
export default {
	components: {
		'skill-bar': SkillBar
	},
	data: function() {
		return { 
			... 
		}
	}
}
</script>

Examples

Custom bar size

<skill-bar barSize="large" skill="CSS" level="80" />

Custom bar color

<skill-bar barSize="large" barColor="#0e7a0d" skill="CSS" level="80" />

Available Options

PropsTypeValuesdefault
skillStringtext to display
levelNumber0 - 1000
maxLevelNumber100100
barSizeNumber | Stringsmall, medium, large32
barColorStringColor#2196f3
bgColorStringColor#eee
fontColorStringColor#f1f1f1

##License

vue-skill-bar is an open source and release under the MIT License.

Copyright (C) 2019 Lisandro A. Bitoy.

1.0.1

5 years ago

0.1.6

5 years ago

0.1.5

5 years ago

0.1.4

5 years ago

0.1.3

5 years ago

0.1.2

5 years ago

0.1.1

5 years ago

0.1.0

5 years ago