overlayscrollbars-vue
    TypeScript icon, indicating that this package has built-in type declarations

    0.2.2 • Public • Published

    Vue OverlayScrollbars

    Vue OverlayScrollbars Downloads License

    Example   •   Documentation   •   FAQ

    The official OverlayScrollbars wrapper for Vue.

    Installation

    npm install overlayscrollbars-vue

    Peer Dependencies

    OverlayScrollbars for Vue has the following peer dependencies:

    npm install overlayscrollbars
    
    • The Vue framework: vue
    npm install vue
    

    TypeScript

    npm install @types/overlayscrollbars
    

    Since this wrapper is written in TypeScript it comes with its generated typings.
    Check out the recommended tsconfig.json options.

    Usage

    CSS

    You have to import the OverlayScrollbars.css by yourself.
    The component doesn't do it for you as the styles are global styles!
    There are different ways to achieve this, in Vue the most simple way for me was to add this line in the main file:

    import 'overlayscrollbars/css/OverlayScrollbars.css';

    Import

    With the Vue.use method you can register the wrapper globally:

    import Vue from 'vue';
    import { OverlayScrollbarsPlugin } from 'overlayscrollbars-vue';
     
    Vue.use(OverlayScrollbarsPlugin);

    In case you wanna register the Component manually via global or local registration, you can simply import it and do whatever you want with it:

    import Vue from 'vue';
    import { OverlayScrollbarsComponent } from 'overlayscrollbars-vue';
     
    // global registration
    Vue.component('overlay-scrollbars', OverlayScrollbarsComponent);
     
    // local registration
    new Vue({
      el: '#app',
      components: {
        'overlay-scrollbars': OverlayScrollbarsComponent
      }
    });

    Template

    After the registration you can use it in templates like:

    <overlay-scrollbars>
      example content
    </overlay-scrollbars>

    The default selector is overlay-scrollbars, but in case you register it manually you can choose it by yourself.

    Properties

    Two properties are accepted: options and extensions.

    • The options property accepts a object and can be changed at any point in time, and the plugin will adapt.
    • The extensions property accepts a string, string array or object and is only taken into account if the component gets mounted.
    <overlay-scrollbars 
      :options="{ scrollbars: { autoHide: 'scroll' } }" 
      :extensions="['extensionA', 'extensionB']"
    >
    </overlay-scrollbars>

    You can read more about the options object here, extensions are documented here and here.

    Instance

    If you get the component reference, it provides two methods: osInstance() and osTarget().

    • The osInstance() method returns the OverlayScrollbars instance of the component, or null if the instance isn't initialized yet or already destroyed.
    • The osTarget() method returns the native html element to which the plugin was initialized, or null if the the component isn't mounted yet or already unmounted.

    Example App

    In case you need a example app for reference, you can use the example app in this repo(example folder):

    If you wanna build the example app, run these commands:

    npm run setup
    npm run build
    npm run example

    License

    MIT

    Install

    npm i overlayscrollbars-vue

    DownloadsWeekly Downloads

    5,451

    Version

    0.2.2

    License

    MIT

    Unpacked Size

    50.7 kB

    Total Files

    16

    Last publish

    Collaborators

    • kingsora