InfoPopover

Ne zaman kullanılır

InfoPopover, bir etiketin ya da değerin anlamını, nasıl hesaplandığını ya da neden istendiğini kısaca açıklamak içindir. Tooltip’ten farklı olarak basınca açılır, bu yüzden dokunmatik ekranlarda da çalışır.

Ne zaman kullanılmaz

• Görevi tamamlamak için gereken bilgi için: Bilgiyi sayfada yardım metni olarak gösterin.
• Etkileşimli içerik için: Popover kullanın.
• Bir ikon butonunun adını göstermek için: Tooltip yeterlidir.

Anatomi

Alan etiketi

AçıkKoyu

Kodu kopyala

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

export default function Default() {
  return (
    <span className="inline-flex items-center gap-xs type-label-md">
      Alan etiketi
      <InfoPopover label="Alan etiketi hakkında" title="Alan etiketi">
        Bu alanın neden istendiğini ve nasıl doldurulacağını anlatan kısa açıklama burada yer alır.
      </InfoPopover>
    </span>
  );
}

1. Bilgi butonu: 32 px yuvarlak ikon butonu.
2. Panel: 240 px, oklu.
3. Başlık: İsteğe bağlı.
4. Açıklama.

Davranış

• Butona basınca açılır, yeniden basınca kapanır.
• Escape ya da dışarı tıklama kapatır; odak butona döner.
• Panelde bağlantı varsa odak ona gider; yoksa panelin kendisine gider ve içerik okunur.
• Varsayılan olarak üstte açılır; yer yoksa alta geçer.

Yönergeler

• Etiketi açıkladığı şeyle adlandırın: “Alan etiketi hakkında”.
• Açıklamayı üç cümleyle sınırlayın.
• Bir satırda en fazla bir bilgi butonu kullanın.

İçerik

Türkçe	İngilizce
Alan etiketi hakkında	About the field label
Daha fazla bilgi	More information

İlgili bileşenler

• Popover: Etkileşimli içerikli panel.
• Tooltip: Üzerine gelince kısa ipucu.
• IconButton: Bilgi butonunun kendisi.