SaveBar

Ne zaman kullanılır

SaveBar, uzun ayar ve düzenleme sayfalarında değişikliklerin kaydedilmediğini hatırlatmak içindir. Kaydet düğmesi sayfanın neresinde olunursa olsun erişilebilir kalır.

Ne zaman kullanılmaz

• Anında uygulanan ayarlar için: her değişiklik hemen kaydediliyorsa çubuğa gerek yoktur.
• Kısa formlar için: formun altındaki Kaydet düğmesi görünüyorsa yeterlidir.
• Çok adımlı akışlar için: WizardFooter kullanın.

Anatomi

Görünen ad

Alanı değiştirin; çubuk aşağıdan yükselir.

VazgeçKaydet

AçıkKoyu

Kodu kopyala

import { SaveBar, TextInput } from '@bigbang/ui';
import { useState } from 'react';

export default function Default() {
  const [saved, setSaved] = useState('Kullanıcı 1');
  const [value, setValue] = useState('Kullanıcı 1');
  const [saving, setSaving] = useState(false);
  return (
    <div className="flex h-72 flex-col overflow-auto rounded-lg border border-line-subtle">
      <div className="flex-1 p-xl">
        <TextInput label="Görünen ad" description="Alanı değiştirin; çubuk aşağıdan yükselir." value={value} onValueChange={(next) => setValue(String(next))} className="max-w-sm" />
      </div>
      <SaveBar
        position="sticky"
        warnOnLeave={false}
        open={value !== saved}
        saving={saving}
        onDiscard={() => setValue(saved)}
        onSave={() => {
          setSaving(true);
          window.setTimeout(() => {
            setSaving(false);
            setSaved(value);
          }, 700);
        }}
      />
    </div>
  );
}

1. Çubuk: Altta, sayfa genişliğinde.
2. Mesaj: Bilgi simgesi ve “Kaydedilmemiş değişiklikleriniz var”.
3. Vazgeç: İkincil düğme; değişiklikleri geri alır.
4. Kaydet: Birincil düğme; yükleniyor ve kaydedildi durumları.

Davranış

• open doğru olunca çubuk aşağıdan yükselerek gelir; kapanınca daha hızlı iner.
• Kapalı çubuk inert olur: odaklanılmaz, okunmaz.
• Açılınca mesaj kibarca duyurulur.
• saving sırasında Kaydet döner gösterge gösterir ve Vazgeç kapanır. saved başarı durumunu gösterir; ardından open’ı kapatın.
• Açıkken sayfadan ayrılmak tarayıcının onay sorusunu açar (warnOnLeave).

Yönergeler

• Değişiklik yoksa çubuğu göstermeyin; open’ı gerçek farka bağlayın.
• Vazgeç’i geri alınamaz bir silme gibi göstermeyin; yalnızca kaydedilmemiş değişiklikleri atar.
• Sabit çubuk sayfanın altını örter; sayfanın altına çubuk yüksekliği kadar boşluk bırakın ya da sticky kullanın.

İçerik

Türkçe	İngilizce
Kaydedilmemiş değişiklikleriniz var	You have unsaved changes
Kaydet / Vazgeç	Save / Discard
Kaydedildi	Saved

Cam

Provider material="glass" altında çubuk cama döner. material="solid" onu opak tutar.

İlgili bileşenler

• Form: Kaydetmeden önce denetim.
• Button: Yükleniyor ve başarı durumları.