1.0.14 • Published 4 years ago
heaper v1.0.14
heaper
Vue.js carousel component of mobile mode
npm run heaper
simple to use
<template>
<Heaper>
<div v-for="(d, di) in data" :key="di" :style="{backgroundColor: d.bgc}">
{{d.name}}
</div>
</Heaper>
</template>
<script>
import { Heaper } from 'heaper'
import 'heaper/dist/heaper.css';
export default {
name: 'App',
components: {
heaper
},
data() {
return {
data: [
{ name: 'recommend', bgc: '#E35F75' },
{ name: 'perfect', bgc: '#A5DCE4' },
{ name: 'reuseable', bgc: '#C9A2D2' },
{ name: 'easy', bgc: '#46A46C' },
{ name: 'fast', bgc: '#F4A15D' },
]
}
}
}
</script>
add nav addons
<template>
<heaper :navs="data">
<heaper-navigation slot="heaper-addons"></heaper-navigation>
<div v-for="(d, di) in data" :key="di" :style="{backgroundColor: d.bgc}">
{{d.name}}
</div>
</heaper>
</template>
<script>
import { Heaper, Navigation as HeaperNavigation } from 'heaper'
import 'heaper/dist/heaper.css';
export default {
name: 'App',
components: {
Heaper,
HeaperNavigation
},
data() {
return {
data: [
{ name: 'recommend', bgc: '#E35F75' },
{ name: 'perfect', bgc: '#A5DCE4' },
{ name: 'reuseable', bgc: '#C9A2D2' },
{ name: 'easy', bgc: '#46A46C' },
{ name: 'fast', bgc: '#F4A15D' },
]
}
}
}
</script>
Available Props
Prop | Default | Description |
---|---|---|
navs | [] | setting navs control. |
enableHeaper | true | enable heaper or not. |