Custom Scroller
A customizable Vue scroller component
π π¦
WARNING: custom-scroller is at pre-alpha stage of development and may undergo significant changes.
Feel free to submit issues and feature requests here.
Table of Contents
Installation
npm i @vuetility/vue-custom-scroller
or if you prefer yarn
yarn add @vuetility/vue-custom-scroller
Usage
Global
You may install Custom Scroller globally:
import Vue from 'vue';
import VueCustomScroller from '@vuetility/vue-custom-scroller';
Vue.use(VueCustomScroller);
This will make <custom-scroller> available to all components within your Vue app.
Local
Include the custom scroller directly into your component using import:
<script>
import { CustomScroller } from '@vuetility/vue-custom-scroller';
export default {
...
components: {
CustomScroller
}
...
};
</script>
<template>
...
<scrollable-element ref="targetEl"></scrollable-element> /* some scrollable element(component) */
<custom-scroller targetElement="targetEl"/>
...
</template>
Props
Property | Type | Required | Default | Description |
---|---|---|---|---|
targetElement | String | true | ref of the element to scroll, it can be an HTMLElement or a VueComponent | |
onlyShowIfOverflowing | Boolean | false | true | Only show scroller if the target element overflows |
customClass | String | false | class name to override the scroller styles(find the default styles attached below) |
Default styles
.v-vuetility__vue-custom-scroller {
width: 200px;
outline: none;
-webkit-appearance: none;
background: #EBEBEB;
border-radius: 4px;
cursor: pointer;
}
.v-vuetility__vue-custom-scroller::-webkit-slider-thumb {
-webkit-appearance: none;
border: 1px solid #233242;
height: 5px;
width: var(--slider-thumb-width);
cursor: pointer;
background: #233242;
border-radius: 4px;
box-shadow: 1px 1px 1px #233242, 0 0 1px #233242;
}
Default styles can be overridden by passing the custom class name as a prop, like this:
<template>
...
<custom-scroller
targetElement="targetEl"
customClass="custom-class"
onlyShowIfOverflowing
step="0.7"
></custom-scroller>
...
</template>
<style lang="scss">
.custom-class {
/*...styles here...*/
}
.custom-class::-webkit-slider-thumb {
/*...styles here...*/
}
</style>
Demo
Click here to see the component in action.
Development
To begin development, run:
npm install
npm run serve
then navigate to http://localhost:8080/