vue-section-scroller
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
Dependencies
@babel/core: ^7.12.10@babel/preset-env: ^7.12.11@babel/preset-typescript: ^7.12.7@rollup/plugin-alias: ^3.1.1@rollup/plugin-babel: ^5.2.2@rollup/plugin-commonjs: ^17.0.0@rollup/plugin-node-resolve: ^11.0.1@rollup/plugin-replace: ^2.3.4@vue/cli-plugin-babel: ^4.5.10@vue/cli-plugin-typescript: ^4.5.10@vue/cli-service: ^4.5.13@vue/compiler-sfc: ^3.1.2cross-env: ^7.0.3gsap: ^3.7.0minimist: ^1.2.5node-sass: ^6.0.0postcss: ^8.2.3rollup: ^2.36.1rollup-plugin-postcss: ^4.0.0rollup-plugin-scss: ^2.6.1rollup-plugin-terser: ^7.0.2rollup-plugin-vue: ^6.0.0sass: ^1.35.1sass-loader: ^10.2.0typescript: ^3.8.3vue: ^3.1.2