Körsatiş · molecule
Avatar
Kvadrat avatar: ikki harf yoki surat, 6 toifa rangi, 3 ölçam (sm 22 · md 36 · lg 56), ixtiyoriy holat nuqtasi (active — puls, waiting, stopped, idle). Yoy = ölçam × 0,28. Guruh: .fx-avatar-group (ustma-ust, kesim yuza rangida), oxirida data-more bilan «+N». Kengaytma: xs · xl · 2xl ölçam; guruh hoverda yoyiladi (data-spread), tör (data-layout=grid), data-max; “+N” — <button>; surat zanjiri (img + onerror yaşiriş → .fx-avatar__fallback initsial/ikon); .fx-avatar__badge (✓/logotip); data-editable + .fx-avatar__edit.
Özgartiriş
AZ
GUMFTQSR
Variantlar
| Atribut | Qiymatlar | Standart |
|---|---|---|
data-color | yellowpinkbluecoralgreenpurple | blue |
data-size | smmdlgxsxl2xl | md |
data-status | activewaitingstoppedidle Alohida rangsiz — umumiy [data-status] nuqtasi (xira). | — |
data-spread | true | — |
data-layout | grid | — |
data-max | 3456 | — |
data-editable | true | — |
Anatomiya
- root
.fx-avatarşart - group
.fx-avatar-groupixtiyoriy - more
.fx-avatar[data-more]ixtiyoriy - fallback
.fx-avatar__fallbackixtiyoriy - badge
.fx-avatar__badgeixtiyoriy - edit
.fx-avatar__editixtiyoriy
Klaviatura va kiriş
role="img" + aria-label (ism va holat). Puls prefers-reduced-motion'da töxtaydi. Rangli fonda matn — --fx-text-on-category.
Kod
AI uçun: qaçon işlatiladi
- Odam yoki agentni ikki harf yoki surat bilan körsatiş.
- Logotip →
img - Holatni faqat nuqta rangi bilan bildirmang — aria-label yoki yonidagi matnda holat söz bilan bölsin.
- Avatarga öz rangingizni bermang — faqat data-color (6 toifa rangi).
- Kulrang avatar va gradient qilmang.
npx foxui add avatar
<span class="fx-avatar" data-color="yellow" role="img" aria-label="Guli">GU</span> <span class="fx-avatar" data-color="purple" data-status="active" role="img" aria-label="Mister Fox, işlayapti">MF</span> <span class="fx-avatar" data-size="lg" data-color="green" data-status="waiting" role="img" aria-label="Tadqiqotçi, kutyapti">TQ</span> <span class="fx-avatar" data-size="sm" data-color="coral" data-status="stopped" role="img" aria-label="Bot, töxtagan">BT</span> <span class="fx-avatar-group" role="group" aria-label="5 iştirokçi"><span class="fx-avatar" data-color="yellow" role="img" aria-label="Guli">GU</span><span class="fx-avatar" data-color="purple" role="img" aria-label="Mister Fox">MF</span><span class="fx-avatar" data-color="green" role="img" aria-label="Tadqiqotçi">TQ</span><span class="fx-avatar" data-more role="img" aria-label="yana 2">+2</span></span> <span class="fx-avatar" data-size="xl" data-color="green" data-editable role="img" aria-label="Surat: Dilnoza"><span class="fx-avatar__fallback">DL</span><img src="/yoq.jpg" alt="" onerror="this.hidden=true"><span class="fx-avatar__edit">Özgartiriş</span></span> <span class="fx-avatar" data-color="blue" role="img" aria-label="Aziz, tasdiqlangan"><span class="fx-avatar__fallback">AZ</span><span class="fx-avatar__badge" aria-hidden="true">✓</span></span> <span class="fx-avatar-group" data-spread data-max="3" role="group" aria-label="6 iştirokçi"><span class="fx-avatar" data-color="yellow" role="img" aria-label="Guli">GU</span><span class="fx-avatar" data-color="purple" role="img" aria-label="Mister Fox">MF</span><span class="fx-avatar" data-color="green" role="img" aria-label="Tadqiqotçi">TQ</span><span class="fx-avatar" data-color="pink" role="img" aria-label="Sardor">SR</span><button type="button" class="fx-avatar" data-more aria-label="Yana 3 kişini körsatiş">+3</button></span> <span class="fx-avatar" data-color="blue" role="img" aria-label="Alisher Navoiy"><span class="fx-avatar__fallback" data-person><svg viewBox="0 0 256 256" aria-hidden="true"><use href="#fx-i-person"/></svg></span></span> <span class="fx-avatar" data-tone="muted" role="img" aria-label="Marie Curie, tarixiy shaxs"><span class="fx-avatar__fallback" data-person><svg viewBox="0 0 256 256" aria-hidden="true"><use href="#fx-i-person"/></svg></span></span>
Tokenlar: --fx-bg-brand-solid --fx-bg-category-blue --fx-bg-category-coral --fx-bg-category-green --fx-bg-category-pink --fx-bg-category-purple --fx-bg-category-yellow --fx-bg-muted --fx-bg-subtle --fx-bg-surface --fx-border-color-focus --fx-border-color-strong --fx-border-width-default --fx-border-width-focus --fx-color-neutral-900 --fx-duration-pulse --fx-ease-standard --fx-fg-error --fx-fg-success --fx-fg-warning --fx-font-size-display-sm --fx-font-size-lg --fx-font-size-xl --fx-font-size-xs --fx-font-weight-semibold --fx-knob-pill --fx-motion-base --fx-motion-fast --fx-motion-instant --fx-motion-press --fx-radius-avatar-ratio --fx-radius-circle --fx-size-avatar-lg --fx-size-avatar-md --fx-size-avatar-sm --fx-size-icon-sm --fx-size-status-dot --fx-size-status-dot-sm --fx-space-1 --fx-space-2 --fx-text-on-brand --fx-text-on-category --fx-text-primary --fx-text-secondary