PageSearch Pro

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

Search results page. Slots: search, filters, results, empty.

Jump to API reference

Import

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

Default

Search results

Section

Search field slot
Filters slot
Results slot
Empty state slot
Vue
<UiPageSearch title="Search results" subtitle="Section">
  <template #search>Search field slot</template>
  <template #filters>Filters slot</template>
  <template #results>Results slot</template>
  <template #empty>Empty state slot</template>
</UiPageSearch>

API reference

Search template: query field, filter sidebar, result groups and an empty state.

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).
searchSearchInput, Tabs.
filtersFilters; Card, Checkbox, Select.
resultsResult groups; Card, Chip, Divider.
emptyShown only when there are no results; EmptyState.

Notes

  • Place inside AppShell; fill only the slots you need.
  • Filters sit left of the results and stack above them under 860 px. Fill empty only when there are no results.