Bileşenler

Dialog

Sayfanın üzerinde açılan, bir görev ya da karar için odağı içinde tutan kalıcı pencere.

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

Başlık zorunludur ve pencereye ad verir. Açıklama başlıkla birlikte okunur. Eylemler altta, en önemlisi en sonda durur; Vazgeç butonu Dialog.Close ile sarılır.

import { Button, Dialog } from '@bigbang/ui';

export default function Default() {
  return (
    <Dialog
      trigger={<Button>Pencereyi aç</Button>}
      title="Pencere başlığı"
      description="Pencere açıklaması burada yer alır."
      footer={
        <>
          <Dialog.Close>
            <Button variant="secondary">Vazgeç</Button>
          </Dialog.Close>
          <Dialog.Close>
            <Button>Kaydet</Button>
          </Dialog.Close>
        </>
      }
    >
      Gövde içeriği burada yer alır. Pencereyi tek bir görevle sınırlı tutun.
    </Dialog>
  );
}

Boyutlar

size: sm 400 px, md 560 px (varsayılan), lg 720 px. Görünüm 640 px’ten darsa kapatılabilir pencere alttan açılan sayfaya dönüşür.

import { Button, Dialog } from '@bigbang/ui';

const sizes = [
  ['sm', 'Küçük pencere'],
  ['md', 'Orta pencere'],
  ['lg', 'Büyük pencere'],
] as const;

export default function Sizes() {
  return (
    <div className="flex flex-wrap gap-sm">
      {sizes.map(([size, label]) => (
        <Dialog
          key={size}
          size={size}
          trigger={<Button variant="secondary">{label}</Button>}
          title={label}
          footer={
            <Dialog.Close>
              <Button>Kaydet</Button>
            </Dialog.Close>
          }
        >
          Gövde içeriği burada yer alır. Pencereyi tek bir görevle sınırlı tutun.
        </Dialog>
      ))}
    </div>
  );
}

Form ile

Pencere açılınca odak gövdedeki ilk alana gelir. Gönder butonu formun dışında olduğundan form özniteliğiyle forma bağlanır.

import { Button, Dialog, TextInput } from '@bigbang/ui';

export default function WithForm() {
  return (
    <Dialog
      trigger={<Button>Pencereyi aç</Button>}
      title="Pencere başlığı"
      footer={
        <>
          <Dialog.Close>
            <Button variant="secondary">Vazgeç</Button>
          </Dialog.Close>
          <Button type="submit" form="example-dialog-form">
            Kaydet
          </Button>
        </>
      }
    >
      <form id="example-dialog-form" className="flex flex-col gap-lg" onSubmit={(event) => event.preventDefault()}>
        <TextInput label="Alan etiketi" description="Yardım metni burada yer alır." />
      </form>
    </Dialog>
  );
}

Zorunlu karar

dismissible={false}: kapat butonu yoktur; Escape ve dışarı tıklama pencereyi kapatmaz. Alttaki eylem kapatır. Yalnızca oturumun bitmesi gibi kaçınılmaz durumlar içindir.

import { Button, Dialog } from '@bigbang/ui';

export default function Blocking() {
  return (
    <Dialog
      dismissible={false}
      size="sm"
      trigger={<Button variant="secondary">Pencereyi aç</Button>}
      title="Oturumunuz sona erdi"
      description="Devam etmek için yeniden giriş yapın."
      footer={
        <Dialog.Close>
          <Button>Yeniden giriş yap</Button>
        </Dialog.Close>
      }
    />
  );
}

Parçalarla

Proplarla kurulamayan bir düzen için Dialog.Root, Dialog.Popup, Dialog.Header, Dialog.Title, Dialog.Description, Dialog.Body ve Dialog.Footer parçalarını kullanın.

Canlı örnek, StorybookStorybook'ta aç

Açık ve koyu mod

Panel color-surface-raised zemin, color-border-overlay ince çerçeve ve shadow-overlay gölgesi alır; arka planı color-surface-scrim karartır ve blur-surface-scrim bulanıklaştırır. Eylemler color-surface-layer-1 bir bantta durur.

import { Button, Dialog } from '@bigbang/ui';

export default function Default() {
  return (
    <Dialog
      trigger={<Button>Pencereyi aç</Button>}
      title="Pencere başlığı"
      description="Pencere açıklaması burada yer alır."
      footer={
        <>
          <Dialog.Close>
            <Button variant="secondary">Vazgeç</Button>
          </Dialog.Close>
          <Dialog.Close>
            <Button>Kaydet</Button>
          </Dialog.Close>
        </>
      }
    >
      Gövde içeriği burada yer alır. Pencereyi tek bir görevle sınırlı tutun.
    </Dialog>
  );
}