PageItinerary Pro

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

Itinerary page. Slots: days, timeline, transport, hotel, summary.

Jump to API reference

Import

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

Default

Itinerary

Umrah, 10 days

Day tabs slot
Day timeline slot
Transport slot
Hotel slot
Trip summary slot
Vue
<UiPageItinerary title="Itinerary" subtitle="Umrah, 10 days">
  <template #days>Day tabs slot</template>
  <template #timeline>Day timeline slot</template>
  <template #transport>Transport slot</template>
  <template #hotel>Hotel slot</template>
  <template #summary>Trip summary slot</template>
</UiPageItinerary>

API reference

Itinerary template: day tabs, a timeline of stops for the chosen day, transport and hotel blocks and a sticky trip 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).
daysDay switcher; Tabs or PillTabs.
timelineStops of the active day with times and places; Card, Timeline, StatRow.
transportFlights, buses and transfers of the day; Card, StatRow.
hotelWhere the group stays that night; Card, Badge, IconTile.
summaryTrip summary; Card, Descriptions, Progress.

Notes

  • Place inside AppShell; fill only the slots you need.
  • Render only the active day in timeline, transport and hotel. The summary stays visible on the right and goes below the day under 860 px.