Skip to content

Avatar 头像

Avatar 组件可以用来代表人物或对象, 支持使用图片、图标或者文字作为 Avatar。

基础用法

使用 shapesize 属性来设置 Avatar 的形状和大小

html
<ivy-space size="custom" gap="24px">
    <ivy-avatar content="U" style="--ivy-avatar-size: 28px"></ivy-avatar>
    <ivy-avatar content="User"></ivy-avatar>
    <ivy-avatar content="User" style="--ivy-avatar-size: 60px"></ivy-avatar>

    <ivy-avatar
        content="U"
        shape="square"
        style="--ivy-avatar-size: 28px"></ivy-avatar>
    <ivy-avatar content="User" shape="square"></ivy-avatar>
    <ivy-avatar
        content="User"
        shape="square"
        style="--ivy-avatar-size: 60px"></ivy-avatar>
</ivy-space>

展示类型

支持使用图片,图标或者文字作为 Avatar。

html
<ivy-space size="custom" gap="24px">
    <ivy-avatar content="User"></ivy-avatar>
    <ivy-avatar
        src="https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png"></ivy-avatar>
    <ivy-avatar><ivy-icon name="user" size="20px"></ivy-icon></ivy-avatar>
</ivy-space>

Api

Props

属性名描述类型可选值默认值
shape形状stringcircle/squarecircle
size大小-css 大小都可以string-40px
content显示的文字内容string--
type类型stringprimary/success/warning/danger/infodanger
srcAvatar 图片的源地址string-
srcset图片 Avatar 的原生 srcset 属性string-
alt图片 Avatar 的原生 alt 属性string-
fit当展示类型为图片的时候,设置图片如何适应容器string-cover

MIT Licensed