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.|