Appearance
Avatar 头像
Avatar 组件可以用来代表人物或对象,支持图片、图标或字符展示。
基础用法
通过 shape 和 size 设置头像的形状和大小。
展示类型
支持三种类型:图标、图片和字符。
适应容器
当图片大小无法适应容器时,通过 fit 属性设置图片在容器内的适应方式。
头像框
支持通过 frame-src 属性添加头像框,并支持通过 frame-style 自定义样式。
头像组
当需要展示一组头像时,可以使用 fyo-avatar-group 组件。
API
Avatar Attributes
| 属性名 | 说明 | 类型 | 默认值 |
|---|---|---|---|
| size | 设置头像的大小 | number / string | default |
| shape | 设置头像的形状 | string | circle |
| icon | 设置头像的图标类型,参考 Icon 组件 | string | - |
| src | 图片头像的资源地址 | string | - |
| src-set | 以逗号分隔的一个或多个字符串列表表明一系列用户代理使用的可能的图像 | string | - |
| alt | 描述图像的替换文本 | string | - |
| fit | 当展示类型为图片时,设置图片如何适应容器框 | string | cover |
| frame-src | 头像框的资源地址 (FyoimiyaUI 特有) | string | - |
| frame-style | 头像框的自定义样式 | object | - |
Avatar Slots
| 插槽名 | 说明 |
|---|---|
| default | 自定义头像展示内容 |