預置內容

在內容尚未載入完畢之前的視覺填充元素。
範例
明暗色系
遵循使用者設定
遵循使用者設定
亮色
暗色
縮放
標準
放大
標準
縮小
<div class="ts-placeholder">
    <div class="text"></div>
    <div class="text"></div>
    <div class="text"></div>
    <div class="text"></div>
</div>
內容
文字

元件裡的 text 即是一行文字,每一行都會有不同的寬度令模擬看起來更真實。

<div class="ts-placeholder">
    <div class="text"></div>
    <div class="text"></div>
    <div class="text"></div>
    <div class="text"></div>
</div>
圖片

預置區塊也可以模擬圖片的樣子,預設為流動符合父容器寬度,通常建議手動指定寬度。

<div class="ts-placeholder">
    <div class="image"></div>
</div>
狀態
準備中

呼吸閃爍的模樣讓使用者意識到內容正在準備中。

<div class="ts-placeholder is-preparing">
    <div class="text"></div>
    <div class="text"></div>
    <div class="text"></div>
</div>
載入中

內容已經獲取但仍在處理且沒有固定完成時間。

<div class="ts-placeholder is-loading">
    <div class="text"></div>
    <div class="text"></div>
    <div class="text"></div>
</div>
項目
標題的

較深色的區塊可以模擬一個標題文字。

<div class="ts-placeholder">
    <div class="text is-header"></div>
    <div class="text"></div>
    <div class="text"></div>
    <div class="text"></div>
</div>
<div class="ts-placeholder">
    <div class="image is-header"></div>
    <div class="text"></div>
    <div class="text"></div>
</div>
寬度

手動指定文字區塊的長短寬度。

<div class="ts-placeholder">
    <div class="text is-extra-short"></div>
    <div class="text is-very-short"></div>
    <div class="text is-short"></div>
    <div class="text"></div>
    <div class="text is-long"></div>
    <div class="text is-very-long"></div>
    <div class="text is-extra-long"></div>
</div>
外觀
圓角的

以圓角修飾區塊的角落。

<div class="ts-placeholder is-rounded">
    <div class="text"></div>
    <div class="text"></div>
    <div class="text"></div>
</div>
由來自 台灣的 Yami Odymel 所設計,當然還有貢獻者們的愛心❤️。原始碼授權方式為 MIT,文件則為 CC 0 公眾領域。還請盡情地使用、分享或一同改進。Tocas UI 是卡莉絲伊繁星的設計語言,而卡莉絲伊繁星屬對空音商事
台灣正體語系協作者:Yami Odymel、coin3x、Sea-n
擁有 Tocas UI 的所屬組織商標