https://github.com/wojtekthewebdev/vue-section-scroller
Vue.js component for switching sections with scrolling and swiping (on mobile). Built with Vue 3, Composition API and TypeScript.
https://github.com/wojtekthewebdev/vue-section-scroller
Last synced: over 1 year ago
JSON representation
Vue.js component for switching sections with scrolling and swiping (on mobile). Built with Vue 3, Composition API and TypeScript.
- Host: GitHub
- URL: https://github.com/wojtekthewebdev/vue-section-scroller
- Owner: WojtekTheWebDev
- License: mit
- Created: 2021-06-21T21:31:02.000Z (about 5 years ago)
- Default Branch: master
- Last Pushed: 2021-08-05T08:13:45.000Z (almost 5 years ago)
- Last Synced: 2025-01-23T12:46:43.156Z (over 1 year ago)
- Language: Vue
- Size: 159 KB
- Stars: 1
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# 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
```bash
npm install vue-section-scroller -D
# or
yarn add vue-section-scroller -D
```
Then, import and register the component:
```js
import VueSectionScroller from "vue-section-scroller";
```
You need also to import the styles separately:
```js
import "vue-section-scroller/dist/vue-section-scroller.css"
```
Finally, add to your component:
```js
...
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:
```js
/* 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
};
}
```
```html
```
### 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](https://github.com/team-innovation/vue-sfc-rollup) for the SFC template ready to publish. I wish I had known this before.
## License
[MIT License](https://github.com/SikoraWojciech/vue-section-scroller/blob/master/LICENSE)