Installation
Section titled “Installation”- Package
@bigbang/ui- Import
import { SaveBar } from '@bigbang/ui';- Source
- SaveBar.tsx
- Storybook
- SaveBar · Playground
SaveBar is in the @bigbang/ui package.
import { SaveBar } from '@bigbang/ui';
<SaveBar open={isDirty} saving={saving} saved={saved} onSave={save} onDiscard={reset} />;openRequired- Description
- Shows the bar; set it while the form has unsaved changes.
- Type
boolean
onSave- Description
- Called by Save.
- Type
() => void
onDiscard- Description
- Called by Discard. Without it, Discard is not shown.
- Type
() => void
saving- Description
- Shows a spinner on Save and disables Discard while the changes are saved.
- Type
boolean- Default
false
saved- Description
- Shows the saved state on Save. Close the bar after the success hold.
- Type
boolean- Default
false
message- Description
- Text in the bar. Without it,
ui.save-bar.message("Kaydedilmemiş değişiklikleriniz var" or "You have unsaved changes"). - Type
ReactNode
saveLabel- Description
- Save button text. Without it,
ui.save-bar.save. - Type
string
discardLabel- Description
- Discard button text. Without it,
ui.save-bar.discard. - Type
string
position- Description
fixedpins the bar to the bottom of the window;stickykeeps it at the bottom of its scroll container.- Type
'fixed' | 'sticky'- Default
'fixed'
warnOnLeave- Description
- Asks the browser to confirm before leaving the page while the bar is open.
- Type
boolean- Default
true
material- Description
'solid'keeps the bar solid under a glass Provider.- Type
'auto' | 'solid'- Default
'auto'
className- Description
- Added to the root element; use it for layout only.
- Type
string
Data attributes
Section titled “Data attributes”data-component="save-bar": on the root element.data-openordata-closed.data-part:message,discard,save.