Skeleton

用於資料讀取完成前的模擬預覽,使用類別為 .skeleton 並以此做為子元件前綴詞。Skeleton 主要以模擬圖形與模擬文字組成,排列方式可與 Grid System 搭配來決定你所需要的版型。


模擬文字

模擬文字的第一個 .skeleton_txt 會視為標題,行數可以由 <li> 的數量來決定。

<div class="skeleton"> <ul class="skeleton_content"> <li class="skeleton_txt"></li> <li class="skeleton_txt"></li> <li class="skeleton_txt"></li> <li class="skeleton_txt"></li> </ul> </div>

模擬圖片

模擬圖片的比例可使用 .u-ratio:{*} 來選擇你要的。

<div class="skeleton"> <div class="skeleton_img"></div> </div>

寬度比

Skeleton 的圖文之間的比例預設為 1:1,可使用 .f-col:{*} 來決定圖與文之間的比例關係,同時也可以依照 Breakpoints 來做 RWD。

<div class="skeleton"> <div class="skeleton_img u-ratio:5by4 f-col:12 [email protected]:3"></div> <ul class="skeleton_content"></ul> </div>