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