nili/ui
enfaartr
Tüm bileşenler

Avatar

Genel görünüm
25 export2 varyant ekseni42 prop9 dosya
import { Avatar, AvatarGroup, CompactAvatarGroup, FlatAvatar } from '@nili/ui';

Bu, kütüphanenin kendi genel görünüm sayfası — canlı olarak render ediliyor. Üstten dili veya temayı değiştirin, o da değişir.

Boyutlar

Dokuz boyut, 80 pikselden 16’ya. name zorunludur: adı olmayan bir avatar ya etiketsiz bir görsel ya da süsleyici bir lekedir ve hangisi olduğunu yalnızca çağrı yeri bilir. Süs olduğunu belirtmek için boş bir dize verin.

AL
3xl
AL
2xl
AL
xl
AL
lg
AL
md
AL
sm
A
xs
A
2xs
A
3xs
import { Avatar } from "@nili/ui"

export function Example() {
  return (
    <>
      <Avatar size="3xl" name="Ada Lovelace" />
      <Avatar size="xl" name="Ada Lovelace" />
      <Avatar size="md" name="Ada Lovelace" />
      <Avatar size="2xs" name="Ada Lovelace" />
    </>
  )
}

Yedekler

Görsel yoksa baş harfler name’den türetilir. Bunları initials ile geçersiz kılın, fallback ile tamamen değiştirin ya da siluet için placeholder kullanın — fotoğrafı ve baş harfe değer bir adı olmayan bir hesap.

AL
م‌ر
🦊
import { Avatar } from "@nili/ui"

export function Example() {
  return (
    <>
      {/* initials from the name */}
      <Avatar name="Ada Lovelace" />

      {/* explicit initials */}
      <Avatar name="محمد رضایی" initials="م‌ر" />

      {/* an image, with initials behind it */}
      <Avatar name="Grace Hopper" src="/avatars/grace.png" />

      {/* the silhouette */}
      <Avatar name="" placeholder />
    </>
  )
}

Tonlar

Figma’da Avatar’ın renk ekseni yok — tonlar bir eklentidir ve gruplar için vardır: altı özdeş gri dairenin yığını okunmaz ve onları renklendirmek, görseller yüklenmeden ayırt etmenin en ucuz yoludur.

S
soft
Y
yellow
B
blue
G
green
P
pink
P
purple
R
red
import { Avatar } from "@nili/ui"

export function Example() {
  return (
    <>
      <Avatar name="Ada Lovelace" tone="soft" />
      <Avatar name="Grace Hopper" tone="blue" />
      <Avatar name="Radia Perlman" tone="pink" />
    </>
  )
}

Durumlar

Üstte bir, altta bir işaret. Ona bir statusLabel verin — renkli bir noktanın erişilebilir adı yoktur. Her boyut bir işaret taşıyamaz; küçük uç, okunaksız bir benek çizmek yerine işareti düşürür.

alt
AL
online
AL
offline
AL
busy
AL
away
AL
company
üst
AL
verified
AL
pin
AL
favorite
AL
add
AL
remove
AL
notification
import { Avatar, Icon } from "@nili/ui"
import { RiBuilding2Line } from "@remixicon/react"

export function Example() {
  return (
    <>
      <Avatar name="Ada Lovelace" bottomStatus="online" statusLabel="Online" />
      <Avatar name="Ada Lovelace" bottomStatus="busy" statusLabel="Busy" />
      <Avatar name="Ada Lovelace" topStatus="verified" statusLabel="Verified" />
      <Avatar
        name="Apex Financial"
        bottomStatus="company"
        companyIcon={<Icon icon={RiBuilding2Line} />}
        statusLabel="Company account"
      />
    </>
  )
}

Avatar grubu

“+N” çipli bir yığın. max kaç tanesinin çizileceğini sınırlar; overflowCount, elinizdeki liste daha büyük bir kümenin yalnızca bir sayfasıyken hesaplanan kalanı geçersiz kılar.

boyutlar
AL
GH
KJ
RP
AL
GH
KJ
RP
AL
GH
KJ
RP
AL
GH
KJ
RP
AL
GH
KJ
RP
taşma
AL
GH
KJ
+3
AL
GH
+24
import { AvatarGroup } from "@nili/ui"

const team = [
  { id: "a", name: "Ada Lovelace", tone: "blue" },
  { id: "b", name: "Grace Hopper", tone: "purple" },
  { id: "c", name: "Katherine Johnson", tone: "green" },
  { id: "d", name: "Radia Perlman", tone: "pink" },
]

export function Example() {
  return (
    <>
      <AvatarGroup items={team} label="Team members" />
      <AvatarGroup items={team} max={3} label="Team members" />
      <AvatarGroup items={team} max={2} overflowCount={24} label="Team" />
    </>
  )
}

Kompakt avatar grubu

Hap içinde daha yoğun bir yığın — Avatar Group’un boşluklarının fazla cömert kaldığı tablo satırları ve liste öğeleri için. Üç boyut, iki işleyiş.

default
AL
GH
KJ
A
G
K
A
G
K
stroke
AL
GH
KJ
A
G
K
A
G
K
import { CompactAvatarGroup } from "@nili/ui"

export function Example() {
  return (
    <>
      <CompactAvatarGroup items={team} max={3} label="Assignees" />
      <CompactAvatarGroup items={team} max={3} appearance="stroke" label="Assignees" />
    </>
  )
}

Düz avatar

Değiştirilebilir Figma parçalarından kurulan çizimli avatar. Dizinler başa döner; yani her sayı geçerli ve belirlenimci bir seçimdir — bir kullanıcı kimliğinden kararlı bir avatar türetmek için elverişlidir.

import { FlatAvatar } from "@nili/ui"

export function Example() {
  return (
    <>
      <FlatAvatar size="2xl" background={4} hair={2} outfit={1} label="" />

      {/* derived from an id — same user, same face, every time */}
      <FlatAvatar
        size="xl"
        background={userId % 8}
        hair={userId % 6}
        eye={userId % 4}
        label=""
      />
    </>
  )
}