外觀

---

立即下載Kendo UI for jQuery

Avatar允許您根據(jù)其內(nèi)容設(shè)置不同的樣式。

舍入和類型

可用的types有：

• 圖像 - 通過將img元素作為 Avatar 的子元素傳遞。
• 文本頭像（默認(rèn)）- 通過傳遞將呈現(xiàn)為文本（縮寫）的字符串。
• 圖標(biāo)頭像 - 通過將 傳遞icon給 Avatar 組件。

通過設(shè)置屬性，所有類型都可以呈現(xiàn)為不同的形狀rounded。

可用rounded值為：

• “full”（默認(rèn)）— 渲染圓形頭像。
• “small”—渲染具有較小邊框半徑的頭像。
• “medium”—渲染具有中等邊框半徑的頭像。
• “l(fā)arge”—渲染具有大邊框半徑的頭像。
• “none”—渲染沒有邊框半徑的頭像（方形頭像）。

下面的例子演示了Avatar的type和rounded選項(xiàng)：

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

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

主題顏色

Avatar 允許您指定預(yù)定義的主題顏色。

可用的themeColor值為：

• “primary”（默認(rèn)）— 應(yīng)用基于主要主題顏色的著色。
• “base”-應(yīng)用基本主題顏色。
• “secondary”—應(yīng)用基于次要主題顏色的著色。
• “tertiary”—應(yīng)用基于第三主題顏色的著色。
• “inherit”—應(yīng)用繼承的著色值。
• “info”—應(yīng)用基于信息主題顏色的著色。
• “success”—應(yīng)用基于成功主題顏色的著色。
• “warning”—應(yīng)用基于警告主題顏色的著色。
• “error”—應(yīng)用基于錯(cuò)誤主題顏色的著色。
• “dark”—應(yīng)用基于深色主題顏色的著色。
• “l(fā)ight”—應(yīng)用基于淺色主題顏色的著色。
• “inverse”—應(yīng)用基于反轉(zhuǎn)主題顏色的著色。
• “none”-將不應(yīng)用任何主題顏色類別。

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

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

尺寸

頭像允許您設(shè)置預(yù)定義或自定義尺寸。要指定預(yù)定義大小，請?jiān)O(shè)置該size屬性。

可用size值為：

• “小”
• “中”（默認(rèn)）
• “大”
• “無”

要指定自定義頭像尺寸，請使用style屬性。

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

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

填充模式

Avatar可以設(shè)置樣式選項(xiàng)，并通過設(shè)置fillMode屬性創(chuàng)建實(shí)心或輪廓頭像。

可用的fillMode值為：

• “實(shí)心”（默認(rèn)）
• “輪廓”
• “無”

border通過將該屬性設(shè)置為 true，可以呈現(xiàn)輪廓頭像內(nèi)容周圍的附加邊框。

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

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

邊界

Avatar 允許您使用border屬性指定是否在其內(nèi)容周圍渲染附加邊框。默認(rèn)情況下，邊框設(shè)置為false。

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

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