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"> <li class="skeleton_txt"></li> <li class="skeleton_txt"></li> <li class="skeleton_txt"></li> <li class="skeleton_txt"></li> <li class="skeleton_txt"></li> </ul> </div>
右上

The message port closed before a response was received.

左上

The message port closed before a response was received.

右下

The message port closed before a response was received.

左下

The message port closed before a response was received.

Hello World

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Autem consequatur eligendi illum libero nostrum? Ab, ad consequatur cumque dolores enim esse fuga non. Adipisci cupiditate doloribus pariatur quidem repudiandae ullam.