Bileşenler

Avatar

Kişiyi ya da şirketi görseliyle, görsel yoksa baş harfleriyle tanıtır; isteğe bağlı durum noktası gösterir.

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

Avatar görseli yükler; görsel yoksa ya da yüklenemezse adın baş harflerini gösterir. Kişi daire, şirket 8 px köşeli kare olur. name zorunludur: erişilebilir ad ve baş harfler ondan gelir.

K1K2ÖL

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

const picture = `data:image/svg+xml,${encodeURIComponent(
  '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64"><rect width="64" height="64" fill="#3b6ea8"/><circle cx="32" cy="25" r="11" fill="#dbe7f5"/><path d="M10 64c2-14 12-22 22-22s20 8 22 22z" fill="#dbe7f5"/></svg>',
)}`;

export default function Default() {
  return (
    <div className="flex flex-wrap items-center gap-xl">
      <Avatar name="Kullanıcı 1" src={picture} size="lg" />
      <Avatar name="Kullanıcı 2" size="lg" />
      <Avatar name="Örnek Ltd" kind="company" size="lg" />
    </div>
  );
}

Boyutlar

Beş boyut vardır: 24, 32 (varsayılan), 40, 48 ve 64 px. Listelerde sm ya da md, profil başlıklarında xl kullanın.

K1K1K1K1K1

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

export default function Sizes() {
  return (
    <div className="flex flex-wrap items-end gap-xl">
      <Avatar name="Kullanıcı 1" size="xs" />
      <Avatar name="Kullanıcı 1" size="sm" />
      <Avatar name="Kullanıcı 1" size="md" />
      <Avatar name="Kullanıcı 1" size="lg" />
      <Avatar name="Kullanıcı 1" size="xl" />
    </div>
  );
}

Durum

status ile sağ alt uçta bir nokta görünür: online, offline ya da busy. Nokta 2 px yüzey halkasıyla ayrılır. Durum ayrıca erişilebilir adın parçasıdır: “Kullanıcı 1 (çevrimiçi)”. Çevrimdışı nokta içi boştur; üç durum renkle birlikte biçimle de ayrışır.

K1K2K4ÖL

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

export default function Status() {
  return (
    <div className="flex flex-wrap items-center gap-xl">
      <Avatar name="Kullanıcı 1" status="online" size="lg" />
      <Avatar name="Kullanıcı 2" status="offline" size="lg" />
      <Avatar name="Kullanıcı 4" status="busy" size="lg" />
      <Avatar name="Örnek Ltd" kind="company" status="online" size="lg" />
    </div>
  );
}

Yedekler

Görsel yokken baş harfler gösterilir. Baş harfler Provider dilinin büyük harf kurallarıyla yazılır: Türkçede “ilk işlem” İİ olur. Ad yoksa kişi ya da şirket simgesi gösterilir. Yüklenemeyen görsel de baş harflere döner. Yedek rengi addan türetilir; aynı ad her zaman aynı rengi alır.

İİKK5

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

export default function Fallbacks() {
  return (
    <div className="flex flex-wrap items-center gap-xl">
      <Avatar name="ilk işlem" size="lg" />
      <Avatar name="Kullanıcı" size="lg" />
      <Avatar name="" size="lg" />
      <Avatar name="" kind="company" size="lg" />
      <Avatar name="Kullanıcı 5" src="missing-picture.png" size="lg" />
    </div>
  );
}

Grup

Avatar.Group avatarları 8 px örtüştürür ve max aşıldığında “+N” sayacı ekler. Gruba aria-label verin: grup adlandırılmış bir group olur.

K1K2K4K5

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

const people = ['Kullanıcı 1', 'Kullanıcı 2', 'Kullanıcı 4', 'Kullanıcı 5', 'Kullanıcı 6', 'Kullanıcı 3'];

export default function Group() {
  return (
    <Avatar.Group max={4} aria-label="Ekip">
      {people.map((name) => (
        <Avatar key={name} name={name} />
      ))}
    </Avatar.Group>
  );
}

Açık ve koyu mod

Yedek renkleri durum tonu token’larından gelir ve iki modda da 4.5:1’i aşar.

İİKK5

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

export default function Fallbacks() {
  return (
    <div className="flex flex-wrap items-center gap-xl">
      <Avatar name="ilk işlem" size="lg" />
      <Avatar name="Kullanıcı" size="lg" />
      <Avatar name="" size="lg" />
      <Avatar name="" kind="company" size="lg" />
      <Avatar name="Kullanıcı 5" src="missing-picture.png" size="lg" />
    </div>
  );
}