Reading Position Indicator for Vuejs

vue-cobra .Reading position indicator for Vuejs

Install

npm

npm install vue-cobra --save

yarn

yarn add install vue-cobra

Usage

Default

<template>
  <div>
    <vue-cobra />
  </div>
</template>

<script>
import vueCobra from "vue-cobra";
export default {
  name: "Demo",
  components: {
    vueCobra
  }
}
</script>

With custom properties

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

Register it globally

import Vue from "vue";
import vueCobra from "vue-cobra";

Vue.component("vue-cobra", vueCobra);

Options / Props

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.

Contributors

Pedro Henrique Silva Fontes

Acknowledgement

Diogo Moretti - React Snakke

Download Details:

Author: flowck

Live Demo: http://vue-cobra.surge.sh/

GitHub: https://github.com/flowck/vue-cobra

#vuejs #javascript #vue-js