TourPopover

The step card used by Tour, usable standalone for custom onboarding.

Jump to API reference

Import

Vue
import { UiTourPopover } from '@ziyarago/ui/vue'

Middle step

Room calendar
Drag across dates to block rooms.
2 / 4
Vue
<UiTourPopover
  title="Room calendar"
  text="Drag across dates to block rooms."
  step="2 / 4"
 />

Last step

All set
You can restart the tour in Settings.
4 / 4
Vue
<UiTourPopover
  title="All set"
  text="You can restart the tour in Settings."
  step="4 / 4"
  last
 />

API reference

Step card of a tour with title, text, step counter and Back/Next buttons; used by Tour and usable standalone.

Props

PropType and valuesDefaultDescription
titlestring—Step heading.
textstring—Step body text.
stepstring—Counter text such as "2 / 5".
lastbooleanfalseChanges the Next button label to "Finish".

Events

Vue: @name. React: onName.

backBack button; the button is rendered only when this handler is set.
nextNext or Finish button.
closeClose icon.