Avatar

人员为圆形，显示首字母或头像；组织和项目为 8 圆角。

AAOAOAOAONNLNLNL

<div className="flex flex-wrap items-end gap-12">
      {([20, 24, 28, 32, 40] as const).map((s) => (
        <Avatar key={s} name="Ada Okafor" size={s} />
      ))}
      {([20, 24, 32, 40] as const).map((s) => (
        <Avatar key={`o${s}`} name="Northwind Labs" kind="org" size={s} />
      ))}
    </div>

import { Avatar, AvatarGroup } from "@logicplanes/kaeso-ui";

属性

decorative
boolean
旁边已写有相同信息时，对辅助技术隐藏它。
kind
"person" | "org" = person
人员（圆形）或组织（圆角方形）。
name
string
人员或组织的名称；没有图片时显示其首字母，并作为无障碍名称。
size
24 | 20 | 28 | 32 | 40 = 24
直径，单位为像素。
src
string
图片地址；没有地址或加载失败时显示首字母。