vue-cobra

A Vuejs component that indicates the position of the scroll as the user reads the page.

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

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

@phfontess @fvonellerts

Acknowledgement

Diogo Moretti - React Snakke

License

MIT © Firmino Changani