PageOnboarding Pro

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

Onboarding page. Slots: progress, steps, checklist, tips.

Jump to API reference

Import

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

Default

Onboarding

Section

Progress slot
Step content slot
Checklist slot
Tips slot
Vue
<UiPageOnboarding title="Onboarding" subtitle="Section">
  <template #progress>Progress slot</template>
  <template #steps>Step content slot</template>
  <template #checklist>Checklist slot</template>
  <template #tips>Tips slot</template>
</UiPageOnboarding>

API reference

Onboarding template: progress block, active step content, setup checklist and a column of tips.

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).
progressStepper and a completion bar above the content; Stepper, Progress.
stepsContent of the active step; Card with form fields.
checklistRemaining setup tasks; Card with Checkbox rows.
tipsSide column with help cards; Card, IconTile, Button.

Notes

  • Place inside AppShell; fill only the slots you need.
  • Keep the active step in your own state; the template does not switch steps. Steps and checklist share the main column, tips go to the side and stack below it on narrow screens.