Bileşenler

Tooltip

Bir öğenin yanında üzerine gelince ve klavye odağında görünen kısa açıklama.

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

Tooltip, tek bir odaklanabilir öğeyi sarar. Üzerine gelince 400 ms sonra, klavye odağında hemen açılır; Escape kapatır.

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

export default function Default() {
  return (
    <Tooltip content="Değişiklikleri kaydeder ve pencereyi kapatır.">
      <Button variant="secondary">Kaydet</Button>
    </Tooltip>
  );
}

Yanlar

side: top, bottom, inline-start, inline-end. Mantıksal yanlar sağdan sola yazımda yer değiştirir.

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

export default function Sides() {
  return (
    <div className="flex flex-wrap items-center gap-md">
      <Tooltip side="top" content="Değişiklikleri kaydeder ve pencereyi kapatır.">
        <Button variant="secondary">Üst</Button>
      </Tooltip>
      <Tooltip side="bottom" content="Değişiklikleri kaydeder ve pencereyi kapatır.">
        <Button variant="secondary">Alt</Button>
      </Tooltip>
      <Tooltip side="inline-start" content="Değişiklikleri kaydeder ve pencereyi kapatır.">
        <Button variant="secondary">Başlangıç</Button>
      </Tooltip>
      <Tooltip side="inline-end" content="Değişiklikleri kaydeder ve pencereyi kapatır.">
        <Button variant="secondary">Bitiş</Button>
      </Tooltip>
    </div>
  );
}

IconButton üzerinde

IconButton label metnini varsayılan olarak ipucunda gösterir; ad iki kez okunmasın diye describes kapalıdır.

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

export default function OnIconButton() {
  return (
    <div className="flex items-center gap-sm">
      <IconButton icon="copy" label="Kopyala" />
      <IconButton icon="x" label="Kapat" tooltipSide="bottom" />
    </div>
  );
}

Açık ve koyu mod

İpucu color-surface-inverse zemin ve color-text-inverse metin alır; iki modda da sayfadan ayrışır.

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

export default function Default() {
  return (
    <Tooltip content="Değişiklikleri kaydeder ve pencereyi kapatır.">
      <Button variant="secondary">Kaydet</Button>
    </Tooltip>
  );
}