https://github.com/luiguild/v-bar
The virtual responsive crossbrowser scrollbar component for VueJS 2x
https://github.com/luiguild/v-bar
component javascript pug sass scroll scrollbar scroller scrolling vbar vue vue-components vue2 vuejs vuejs-2x vuejs2
Last synced: 7 months ago
JSON representation
The virtual responsive crossbrowser scrollbar component for VueJS 2x
- Host: GitHub
- URL: https://github.com/luiguild/v-bar
- Owner: luiguild
- License: mit
- Created: 2017-03-22T17:43:38.000Z (over 8 years ago)
- Default Branch: master
- Last Pushed: 2023-02-28T12:15:07.000Z (over 2 years ago)
- Last Synced: 2025-04-02T18:53:12.181Z (7 months ago)
- Topics: component, javascript, pug, sass, scroll, scrollbar, scroller, scrolling, vbar, vue, vue-components, vue2, vuejs, vuejs-2x, vuejs2
- Language: Vue
- Homepage:
- Size: 1.13 MB
- Stars: 221
- Watchers: 8
- Forks: 28
- Open Issues: 28
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
- awesome - v-bar - 虚拟响应跨浏览器滚动条 (UI组件)
- awesome-vue - v-bar - bar?style=social) - 虚拟响应跨浏览器滚动条 (UI组件)
- awesome-github-vue - v-bar - 虚拟响应跨浏览器滚动条 (UI组件)
- awesome-github-vue - v-bar - 虚拟响应跨浏览器滚动条 (UI组件)
README
# VBar
The virtual responsive crossbrowser scrollbar component for VueJS 2x
## Usage
#### Install
###### Using NPM
``` bash
npm i v-bar
```
###### Using yarn
``` bash
yarn add v-bar
```
#### In your `.vue` component create a class to your wrapper
###### Using SASS
``` vue
.wrapper
height: 300px
width: 300px
```
###### Simple CSS
``` vue
.wrapper {
height: 300px;
width: 300px;
}
```
#### Include the component in your template
###### Using Simple HTML
``` vue
```
#### Import component
``` vue
import VBar from 'v-bar'
# Declare
export default {
components: { VBar }
}
```
#### Options
VBar is fully customizable. You can use your CSS classes to make it even more beautiful :)
``` javascript
*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
``` bash
# 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