All Projects → luiguild → V Bar

luiguild / V Bar

Licence: mit
The virtual responsive crossbrowser scrollbar component for VueJS 2x

Programming Languages

javascript
184084 projects - #8 most used programming language

Projects that are alternatives of or similar to V Bar

Vue Share Buttons
🔗A set of social buttons for Vue.js
Stars: ✭ 34 (-84.26%)
Mutual labels:  component, vue-components, vuejs2, vue2
Tui
This is a high quanlity components library for VUE
Stars: ✭ 258 (+19.44%)
Mutual labels:  vue-components, sass, vuejs2, vue2
Vue Form Json Schema
Create forms using JSON schema. Bring your components!
Stars: ✭ 253 (+17.13%)
Mutual labels:  component, vue-components, vuejs2, vue2
Vuesax
New Framework Components for Vue.js 2
Stars: ✭ 5,293 (+2350.46%)
Mutual labels:  component, vue-components, vuejs2, vue2
Pd Select
vue components ,like ios 3D picker style,vue 3d 选择器组件,3D滚轮
Stars: ✭ 101 (-53.24%)
Mutual labels:  vue-components, scroll, scrolling, vuejs2
Vuebar
(🗃️ Archived) Vue 2 directive for custom scrollbar that uses native scroll behavior. Lightweight, performant, customizable and without dependencies. Used successfully in production on https://ggather.com
Stars: ✭ 650 (+200.93%)
Mutual labels:  scroll, scrollbar, vuejs2, vue2
Vue Flip
A Vue.js component to flip elements.
Stars: ✭ 37 (-82.87%)
Mutual labels:  component, vue-components, vuejs2
Vuescroll
A customizable scrollbar plugin based on vue.js for PC , mobile phone, touch screen, laptop.
Stars: ✭ 1,016 (+370.37%)
Mutual labels:  component, vue-components, scrollbar
Vuex Flash
VueJs Flash Message Component within Vuex
Stars: ✭ 54 (-75%)
Mutual labels:  vue-components, vuejs2, vue2
Vue Admin Element
(Vue2 演示项目)物业后台管理系统 - ElementUI ( 基本结构已完成, 剩下的就是具体业务开发; 如有疑问请留言 )
Stars: ✭ 73 (-66.2%)
Mutual labels:  sass, vue2, pug
Vue Quill Editor
🍡@quilljs editor component for @vuejs
Stars: ✭ 6,874 (+3082.41%)
Mutual labels:  vue-components, vuejs2, vue2
Stf Vue Select
stf vue select - most flexible and customized select
Stars: ✭ 61 (-71.76%)
Mutual labels:  component, vuejs2, vue2
Vue Particles
Vue.js component for particles backgrounds ✨
Stars: ✭ 1,220 (+464.81%)
Mutual labels:  vue-components, vuejs2, vue2
Semantic Ui Vue
Semantic UI integration for Vue
Stars: ✭ 914 (+323.15%)
Mutual labels:  vue-components, vuejs2, vue2
Vue Image Loader
Vue progressive image loader plugin like Medium
Stars: ✭ 47 (-78.24%)
Mutual labels:  vue-components, vuejs2, vue2
Fish Ui
A Vue.js 2.0 UI Toolkit for Web
Stars: ✭ 861 (+298.61%)
Mutual labels:  component, vue-components, vue2
Vue Cnode
基于vue2 + vue-router + vuet + ES6 + less + flex.css重写vue版cnode社区,使用webpack2打包
Stars: ✭ 1,134 (+425%)
Mutual labels:  vue-components, vuejs2, vue2
Vue Awesome Swiper
🏆 Swiper component for @vuejs
Stars: ✭ 12,072 (+5488.89%)
Mutual labels:  vue-components, vuejs2, vue2
Scrollprogress
🛸 Light weight library to observe the viewport scroll position
Stars: ✭ 148 (-31.48%)
Mutual labels:  component, scroll, scrollbar
Vue Info Card
Simple and beautiful card component with an elegant spark line, for VueJS.
Stars: ✭ 159 (-26.39%)
Mutual labels:  component, vue-components, vuejs2

VBar

The virtual responsive crossbrowser scrollbar component for VueJS 2x

DEMO

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

Contributors

Luigui Delyer

https://github.com/luiguild

Carlo Fragni

https://github.com/carlofragni

SoullessWaffle

https://github.com/SoullessWaffle

Robbe Clerckx

https://github.com/robbeman

antshil

https://github.com/antshil

Henrique Deodato

https://github.com/h3nr1ke

Note that the project description data, including the texts, logos, images, and/or trademarks, for each open source project belongs to its rightful owner. If you wish to add or remove any projects, please contact us at [email protected].