台灣正體

大頭貼

以較小的尺寸呈現某個人物的代表圖像。
範例
明暗色系
遵循使用者設定
遵循使用者設定
亮色
暗色
縮放
標準
放大
標準
縮小
不重要預置圖片,僅作為範例用
<span class="ts-avatar">
    <img src="user.png">
</span>
外觀
文字的

大頭貼在沒有圖片的時候也能夠用使用者的名稱縮寫替代。

YO
<span class="ts-avatar is-text">
    YO
</span>
<span class="ts-avatar is-text"></span>
圓角的

使整個頭貼成為圓形,圖片需為正方形。

不重要預置圖片,僅作為範例用
<span class="ts-avatar is-circular">
    <img src="user.png">
</span>
邊框的

針對某些邊界不明顯的頭貼可以為其描繪邊緣框線。

不重要預置圖片,僅作為範例用
<span class="ts-avatar is-bordered">
    <img src="user.png">
</span>
群組的

將部份使用者以群組呈現。

+3 不重要預置圖片,僅作為範例用 US 不重要預置圖片,僅作為範例用
<span class="ts-avatar is-group">
    <span class="ts-avatar is-circular is-text">
        +3
    </span>
    <span class="ts-avatar">
        <img src="user.png">
    </span>
    <span class="ts-avatar is-text">
        US
    </span>
    <span class="ts-avatar">
        <img src="user.png">
    </span>
</span>
尺寸

以不同的大小尺寸呈現頭貼。

不重要預置圖片,僅作為範例用 不重要預置圖片,僅作為範例用 不重要預置圖片,僅作為範例用
<span class="ts-avatar is-small">
    <img src="user.png">
</span>
<span class="ts-avatar">
    <img src="user.png">
</span>
<span class="ts-avatar is-large">
    <img src="user.png">
</span>
在尋找相似的元件嗎?
由來自 台灣的 Yami Odymel 所設計,當然還有貢獻者們的愛心❤️。原始碼授權方式為 MIT,文件則為 CC 0 公眾領域。還請盡情地使用、分享或一同改進。Tocas UI 是卡莉絲伊繁星的設計語言,而卡莉絲伊繁星屬對空音商事
台灣正體語系協作者:Yami Odymel、coin3x、Sea-n
擁有 Tocas UI 的所屬組織商標