Mango UI

Skeleton 骨架屏 pass 0.0.13+

基础用法

基础样式，以及avatar active

展开查看
<mg-skeleton></mg-skeleton>

<mg-skeleton avatar></mg-skeleton>

<mg-skeleton avatar active></mg-skeleton>
1
2
3
4
5

em...不知道这个active够不够明显

行数与行高

第一行将被认作 title，最后一行为文章结尾，样式上会稍短一些
rows rowHeight 作用于内容部分，不会影响到 title，即第一行

分割线↑

分割线↑

展开查看
<mg-skeleton :rows="2"></mg-skeleton>

<mg-skeleton :row-height="'8px'"></mg-skeleton>

<mg-skeleton :row-height="['8px','48px','8px']"></mg-skeleton>
1
2
3
4
5

自定义颜色

rowsColor 同样只作用于内容部分，因此需要配合titleColor，avatarColor使用，任意搭配

分割线↑

展开查看
<mg-skeleton :rows-color="'#e5eecc'"></mg-skeleton>

<mg-skeleton 
  avatar 
  :rows-color="['orange','#e5eecc','#e5eecc','orange']" 
  :rows="4" 
  :title-color="'orange'"
  :avatar-color="'rgb(150, 185, 125)'">
</mg-skeleton>
1
2
3
4
5
6
7
8
9

...当然了请原谅demo里我随意弄的颜色搭配，多少的是不大好看

Switch Attributes

参数说明类型可选值默认值
avatar是否展示头像boolean-false
active加载动画boolean-false
rows行数（不包括标题!）number/Array-3
rowHeight行高string/Array--
rowsColor内容部分颜色string/Array--
titleColor标题颜色string--
avatarColor头像部分颜色string--