PageOrder

Order details page. Slots: header, status, items, shipping, side.

Jump to API reference

Import

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

Default

Order BK-20418

Placed on 12 Mar

Status stepper slot
Items slot
Shipping slot
Summary slot
Vue
<UiPageOrder
  title="Order BK-20418"
  subtitle="Placed on 12 Mar"
  :crumbs="[{ label: 'Home' }, { label: 'Section' }]"
>
  <template #status>Status stepper slot</template>
  <template #items>Items slot</template>
  <template #shipping>Shipping slot</template>
  <template #side>Summary slot</template>
</UiPageOrder>

API reference

Order/booking details template: status chips, items table, timeline and side info cards.

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).
statusPayment and fulfillment chips; Chip (tone success, warning, danger).
itemsItems table with totals; DataTable.
shippingEvent timeline; Timeline.
sideCustomer, address and payment cards; UserCell, Descriptions, Button.

Notes

  • Place inside AppShell; fill only the slots you need.