FormSaveBar

components/form/SaveBar.vue

Sticky save/cancel footer bar with dirty state management and loading spinner.

Form content area
States
Saving
Disabled
components/form/SaveBar.vue

Usage

<FormSaveBar saveText = "Save" savingText = "—" :saving = "false" :disabled = "false" :dirty = "true" :cancel = "true" cancelText = "Cancel" :floating = "true" />

Props

PropTypeDefaultDescription
saveTextString'Save'Save button label
savingTextString''Label during save
savingBooleanfalseShow saving state
disabledBooleanfalseDisable save button
dirtyBooleantrueShow the bar (form has changes)
cancelBooleantrueShow cancel button
cancelTextString'Cancel'Cancel button label
floatingBooleantrueSticky positioning

Events

EventDescription
saveWhen save is clicked
cancelWhen cancel is clicked

Related