PageStates Pro

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

State gallery page. Slots: empty, noresults, forbidden, offline, error, loading, success.

Jump to API reference

Import

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

Default

States

Section

Empty slot
No results slot
No permission slot
Offline slot
Error slot
Loading slot
Success slot
Vue
<UiPageStates title="States" subtitle="Section">
  <template #empty>Empty slot</template>
  <template #noresults>No results slot</template>
  <template #forbidden>No permission slot</template>
  <template #offline>Offline slot</template>
  <template #error>Error slot</template>
  <template #loading>Loading slot</template>
  <template #success>Success slot</template>
</UiPageStates>

API reference

State gallery: empty list, no results, no permission, offline, error with retry, loading and success on one page.

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).
emptyEmpty list; EmptyState with a primary action.
noresultsNo search results; EmptyState with a reset action.
forbiddenNo permission; EmptyState with a request-access action.
offlineOffline; DataState state="offline".
errorError with retry; DataState state="error".
loadingLoading; Skeleton or DataState state="loading".
successSuccess confirmation; Alert tone="success" or EmptyState.

Notes

  • Place inside AppShell; fill only the slots you need.
  • The first six slots sit in two rows of auto-fit cards; success spans the full width.