Bileşenler

InfoPopover

Bir etiketin ya da değerin yanında, basınca kısa bir açıklama açan küçük bilgi butonu.

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

Buton label ile adlandırılır ve neyi açıkladığını söyler. Panel basınca açılır; dokunmatik ekranda ve klavyeyle de çalışır.

Alan etiketi

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

Yardım ikonu

icon="circle-help" bir alanın nasıl doldurulacağını anlatır. Başlık verilmezse panel butonun adıyla adlandırılır.

Değer

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

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

Açık ve koyu mod

Panel Popover ile aynı token’ları kullanır.

Alan etiketi

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