@twoavy/tutorial-overlay

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()