VueJs component to work with Chocolat
🐴
The component can be installed by executing
npm install --save vue-chocolat
# or yarn add vue-chocolat
Add it globally
import vueChocolat from 'vue-chocolat'
// ...
Vue.component('vue-chocolat', vueChocolat)
or locally
import vueChocolat from 'vue-chocolat'
// ...
export default {
// ...
components: {
'vue-chocolat': vueChocolat
// or even in a async way
// 'vue-chocolat': () => import('vue-chocolat')
}
}
No properties are required altough you’ll have a better control over the component when using it.
null
false
Array
undefined
false
Object
:scope > a
false
String
items
create a gallery, selector
creates a collection of clickable elements. You can’t use both of them at once.
When creating a <vue-chocolat>
component you’ll have access to its api
by adding a ref
attribute to it.
<!-- Name whatever you prefer instead of `instance` -->
<vue-chocolat ref="instance"></vue-chocolat>
someMethod() {
const { api } = this.$refs.instance
// see the reference link to full detailed information
api.open(1)
api.close()
api.next()
api.prev()
// etc
}
Examples can be found here:
Live examples can be found at Chocolat’s page.
Author: eliamartani
Demo: https://eliamartani.github.io/vue-chocolat/
Source Code: https://github.com/eliamartani/vue-chocolat
☞ Vue js Tutorial Zero to Hero || Brief Overview about Vue.js || Learn VueJS 2023 || JS Framework
☞ Learn Vue.js from scratch 2018
☞ Is Vue.js 3.0 Breaking Vue? Vue 3.0 Preview!
☞ Vue.js Tutorial: Zero to Sixty