Bileşenler

SaveBar

Formda kaydedilmemiş değişiklik varken alttan yükselen, Kaydet ve Vazgeç düğmeli çubuk.

Storybook: Storybook
Kaynak kod: Kaynak kod

Aşağıdaki örnek Storybook’tan canlı yüklenir; denetimleri Storybook’ta açabilirsiniz.

Canlı örnek, StorybookStorybook'ta aç

Varsayılan

Alanı değiştirin: çubuk yükselir. Vazgeç eski değere döner; Kaydet kaydeder ve çubuk iner.

Görünen ad

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

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>
  );
}

Durumlar

Açık, kaydediliyor (Vazgeç kapalı) ve kaydedildi.

Kaydedilmemiş değişiklikleriniz var

import { SaveBar } from '@bigbang/ui';

export default function States() {
  return (
    <div className="flex flex-col gap-lg">
      <div className="flex h-32 flex-col justify-end rounded-lg border border-line-subtle">
        <SaveBar open position="sticky" warnOnLeave={false} onSave={() => undefined} onDiscard={() => undefined} />
      </div>
      <div className="flex h-32 flex-col justify-end rounded-lg border border-line-subtle">
        <SaveBar open saving position="sticky" warnOnLeave={false} onSave={() => undefined} onDiscard={() => undefined} />
      </div>
      <div className="flex h-32 flex-col justify-end rounded-lg border border-line-subtle">
        <SaveBar open saved position="sticky" warnOnLeave={false} onSave={() => undefined} onDiscard={() => undefined} />
      </div>
    </div>
  );
}

Açık ve koyu mod

Çubuk yükseltilmiş yüzey ve kaplama gölgesi kullanır.

Kaydedilmemiş değişiklikleriniz var

import { SaveBar } from '@bigbang/ui';

export default function States() {
  return (
    <div className="flex flex-col gap-lg">
      <div className="flex h-32 flex-col justify-end rounded-lg border border-line-subtle">
        <SaveBar open position="sticky" warnOnLeave={false} onSave={() => undefined} onDiscard={() => undefined} />
      </div>
      <div className="flex h-32 flex-col justify-end rounded-lg border border-line-subtle">
        <SaveBar open saving position="sticky" warnOnLeave={false} onSave={() => undefined} onDiscard={() => undefined} />
      </div>
      <div className="flex h-32 flex-col justify-end rounded-lg border border-line-subtle">
        <SaveBar open saved position="sticky" warnOnLeave={false} onSave={() => undefined} onDiscard={() => undefined} />
      </div>
    </div>
  );
}