PageCatalog

Catalog with a filter sidebar. Slots: header, filters, toolbar, grid, pager.

Jump to API reference

Import

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

Default

Hotels

Makkah and Madinah

Filters slot
Toolbar slot
Card grid slot
Pager slot
Vue
<UiPageCatalog title="Hotels" subtitle="Makkah and Madinah">
  <template #filters>Filters slot</template>
  <template #toolbar>Toolbar slot</template>
  <template #grid>Card grid slot</template>
  <template #pager>Pager slot</template>
</UiPageCatalog>

API reference

Catalog template with a filter sidebar and a card grid (hotels, tours).

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).
filtersLeft filter column (price, rating, services); Slider, Rating, RadioGroup, Checkbox.
toolbarSearch, view switch and sort above the grid; SearchInput, ToggleGroup, Select.
gridResponsive grid of cards; HotelCard or TourCard.
pagerPagination at the bottom; Pagination.

Notes

  • Place inside AppShell; fill only the slots you need.
  • The filter column is 260 px wide; on phones put filters in a Drawer yourself.