Nearsighted Penguin March

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

    1.0.14 • Public • Published

    vue-section-scroller

    Vue.js component for switching sections with scrolling and swiping (for mobile). Made with Vue 3, Composition API and TypeScript.

    Getting started

    Installation

    npm install vue-section-scroller -D
    
    # or
    
    yarn add vue-section-scroller -D

    Then, import and register the component:

    import VueSectionScroller from "vue-section-scroller";

    You need also to import the styles separately:

    import "vue-section-scroller/dist/vue-section-scroller.css"

    Finally, add to your component:

    ...
    components: {
      VueSectionScroller,
      // Other components
    }
    ...

    Usage

    First, create the array of sections in your component. If you are using TypeScript, Section type is included in the library:

    /* Vue 3 + TypeScript */
    import Section from 'vue-section-scroller/src/types/Section';
      // Component creation etc...
      setup() {
          const sections: Section[] = [
            {
              id: 1, // Unique identifier
              label: "Component label", // Label displayed in the aside
              component: SomeComponent, // Component displayed in the section
              props: { // Component props, should be an object with key - value pairs.
              },
            },
            // rest of the sections
          ];
    
          // other code
    
          return {
            sections,
            // other returns
          };
      }
    
    // ---------------------------------------------------------------------------------------
    
    /* Vue 2 */
    export default {
      data: () => ({
        sections: [
          {
            id: 1, // Unique identifier
            label: "Component label", // Label displayed in the aside
            component: SomeComponent, // Component displayed in the section
            props: { // Component props, should be an object with key - value pairs.
            },
          },
          // rest of the sections
        ]
      })
    }
    <vue-section-scroller :sections="sections"></vue-section-scroller>

    Props

    Prop Type Default Description
    sections Section[] [] Array of component's sections.
    asideLeft Boolean false Show aside on the left.
    asideLabels Boolean false Show aside labels.
    dots Boolean true Show aside dots. If customPrefix is enabled, it overrides the dots.
    customPrefix Boolean false Show custom aside prefixes. Overrides the dots.
    baseColor String "#323330" Color of inactive dots and labels.
    activeColor String "#323330" Color of active dots and labels.
    showChevrons Boolean true Show chevrons at the top and bottom of the component.

    Live Demo

    https://codesandbox.io/s/vue-section-scroller-demo-tsyzd

    Credits

    Thanks to vue-sfc-rollup for the SFC template ready to publish. I wish I had known this before.

    License

    MIT License

    Install

    npm i vue-section-scroller

    DownloadsWeekly Downloads

    2

    Version

    1.0.14

    License

    MIT

    Unpacked Size

    512 kB

    Total Files

    10

    Last publish

    Collaborators

    • sikorawojciech