logoAnt Design

⌘ K
  • 设计
  • 研发
  • 组件
  • 博客
  • 资源
  • 国内镜像
5.25.2
  • 组件总览
  • 通用
    • Button按钮
    • FloatButton悬浮按钮
      5.0.0
    • Icon图标
    • Typography排版
  • 布局
    • Divider分割线
    • Flex弹性布局
      5.10.0
    • Grid栅格
    • Layout布局
    • Space间距
    • Splitter分隔面板
      5.21.0
  • 导航
    • Anchor锚点
    • Breadcrumb面包屑
    • Dropdown下拉菜单
    • Menu导航菜单
    • Pagination分页
    • Steps步骤条
    • Tabs标签页
  • 数据录入
    • AutoComplete自动完成
    • Cascader级联选择
    • Checkbox多选框
    • ColorPicker颜色选择器
      5.5.0
    • DatePicker日期选择框
    • Form表单
    • Input输入框
    • InputNumber数字输入框
    • Mentions提及
    • Radio单选框
    • Rate评分
    • Select选择器
    • Slider滑动输入条
    • Switch开关
    • TimePicker时间选择框
    • Transfer穿梭框
    • TreeSelect树选择
    • Upload上传
  • 数据展示
    • Avatar头像
    • Badge徽标数
    • Calendar日历
    • Card卡片
    • Carousel走马灯
    • Collapse折叠面板
    • Descriptions描述列表
    • Empty空状态
    • Image图片
    • List列表
    • Popover气泡卡片
    • QRCode二维码
      5.1.0
    • Segmented分段控制器
    • Statistic统计数值
    • Table表格
    • Tag标签
    • Timeline时间轴
    • Tooltip文字提示
    • Tour漫游式引导
      5.0.0
    • Tree树形控件
  • 反馈
    • Alert警告提示
    • Drawer抽屉
    • Message全局提示
    • Modal对话框
    • Notification通知提醒框
    • Popconfirm气泡确认框
    • Progress进度条
    • Result结果
    • Skeleton骨架屏
    • Spin加载中
    • Watermark水印
      5.1.0
  • 其他
    • Affix固钉
    • App包裹组件
      5.1.0
    • ConfigProvider全局化配置
    • Util工具类
      5.13.0

Avatar
头像

用来代表用户或事物,支持图片、图标或字符展示。
使用import { Avatar } from "antd";
源码components/avatar
文档
编辑此页更新日志

相关资源

Ant Design X
Ant Design Charts
Ant Design Pro
Pro Components
Ant Design Mobile
Ant Design Mini
Ant Design Web3
Ant Design Landing-首页模板集
Scaffolds-脚手架市场
Umi-React 应用开发框架
dumi-组件/文档研发工具
qiankun-微前端框架
Ant Motion-设计动效
国内镜像站点 🇨🇳

社区

Awesome Ant Design
Medium
Twitter
yuque logoAnt Design 语雀专栏
Ant Design 知乎专栏
体验科技专栏
seeconf logoSEE Conf-蚂蚁体验科技大会
加入我们

帮助

GitHub
更新日志
常见问题
报告 Bug
议题
讨论区
StackOverflow
SegmentFault

Ant XTech logo更多产品

yuque logo语雀-构建你的数字花园
AntV logoAntV-数据可视化解决方案
Egg logoEgg-企业级 Node.js 框架
Kitchen logoKitchen-Sketch 工具集
Galacean logoGalacean-互动图形解决方案
xtech logo蚂蚁体验科技
主题编辑器
Made with ❤ by
蚂蚁集团和 Ant Design 开源社区

设计师专属

安装 Kitchen Sketch 插件 💎,一键填充高逼格头像和文本。

代码演示

基本

头像有三种尺寸,两种形状可选。

CodeSandbox Icon
codepen icon
External Link Icon
expand codeexpand code
U
自动调整字符大小

对于字符型的头像,当字符串较长时,字体大小可以根据头像宽度自动调整。也可使用 gap 来设置字符距离左右两侧边界单位像素。

CodeSandbox Icon
codepen icon
External Link Icon
expand codeexpand code
K
K+2
K+2
K+2
AK
Avatar.Group

头像组合展现。

CodeSandbox Icon
codepen icon
External Link Icon
expand codeexpand code
U
USER
avatar
U
类型

支持三种类型:图片、Icon 以及字符,其中 Icon 和字符型可以自定义图标颜色及背景色。

CodeSandbox Icon
codepen icon
External Link Icon
expand codeexpand code
1
带徽标的头像

通常用于消息提示。

CodeSandbox Icon
codepen icon
External Link Icon
expand codeexpand code
响应式尺寸

头像大小可以根据屏幕大小自动调整。

CodeSandbox Icon
codepen icon
External Link Icon
expand codeexpand code

API

通用属性参考:通用属性

Avatar

参数说明类型默认值版本
alt图像无法显示时的替代文本string-
gap字符类型距离左右两侧边界单位像素number44.3.0
icon设置头像的自定义图标ReactNode-
shape指定头像的形状circle | squarecircle
size设置头像的大小number | large | small | default | { xs: number, sm: number, ...}default4.7.0
src图片类头像的资源地址或者图片元素string | ReactNode-ReactNode: 4.8.0
srcSet设置图片类头像响应式资源地址string-
draggable图片是否允许拖动boolean | 'true' | 'false'true
crossOriginCORS 属性设置'anonymous' | 'use-credentials' | ''-4.17.0
onError图片加载失败的事件,返回 false 会关闭组件默认的 fallback 行为() => boolean-

Tip:你可以设置 icon 或 children 作为图片加载失败的默认 fallback 行为,优先级为 icon > children

Avatar.Group 4.5.0+

参数说明类型默认值版本
max设置最多显示相关配置,5.18.0 前可使用 参数{ count?: number; style?: CSSProperties; popover?: PopoverProps }-5.18.0
size设置头像的大小number | large | small | default | { xs: number, sm: number, ...}default4.8.0
shape设置头像的形状circle | squarecircle5.8.0

主题变量(Design Token)

组件 Token如何定制?
Token 名称描述类型默认值
containerSize头像尺寸number32
containerSizeLG大号头像尺寸number40
containerSizeSM小号头像尺寸number24
groupBorderColor头像组边框颜色string#ffffff
groupOverlapping头像组重叠宽度number-8
groupSpace头像组间距number4
textFontSize头像文字大小number18
textFontSizeLG大号头像文字大小number24
textFontSizeSM小号头像文字大小number14
全局 Token如何定制?