Popover

Ne zaman kullanılır

Popover, sayfadan ayrılmadan kısa bir ayar yapmak içindir: sütun seçimi, hızlı filtre, görünüm seçenekleri.

Ne zaman kullanılmaz

• Yalnızca bir eylem listesi için: DropdownMenu kullanın.
• Yalnızca açıklama metni için: InfoPopover kullanın.
• Üzerine gelince kısa ipucu için: Tooltip kullanın.
• Uzun form ya da karar için: Dialog kullanın.

Anatomi

Görünümü düzenle

AçıkKoyu

Kodu kopyala

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

export default function Default() {
  return (
    <Popover trigger={<Button variant="secondary">Görünümü düzenle</Button>} title="Görünüm" description="Gösterilecek sütunları seçin.">
      <div className="flex flex-col gap-md">
        <Checkbox label="Birinci öğe" defaultChecked />
        <Checkbox label="İkinci öğe" />
        <div className="flex justify-end">
          <Popover.Close>
            <Button size="sm">Uygula</Button>
          </Popover.Close>
        </div>
      </div>
    </Popover>
  );
}

1. Tetikleyici: Paneli açan buton.
2. Panel: Yükseltilmiş zemin, ince halka, küçük gölge.
3. Başlık ve açıklama.
4. İçerik: Etkileşimli denetimler.
5. Ok: İsteğe bağlı.

Davranış

• Tetikleyiciye basınca açılır, yeniden basınca kapanır; tetikleyici aria-expanded taşır.
• Açılınca odak ilk denetime gider; Escape ya da dışarı tıklama kapatır ve odak tetikleyiciye döner.
• Yer yoksa ters yana geçer ve görünüm içinde kalır.
• Varsayılan olarak sayfa kullanılabilir kalır; modal sayfayı etkisiz yapar.

Yönergeler

• İçeriği tek bir konuyla sınırlayın.
• Değişiklikleri hemen uygulayın ya da bir “Uygula” butonu koyun; ikisini karıştırmayın.
• Panel içinde panel açmayın.

İçerik

Türkçe	İngilizce
Görünüm	View
Gösterilecek sütunları seçin.	Choose the columns to show.
Uygula	Apply

Cam

Provider material="glass" altında panel cama döner ve ok gizlenir. material="solid" onu opak tutar. Panel tablo ya da üçten fazla alanlı bir form gibi yoğun içerik taşıyorsa material="solid" verin.

İlgili bileşenler

• InfoPopover: Açıklama için küçük bilgi butonu.
• Tooltip: Odak almayan kısa ipucu.
• Dialog: Kalıcı pencere.