PageSettings

Settings page with a side sub-navigation. Slots: header, subnav, profile, notifications, integrations, danger.

Jump to API reference

Import

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

Default

Settings

Manage your workspace

Sub-navigation slot
Profile section slot
Notifications section slot
Danger zone slot
Vue
<UiPageSettings title="Settings" subtitle="Manage your workspace">
  <template #subnav>Sub-navigation slot</template>
  <template #profile>Profile section slot</template>
  <template #notifications>Notifications section slot</template>
  <template #danger>Danger zone slot</template>
</UiPageSettings>

API reference

Settings template with a section sub-navigation and stacked settings sections.

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).
subnavLeft section menu; SubNav or Tabs.
profileProfile section; SettingsSection with TextField, PhoneInput.
notificationsDelivery channels; SettingsSection with Switch.
integrationsService cards (connected, off, error); IntegrationCard.
dangerIrreversible actions; Alert, red Button, ConfirmDialog.

Notes

  • Place inside AppShell; fill only the slots you need.