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

Versions

Current Tags

  • Version
    Downloads (Last 7 Days)
    • Tag
  • 1.0.14
    0
    • latest

Version History

Package Sidebar

Install

npm i vue-section-scroller

Weekly Downloads

0

Version

1.0.14

License

MIT

Unpacked Size

512 kB

Total Files

10

Last publish

Collaborators

  • sikorawojciech