PageAccount

Account page with tabs and one panel. Slots: header, tabs, panel.

Jump to API reference

Import

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

Default

Account

Profile, security and billing

Tabs slot
Active panel slot
Vue
<UiPageAccount title="Account" subtitle="Profile, security and billing">
  <template #tabs>Tabs slot</template>
  <template #panel>Active panel slot</template>
</UiPageAccount>

API reference

Account settings template with pill tabs and a swappable panel.

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).
tabsSection tabs (account, security, billing, notifications); PillTabs.
panelContent of the active tab; Card or SettingsSection with Switch and TextField.

Notes

  • Place inside AppShell; fill only the slots you need.
  • The template does not switch panels by itself: keep the active tab in your own state (PillTabs v-model) and render only that tab content in the panel slot.