Avatar

Playground

Chuyển Nguồn ảnh sang "ảnh hỏng" và quan sát: không có biểu tượng ảnh vỡ nào xuất hiện, chữ cái đầu hiện ra thay thế và ở lại vĩnh viễn.

import { Avatar, AvatarFallback, AvatarImage } from "@nexobox/ui";

<Avatar size="md">
  <AvatarImage src="/nexoframe-ds-kit/components/avatar-photo-sample.png" alt="Nguyễn Văn A" />
  <AvatarFallback seed="Nguyễn Văn A">NA</AvatarFallback>
</Avatar>

Khi nào sử dụng

Anatomy

Không có prop name, không có hàm sinh chữ cái đầu trong primitive. Cắt tên người là một luật nghiệp vụ và phụ thuộc ngôn ngữ, không thuộc primitive thị giác — initialsFor ở trang này là minh hoạ cục bộ, không thuộc package. Primitive cũng không suy giới tính từ tên. gender="female" chỉ khi dữ liệu đã ghi nhận; bỏ trống thì icon là User02Icon.

Sizes

Ba size trên thang riêng của Avatar, không phải thang control. Mặc định là md. sm dùng chữ caption 12px; md và lg dùng chữ UI 14px. Cả ba bậc dùng weight semibold. Chấm trạng thái co theo cùng prop size — vòng của sm là 1px, vòng của md và lg là 2px. Truyền đúng size của Avatar cha vào AvatarStatus.

AvatarIllustration

Sáu nhân vật minh hoạ, không phải ảnh người thật, cho ảnh đại diện của một nhân viên AI. Cùng một khung vẽ, chỉ khác kiểu tóc, áo và bảng màu; mọi màu đọc từ --nf-foundation-color-*. Đặt bên trong AvatarFallback để có đúng đĩa tròn của Avatar. Hình trang trí (aria-hidden): tên và nhãn nằm ở nơi chứa nó.

character là "a" đến "f", bắt buộc. Danh sách đầy đủ là AVATAR_CHARACTERS.

States

Không có variant, không có nhóm avatar xếp chồng. Trạng thái tải ảnh (do Radix quản lý) và trạng thái hiện diện (do AvatarStatus vẽ) là hai trục độc lập, chồng lên nhau tự do — một avatar đang tải ảnh vẫn có thể mang một chấm trạng thái.

Loading và error: có. Không có chữ là một trạng thái: icon người. Nữ dùng Female02Icon. Nam, không rõ, hoặc không truyền gender dùng User02Icon.

Design tokens

Root đọc --nf-semantic-surface-subtle, --nf-component-avatar-radius, và một trong ba --nf-component-avatar-size / -sm-size / -lg-size theo prop size. Fallback có chữ đọc một cặp --nf-component-avatar-tone-*-fill / -ink (cobalt, jade, coral, và ba cặp deep). Fallback không chữ đọc --nf-foundation-color-neutral-400 và --nf-foundation-color-neutral-0. Viền chữ là mực pha 45% trong suốt, dày --nf-foundation-stroke-hairline. Weight là --nf-foundation-font-weight-semibold. Cỡ chữ kế thừa từ Root: sm đọc caption, md và lg đọc UI. AvatarStatus đọc --nf-component-avatar-status-size / -status-sm-size / -status-lg-size theo cùng prop size, viền qua --nf-component-avatar-status-sm-ring-width (sm) hoặc --nf-component-avatar-status-ring-width (md, lg) và --nf-component-avatar-status-ring-color, và màu qua một trong năm token trạng thái: --nf-semantic-status-success-icon (online), --nf-semantic-status-danger-icon (busy), --nf-semantic-status-warning-icon (away), --nf-semantic-status-information-icon (syncing), hoặc --nf-semantic-text-muted (offline).

API & triển khai

Accessibility & nội dung