PageDetail

Detail page with a booking sidebar. Slots: header, gallery, summary, tabs, history, booking.

Jump to API reference

Import

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

Default

Swissotel Makkah

5 stars, 120 m to Haram

Gallery slot
Summary slot
Tabs slot
Booking panel slot
Vue
<UiPageDetail
  title="Swissotel Makkah"
  subtitle="5 stars, 120 m to Haram"
  :crumbs="[{ label: 'Home' }, { label: 'Section' }]"
>
  <template #gallery>Gallery slot</template>
  <template #summary>Summary slot</template>
  <template #tabs>Tabs slot</template>
  <template #booking>Booking panel slot</template>
</UiPageDetail>

API reference

Detail page template (hotel, tour): gallery, summary, tabs, history and a booking side 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).
galleryMain photo with thumbnails; Gallery, Carousel, LazyImage.
summaryName, stars, rating, badges; Card with Badge and Rating.
tabsDescription, amenities, reviews; Tabs with Descriptions or Accordion.
historyWhat changed (status, notes, price); Timeline.
bookingRight-hand booking card with dates, guests, price and CTA; Card, Select, NumberInput, Button.

Notes

  • Place inside AppShell; fill only the slots you need.
  • gallery, summary, tabs and history are the main column; booking is the side column.