Description:
This is the upgraded version of the horizontal-list component that helps developers generate a horizontal scroller for showcasing anything.
Features:
- SSR/SSG/SPA: all modes of rendering supported
- Mobile & responsive web friendly
- Scroll bar or customizable button navigation
- Snap to the nearest item when scrolling
- Moves the responsibilities of the CSS to the user
- Extensible for any use case with a collection of recipes
- End-to-end tested on all major browser at code merge with 240+ test cases
How to use it:
1. Import and register the component.
import VueHorizontal from 'vue-horizontal';
export default { components: {VueHorizontal} } // or Vue.use(VueHorizontal);
2. Add the <vue-horizontal>
component to the template.
<vue-horizontal> </vue-horizontal>
3. Add slides to the scroller.
<vue-horizontal> <div class="item"> <h3>Item 1</h3> <p>As you can see these are just html elements.</p> </div> <section> <h4>Item 2</h4> </section> <section> <h3>Item 3</h3> </section> <section v-for="item in items" :key="item.i"> <h3>{{ item.title }}</h3> <p>{{ item.content }}</p> </section> <section> <h3>Last Item</h3> </section> </vue-horizontal>
export default { data() { return { items: [...Array(5).keys()].map((i) => { return {i, title: `v-for: ${i}`, content: `🚀 Paragraph ${i}`}; }), } } }
4. Available component props.
button: { type: Boolean, default: () => true, }, buttonBetween: { type: Boolean, default: () => true }, scroll: { type: Boolean, default: () => false, }, responsive: { type: Boolean, default: () => false, }, /** * Move window, indicates the percent of width to travel when nav is triggered. */ displacement: { type: Number, default: () => 1.0 }, /** * Snap to start|center|end */ snap: { type: String, default: () => 'start', },
5. API methods.
// prev item $refs.horizontal.prev(); // next item $refs.horizontal.next(); // scroll to an item $refs.horizontal.scrollToIndex(index); // scroll to left $refs.horizontal.scrollToLeft(index); // refresh the scroller $refs.horizontal.refresh();
6. Events.
onPrev() { this.prev += '- clicked prev' }, onNext() { this.next += '- clicked next' } nScroll(data) { this.scroll = data }, onScrollDebounce(data) { this.scrollDebounce = data }
Preview:
Changelog:
v0.8.5 (01/12/2021)
- fix: removed margin for last child in container
v0.8.4 (01/07/2021)
- fix: prevent content from collapsing when empty
v0.8.3 (01/01/2021)
- Update
v0.8.2 (12/29/2020)
- chore: minor refactor
Download Details:
Author: fuxingloh
Live Demo: https://vue-horizontal.fuxing.dev/design/principles
Download Link: https://github.com/fuxingloh/vue-horizontal/archive/main.zip
Official Website: https://github.com/fuxingloh/vue-horizontal
Install & Download:
# Yarn
$ yarn add vue-horizontal
# NPM
$ npm i vue-horizontal