The virtual responsive crossbrowser scrollbar component for VueJS 2

VBar

The virtual responsive crossbrowser scrollbar component for VueJS 2x

Live Demo

https://luiguild.github.io/v-bar/

Usage

Install

Using NPM

npm i v-bar

Using yarn

yarn add v-bar

In your .vue component create a class to your wrapper

Using SASS

<style lang="sass">
    .wrapper
        height: 300px
        width: 300px
</style>

Simple CSS

<style>
    .wrapper {
        height: 300px;
        width: 300px;
    }
</style>

Include the component in your template

Using Pug

<template lang="pug">
    v-bar(wrapper="wrapper",
        vBar="",
        vBarInternal="",
        hBar="",
        hBarInternal="")
        //- your content
</template>

Using Simple HTML

<template>
    <v-bar wrapper="wrapper"
        vBar=""
        vBarInternal=""
        hBar=""
        hBarInternal="">
        <!-- your content -->
    </v-bar>
</template>

Import component

<script>
    import VBar from 'v-bar'

    # Declare
    export default {
        components: { VBar }
    }
</script>

Options

VBar is fully customizable. You can use your CSS classes to make it even more beautiful :)

*required* wrapper=""
*optional* vBar=""
*optional* vBarInternal=""
*optional* hBar=""
*optional* hBarInternal=""

To contribute and make it better

Clone the repo, change what you want and send PR

Contributions are always welcome!

Build Setup

# install dependencies
# using NPM
npm install

# using yarn
yarn

# serve with hot reload at localhost:8080
npm run dev

# build for production with minification
npm run build

# build for production and view the bundle analyzer report
npm run build --report

GitHub