syncfusion-javascript-avatar

Syncfusion JavaScript Avatar 控件是一个轻量级组件，用于在用户界面中显示用户资料与身份标识。头像可呈现多种媒体格式，包括图片、SVG、字体图标、字母和单词，常见于面向用户的应用、联系人列表、通知徽章和资料区。

主要能力

多种形状：默认（圆角矩形）与圆形（e-avatar-circle）。
五种预定义尺寸：XLarge、Large、Default、Small、XSmall，分别对应 e-avatar-xlarge、e-avatar-large、e-avatar、e-avatar-small、e-avatar-xsmall 类。
多种媒体格式：图片、SVG、字体图标、字母与单词。
颜色定制：默认灰色，可通过自定义 CSS 类设置背景色与文字色。
组件集成：可与 Badge 和 ListView 控件配合使用。
响应式设计：基于 font-size 缩放。
支持 ES5 与现代模块方式，兼容多种项目配置。

使用方式

通过 HTML span 元素应用 e-avatar 基础类即可创建头像。基本示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Avatar Quick Start</title>
    <link href="url" rel="stylesheet" />
    <link href="url" rel="stylesheet" />
</head>
<body>
    <!-- 默认方形头像，显示首字母 -->
    <span class="e-avatar">AB</span>

    <!-- 圆形头像 -->
    <span class="e-avatar e-avatar-circle">JD</span>

    <!-- 图片头像 -->
    <span class="e-avatar e-avatar-circle" style="background-image: url('profile.jpg')"></span>
</body>
</html>

尺寸类可叠加在 e-avatar 基础上使用：

<span class="e-avatar e-avatar-xlarge">AB</span>
<span class="e-avatar e-avatar-large">AB</span>
<span class="e-avatar">AB</span>
<span class="e-avatar e-avatar-small">AB</span>
<span class="e-avatar e-avatar-xsmall">AB</span>

自定义颜色可通过 CSS 类实现：

<span class="e-avatar e-avatar-circle primary">JD</span>
<span class="e-avatar e-avatar-circle success">MK</span>
<span class="e-avatar e-avatar-circle warning">LP</span>

.e-avatar.primary {
    background-color: #0071c1;
    color: white;
}

.e-avatar.success {
    background-color: #00b251;
    color: white;
}

.e-avatar.warning {
    background-color: #ffc900;
    color: #333;
}

混合媒体类型可在同一行展示：

<div class="avatar-group">
    <!-- 图片头像 -->
    <span class="e-avatar e-avatar-large" style="background-image: url('user1.jpg')"></span>

    <!-- SVG 头像 -->
    <span class="e-avatar e-avatar-large">
        <svg viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg">
            <circle cx="16" cy="16" r="15" fill="currentColor"/>
        </svg>
    </span>

    <!-- 字母头像 -->
    <span class="e-avatar e-avatar-large">AB</span>

    <!-- 图标头像 -->
    <span class="e-avatar e-avatar-large">
        <i class="icon-user"></i>
    </span>
</div>

与状态徽章组合使用：

<div style="position: relative; display: inline-block;">
    <span class="e-avatar e-avatar-large e-avatar-circle">JD</span>
    <span class="e-badge e-badge-success e-badge-overlap e-badge-circle">●</span>
</div>

适用场景

用户资料展示：在资料卡中显示头像与信息，配合相应尺寸与形状。
联系人列表：在 ListView 中使用 small 或 xsmall 头像展示联系人首字母或头像图片。
通知徽章：结合 Badge 控件展示通知数量或状态指示。
团队成员网格：以网格布局展示成员，使用不同类型的头像与自定义颜色。
聊天应用：在消息线程中使用带自定义颜色的小圆形头像标识发送者。
用户选择界面：在下拉或选择列表中以一致的样式与尺寸呈现用户。

关键类与属性

尺寸类：e-avatar-xlarge（超大）、e-avatar-large（大）、e-avatar（默认）、e-avatar-small（小）、e-avatar-xsmall（超小）。

形状类：e-avatar（默认圆角矩形）、e-avatar-circle（圆形）。

媒体支持：图片使用 background-image 属性并搭配 background-size: cover；SVG 可嵌入标记或引用 SVG 文件；图标使用图标字体或图标库；文本直接显示首字母或短文本。

限制

关于该控件的授权方式、价格、具体浏览器兼容范围与其他未在资料中说明的功能，暂未提供。

技能介绍

主要能力

使用方式

适用场景

相关文档导航

关键类与属性

限制