Skip to content

Avatar 头像

Avatar 组件可以用来代表人物或对象,支持图片、图标或字符展示。

基础用法

通过 shapesize 设置头像的形状和大小。

展示类型

支持三种类型:图标、图片和字符。

适应容器

当图片大小无法适应容器时,通过 fit 属性设置图片在容器内的适应方式。

头像框

支持通过 frame-src 属性添加头像框,并支持通过 frame-style 自定义样式。

头像组

当需要展示一组头像时,可以使用 fyo-avatar-group 组件。

API

Avatar Attributes

属性名说明类型默认值
size设置头像的大小number / stringdefault
shape设置头像的形状stringcircle
icon设置头像的图标类型,参考 Icon 组件string-
src图片头像的资源地址string-
src-set以逗号分隔的一个或多个字符串列表表明一系列用户代理使用的可能的图像string-
alt描述图像的替换文本string-
fit当展示类型为图片时,设置图片如何适应容器框stringcover
frame-src头像框的资源地址 (FyoimiyaUI 特有)string-
frame-style头像框的自定义样式object-

Avatar Slots

插槽名说明
default自定义头像展示内容