vue-cobra .Reading position indicator for Vuejs
npm install vue-cobra --save
yarn add install vue-cobra
<template>
<div>
<vue-cobra />
</div>
</template>
<script>
import vueCobra from "vue-cobra";
export default {
name: "Demo",
components: {
vueCobra
}
}
</script>
<template>
<div>
<vue-cobra
:height="10"
:zIndex="900"
color="#4fc08d"
:opacity="0.5"
position="left"
/>
</div>
</template>
<script>
import vueCobra from "vue-cobra";
export default {
name: "Demo",
components: {
vueCobra
}
}
</script>
import Vue from "vue";
import vueCobra from "vue-cobra";
Vue.component("vue-cobra", vueCobra);
Prop | Type | Default value | Required | Description |
---|---|---|---|---|
color | String | #000 | false | Set progress bar background color |
height | Number | 4 | false | Set height of progress bar |
opacity | Number | 1 | false | Set opacity from 0 to 1 |
position | String | top | false | Define in which position the bar will be rendered. Accepts: top , bottom and left |
zIndex | String | 1000 | false | Set value based on css z-index property |
When position
property is set, height
value is used to define the tickness of the bar. This was a quick approach to ensure backward compatibility. Feel free to send a PR.
Author: flowck
Live Demo: http://vue-cobra.surge.sh/
GitHub: https://github.com/flowck/vue-cobra
#vuejs #javascript #vue-js