Leaf UI
  • 简体中文

      • Avatar 头像

      展示用户、团队或对象的头像。

      基础用法

      交互预览基础用法
      basic.tsx
      import { Avatar, Badge } from '@sudden3/leaf-ui';

export function AvatarBasic() {
  return (
    <div className="leaf-demo-row">
      <Avatar size="sm">LF</Avatar>
      <Avatar>LE</Avatar>
      <Avatar size="lg" shape="square">
        UI
      </Avatar>
      <Badge dot>
        <Avatar alt="未读消息">A</Avatar>
      </Badge>
      <Avatar src="data:image/png;base64,broken" alt="图片加载失败">
        LF
      </Avatar>
    </div>
  );
}

      Avatar API

      属性类型默认值说明
      srcstring—头像图片地址
      altstring—无障碍名称
      size'sm' | 'md' | 'lg' | number'md'预设尺寸或像素大小
      shape'circle' | 'square''circle'头像形状
      iconReactNode—没有图片和内容时使用的图标
      childrenReactNode—文字或自定义内容，图片失败时也会显示
      onError() => void—图片加载失败时触发

      类型

      定义组件属性或组装列表时可导入相关类型。

      import type { AvatarProps } from '@sudden3/leaf-ui';

      使用说明

      使用 alt 为头像提供名称。图片加载失败时显示 children 或 icon，更换 src 后会尝试加载新图片。