PageProfile

Profile page without a title prop. Slots: profile, tabs, about, activity, plan.

Import

Vue

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

Default

Profile header slot

Tabs slot

Activity slot

Plan slot

Vue

<UiPageProfile>
  <template #profile>Profile header slot</template>
  <template #tabs>Tabs slot</template>
  <template #about>About slot</template>
  <template #activity>Activity slot</template>
  <template #plan>Plan slot</template>
</UiPageProfile>

API reference

User profile template: cover header, tabs and two columns of about, activity and plan 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).

profileCover with avatar, name and meta; ProfileHeader.

tabsSection tabs; PillTabs.

aboutLeft column key-value info; Card with Descriptions.

activityRight column activity feed; Timeline.

planRight column plan card and upgrade button; Card, Badge, Progress, Button.

Notes

Place inside AppShell; fill only the slots you need.