StepDialog

Wizard modal with a steps sidebar and previous/next navigation. The size prop (xs, sm, md, lg, xl) sets the dialog width.

Jump to API reference

Import

Vue

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

Step 2 of 3

Vue

<UiStepDialog
  title="New booking"
  :current="1"
  :steps="[{ title: 'Guest', sub: 'Who is travelling' }, { title: 'Room', sub: 'Pick a room type' }, { title: 'Payment', sub: 'Confirm and pay' }]"
  :open="open"
  @close="open = false"
>
  Choose between Double, Twin and Family rooms.
</UiStepDialog>

Sizes

Vue

<UiStepDialog
  size="lg"
  title="New booking"
  :current="1"
  :steps="[{ title: 'Guest', sub: 'Who is travelling' }, { title: 'Room', sub: 'Pick a room type' }, { title: 'Payment', sub: 'Confirm and pay' }]"
  :open="open"
  @close="open = false"
>
  Choose between Double, Twin and Family rooms.
</UiStepDialog>

API reference

Wide Modal with a vertical step list on the left and Previous/Next buttons; use for multi-step wizards.

Props

PropType and valuesDefaultDescription

openbooleanfalseShows the dialog when true; renders nothing when false.

titlestring—Header text and aria-label.

steps{ title: string; sub?: string }[]'[]'Steps in the left rail; sub is a hint under the title.

currentnumber—Zero-based index of the active step. Earlier steps are shown as done.

sizexssmmdlgxl'md'Scale of dialog width (640 to 1100 px) and padding.

Slots

Vue: named slots. React: a prop with the same name; default is children.

defaultContent of the current step.

Events

Vue: @name. React: onName.

backPrevious button; disabled on the first step.

nextNext button; labelled "Submit" on the last step, so also handle submit here.

closeClose icon, scrim click or the Escape key.

Notes

You own the current index: update it in the back and next handlers.
Has aria-modal. Escape calls close; on open focus moves into the dialog, Tab is trapped inside it and focus returns to the previously focused element on close.