Avatar
Prefix avatar
VUE YesAvatar 經常作為頭像照片使用，請使用正方形尺寸圖片。初始寬度為 100%，取決於父層容器的寬度做彈性縮放。若是圖片源的尺寸非正方形，則建議使用 <div class="avatar">，圖片則會作為背景方式顯示，並以置中方式對齊。
使用方式只需要將 .avatar 用於 <img> 或是 <div>。
Img
可以直接使用於 <img>，圖片尺寸建議使用 1:1 的正方形：
<img class="avatar" src="圖片路徑}" />
Div Container
使用 <div> 時，<div>是作為容器的存在，需要配置一個 .avatar_obj 作為圖片顯示的媒介：
<div class="avatar">
<span class="avatar_obj" style="background-image: url('圖片路徑}')"></span>
</div>
<k-avatar src="{圖片路徑}" />
當圖片為空值，請移除 <span class="avatar_obj">：
<div class="avatar"></div>
<k-avatar />
Sizes
頭像的尺寸總共有 6 種，請見以下表格。
| 尺寸 | 圓角 | |
|---|---|---|
sz:xs | 24px | 3px |
sz:sm | 48px | 6px |
sz:md | 64px | 8px |
sz:lg | 96px | 12px |
sz:xl | 128px | 16px |
sz:xxl | 160px | 20px |
<div class="avatar sz:xl"></div>
<k-avatar src="{圖片路徑}" sz="xl" />
Style
Square
若想維持正方形，可在 .avatar 加上 :square。同時可搭配上述六種尺寸。
<div class="avatar :square"></div>
<k-avatar stl="square" src="{圖片路徑}" sz="xl" />
使用文字
當圖片尚未上傳，可保留空值也可以使用第一個文字或字母，只需要在 .avatar_obj 內加入文字就能使用。
米
豆
<div class="avatar">
<span class="avatar_obj">{文字}</span>
</div>
<k-avatar>{文字}</k-avatar>
使用 Icon
作法與上述相同，只需要將 Icon 放入 .avatar_obj 內即可。
<div class="avatar">
<span class="avatar_obj">
<i class="icon">
</span>
</div>
<k-avatar>
<i class="icon"></i>
</k-avatar>
配色
Avatar 除了預設之外還有四個基本色，如果有另外掛載 Lazy colour 則可以有更多選擇。
基本色
P
Primary S
Secondary D
Dark L
Light<div class="avatar clr:primary"></div>
<k-avatar clr="primary" />
色票群
在 .avatar 加上 .clr:*。
R
Red O
Orange F
Fire Y
Yellow O
Olive S
Sapphire C
Cyan M
Magenta B
Bone S
Silver M
Momo R
Rosewood S
Skin C
Chartreuse G
Green A
Aegean B
Blue V
Violet B
Brown G
Gray B
Black<div class="avatar clr:red"></div>
<k-avatar clr="red" />
品牌 CI 配色
在 .avatar 加上 .clr:*。
Y
Youtube G
Google P
Pinterest W
Weibo R
Rss S
Snapchat W
Whatsapp W
Wechat L
Line S
Slack T
Tumblr B
BehanceMessager S
Skype D
Dropbox V
Viemo T
Twitter L
Linkedin F
Facebook V
Vk P
Paypal Y
Yahoo V
Vue R
React A
Angular<div class="avatar clr:facebook"></div>
<k-avatar clr="facebook" />
陰影
在 .avatar 加上 .:shadow。
K
<div class="avatar :shadow"></div>
<k-avatar class=":shadow" />
Vue
組件名稱為 <k-avatar>。使用方式只要將圖片路徑帶入 src 或是帶入文字到組件內即可使用。
Avatar Attributes
| 屬性名 | 資料類型 | 值 | 預設 | 範例 | 說明 |
|---|---|---|---|---|---|
| src | String | 無 | null | src="/img/hello.png" | 媒體路徑 |
| width | String | Number | 無 | null | width="160" | 可直接設定寬度於 avatar |
| icon | String | 參照你使用的 iconfont class | null | icon="fab fa-android" | 添加 icon 於 avatar 內，若有設定圖片路徑則不顯示。 |
| sz | String | xs, sm, md, lg, xl, xxl | null | sz="sm" | 變更尺寸大小 |
| clr | String | 參照文件顏色表 | null | clr="primary" | 變更配色 |
| stl | String | square | null | stl="square" | 變更樣式 |
| href | String | 無 | null | href="/product" | 可指定頁面或網址連結。 |
| target | String | _self, _parent, _top, _blank | _self | target="_blank" | 設定連結開啟方式，搭配 href 使用 |
| to | String | Object | 無 | null | to="/" | 使用 Vue router 指定路徑，若同時設定 href 則以 href 優先。 |
| replace | Boolean | true, false | false | :replace="true" | 設定是否記錄於 router 的 history，若為 true 則不紀錄。 |
<k-avatar width="160" />
<k-avatar icon="fab fa-android" />