FullscreenDialog

Full-screen dialog with close button, title and a save action.

Jump to API reference

Import

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

Default

Vue
<UiFullscreenDialog
  title="Edit itinerary"
  save-label="Save changes"
  :open="open"
  @close="open = false"
>
  Day 1: arrival in Jeddah and transfer to Makkah.
</UiFullscreenDialog>

API reference

Full-screen dialog with a close button, title and Save action in the header; use for long editing flows on mobile.

Props

PropType and valuesDefaultDescription
openbooleanfalseShows the dialog when true; renders nothing when false.
titlestring—Header text and aria-label.
saveLabelstring'Save'Text of the save button in the header.

Slots

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

defaultDialog content.

Events

Vue: @name. React: onName.

closeCalled on the close icon button or the Escape key.
saveCalled on the header save button.

Notes

  • 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.