外觀

---

立即下載Kendo UI for jQuery

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>