文檔半島外圍網上直營>>telerik中文文檔>>外觀
                外觀
立即下載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>                
            
 QQ交談
QQ交談 在線咨詢
在線咨詢 
                 
                
 渝公網安備
            50010702500608號
渝公網安備
            50010702500608號
             
            
 客服熱線
客服熱線