@twoavy/tutorial-overlay
v0.0.7
Published
Fullscreen overlay with cutout for tutorial purposes
Downloads
3
Keywords
Readme
tutorial-overlay
Vue plugin to highlight UI elements through a fullscreen overlay for tutorial purposes
Installation
yarn add @twoavy/tutorial-overlay
import Tutorial from '@twoavy/tutorial-overlay'
Vue.use(Tutorial, {
bgOpacity: 0.8,
borderRadius: 30,
btnClass: 'btn',
messageClass: 'message',
disableBackBtn: false,
preferredLabelPos: 'right',
labelOffset: 30,
nextBtnText: 'next',
prevBtnText: 'previous',
hideButtons: false,
clickEveryWhere: false
})
Usage
this.$tutorial.add([
{ el: this.$refs.lorem, message: 'Lorem ipsum dolor sit amet, consetetur sadipscing elitr.' },
{ el: this.$refs.ipsum, message: 'Ipsum' },
{ el: this.$refs.dolor, message: 'Babel' }
]).then(() => {
console.log('tutorial finished')
}).catch(e => {
// input array is invalid
console.log(e.message)
})
this.$tutorial.destroy()