PageForm

Two-column form page. Slots: header, main, media, side, actions.

Jump to API reference

Import

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

Default

New tour

Fill in the package details

Main fields slot
Media upload slot
Sidebar slot
Vue
<UiPageForm title="New tour" subtitle="Fill in the package details">
  <template #main>Main fields slot</template>
  <template #media>Media upload slot</template>
  <template #side>Sidebar slot</template>
</UiPageForm>

API reference

Create/edit form template: main column, media, side column and header actions.

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.
actionsDiscard, Save draft and Publish buttons in the top-right of the built-in header; Button. Rendered right-aligned on their own when title is not set.
mainMain column cards (info, options); Card, TextField, Textarea.
mediaBelow main; upload dropzone; FileUpload or Gallery.
sideSide column cards (price, status, tags); Card, NumberInput, Select, ChipInput.

Notes

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