d-tour
Tour guide plugin for Derby.js
Uses Shepherd.js
Usage
appuse require'd-tour'
dummyTour = 'first step': title: 'Hello tour!' text: ''' This is a dummy tour step ''' attachTo: 'body > *:first-child top' buttons: 'done'
view(name='tour', tour='{{dummyTour}}', autostart)
You can choose from 5 predefined buttons:
next
, back
, done
, exit
, nextSection
Autostart and Manual tour start
Providing autostart
argument tells tour to start right after component renders.
If you rather want to start tour manually just run its start()
method:
view(name='tour', as='tour', tour='{{dummyTour}}')button(on-click='tour.start()') Start guide!
Multi-page tour
You can create a tour which guides user through several pages:
- Add
nextPage
button to the tour's step you want to be the last on the current page. - Add
nextPage
argument to thetour
component call in the view and provide the url that should be loaded next - On a new page add
tour
component with the same tour andstartFrom
argument with the name of a step to start from.
Example:
multipageTour = 'home step': title: 'first step!' text: ''' I'm on first page ''' attachTo: 'body > *:first-child top' buttons: 'exit''nextPage' 'about step': title: 'second step!' text: ''' I'm on second page ''' attachTo: 'body > *:first-child top' buttons: 'back''done'
/home
page:
view(name='tour', tour='{{multipageTour}}', nextPage='/about', autostart)
/about
page:
view(name='tour', tour='{{multipageTour}}', startFrom='about step', autostart)
Emitted events
Tour emits following events:
complete
- after tour is completednextPage
- before going to the new page in multipage tour
Licence
MIT