PageBookingFlow Pro

Part of Pro. Versions up to 0.10 of the open source package include it under MIT; later releases keep it in Pro.

Booking flow page. Slots: steps, content, nav, summary.

Jump to API reference

Import

Vue
import { UiPageBookingFlow } from '@ziyarago/ui-pro/vue'

Default

Booking flow

Section

Steps slot
Active step slot
Navigation slot
Summary slot
Vue
<UiPageBookingFlow title="Booking flow" subtitle="Section">
  <template #steps>Steps slot</template>
  <template #content>Active step slot</template>
  <template #nav>Navigation slot</template>
  <template #summary>Summary slot</template>
</UiPageBookingFlow>

API reference

Booking flow template: stepper, the active step content, back and continue buttons and a sticky summary card.

Props

PropType and valuesDefaultDescription
titlestring—Page heading. The built-in header renders only when title is set and the header slot is empty.
subtitlestring—Caption under the heading.
crumbs{ label: string; href?: string }[]—Breadcrumb trail above the title.

Slots

Vue: named slots. React: a prop with the same name; default is children.

headerCustom page header; replaces the built-in title/subtitle/crumbs header.
actionsButtons on the right of the built-in header. With a title they sit beside it; without a title they render alone, right-aligned (unless the header slot is filled).
stepsProgress; Stepper.
contentContent of the active step (search, pick, guests, confirm); Card, DatePicker, OptionCards, NumberInput.
navBack and Continue buttons.
summaryBooking summary; Card, Descriptions.

Notes

  • Place inside AppShell; fill only the slots you need.
  • Render only the active step in content. The summary stays visible on the right and goes below the step under 860 px.