PagePatterns

Showcase of analytics blocks. Slots: header, hero, strip, statlines, chartcard, tiles, listrows, countries, versus, segbar, activity, actioncard.

Jump to API reference

Import

Vue

import { UiPagePatterns } from '@ziyarago/ui/vue'

Default

Patterns

Analytics building blocks

Hero slot

Stat strip slot

Chart card slot

Tiles slot

Vue

<UiPagePatterns title="Patterns" subtitle="Analytics building blocks">
  <template #hero>Hero slot</template>
  <template #strip>Stat strip slot</template>
  <template #chartcard>Chart card slot</template>
  <template #tiles>Tiles slot</template>
</UiPagePatterns>

API reference

Showcase template combining twelve recurring dashboard card patterns (banner, strips, stat lines, charts, lists).

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).

heroLarge banner; HeroBanner.

stripOne card with four metrics; StatStrip with IconTile.

statlinesRow of toned stat lines; StatLine (tone brand, sky, success, warning, danger).

chartcardTitled chart with menu and period select; ChartCard with PillSelect and OccupancyChart or MiniChart.

tilesSelectable tiles plus an add tile; TabTiles.

listrowsIcon, title and value rows; StatRow.

countriesCountry amount rows; CountryRow.

versusTwo values with a share bar; VersusBar.

segbarComposition bar with legend; SegBar.

activityTimeline of events; Timeline.

actioncardCard with collapse, refresh and close actions; ActionCard.

Notes

Place inside AppShell; fill only the slots you need.