- Notifications
You must be signed in to change notification settings - Fork13
🔆 Vue coverflow component(vue)
License
NotificationsYou must be signed in to change notification settings
OrangeXC/vue-coverflow
Folders and files
| Name | Name | Last commit message | Last commit date | |
|---|---|---|---|---|
Repository files navigation
vue-coverflow is a vue2 component to simulate the Apple Cover Flow UI effect, without dependency.
npm i vue-coverflow# oryarn add vue-coverflow// Use in componentimportcoverflowfrom'vue-coverflow'exportdefault{components:{ coverflow}}// Use in globalimportcoverflowfrom'vue-coverflow'Vue.component(coverflow.name,coverflow)// orVue.use(coverflow)
<coverflow[options]></coverflow>
You can set them to your data function
| Attribute | Type | Description | Example |
|---|---|---|---|
| coverList | Array | Each object contains two elements, cover is image's url, title will be showed on the bottom of cover(required: true) | [{ cover: '', title: ''}] |
| width | Number | width of coverflow(default: 980) | |
| bgColor | String | background color(default: 'transparent') | |
| index | Number | which cover checked(default: 0) | |
| coverWidth | Number | width of each cover(default: 100) | |
| coverHeight | Number | height of highest cover(default: coverWidth) | |
| coverSpace | Number | spaceing between two cover(default: 50) | |
| coverShadow | Boolean | reflection effect, total height will be changed to two times (default: false) | |
| coverFalt | Boolean | disable 3D rotation(default: false) |
| Event Name | description | Parameters |
|---|---|---|
| change | triggers when the selected cover changes | the index of the curent cover |
$ git clone https://github.com/OrangeXC/vue-coverflow.git$cd vue-coverflow$ yarn$ yarn serveVue-coverflow isMIT licensed.
About
🔆 Vue coverflow component(vue)
Topics
Resources
License
Stars
Watchers
Forks
Packages0
No packages published