外观

Avatar允许您根据其内容设置不同的样式。

舍入和类型

可用的types有：

• 图像 - 通过将img元素作为 Avatar 的子元素传递。
• 文本头像（默认）- 通过传递将呈现为文本（缩写）的字符串。
• 图标头像 - 通过将 传递icon给 Avatar 组件。

通过设置属性，所有类型都可以呈现为不同的形状rounded。

可用rounded值为：

• “full”（默认）— 渲染圆形头像。
• “small”—渲染具有较小边框半径的头像。
• “medium”—渲染具有中等边框半径的头像。
• “large”—渲染具有大边框半径的头像。
• “none”—渲染没有边框半径的头像（方形头像）。

下面的例子演示了Avatar的type和rounded选项：

<div id="avatar"></div>

<script>
$(document).ready(function(){
$("#avatar").kendoAvatar({
rounded: null,
type: 'text',
text: "IMG"
});
});
</script>

主题颜色

Avatar 允许您指定预定义的主题颜色。

可用的themeColor值为：

• “primary”（默认）— 应用基于主要主题颜色的着色。
• “base”-应用基本主题颜色。
• “secondary”—应用基于次要主题颜色的着色。
• “tertiary”—应用基于第三主题颜色的着色。
• “inherit”—应用继承的着色值。
• “info”—应用基于信息主题颜色的着色。
• “success”—应用基于成功主题颜色的着色。
• “warning”—应用基于警告主题颜色的着色。
• “error”—应用基于错误主题颜色的着色。
• “dark”—应用基于深色主题颜色的着色。
• “light”—应用基于浅色主题颜色的着色。
• “inverse”—应用基于反转主题颜色的着色。
• “none”-将不应用任何主题颜色类别。

<div id="avatar"></div>

<script>
$(document).ready(function(){
$("#avatar").kendoAvatar({
themeColor: 'success'
});
});
</script>

尺寸

头像允许您设置预定义或自定义尺寸。要指定预定义大小，请设置该size属性。

可用size值为：

• “小”
• “中”（默认）
• “大”
• “无”

要指定自定义头像尺寸，请使用style属性。

<p>Avatar Predefined Sizes</p>
<div id="avatar"></div>

<script>
$(document).ready(function(){
$("#avatar").kendoAvatar({
size: 'large'
});
});
</script>

填充模式

Avatar可以设置样式选项，并通过设置fillMode属性创建实心或轮廓头像。

可用的fillMode值为：

• “实心”（默认）
• “轮廓”
• “无”

border通过将该属性设置为 true，可以呈现轮廓头像内容周围的附加边框。

Copy code <div id="avatar"></div>

<script>
$(document).ready(function(){
$("#avatar").kendoAvatar({
fillMode: 'outline'
});
});
</script>

边界

Avatar 允许您使用border属性指定是否在其内容周围渲染附加边框。默认情况下，边框设置为false。

<div id="avatar"></div>

<script>
$(document).ready(function(){
$("#avatar").kendoAvatar({
border: true
});
});
</script>