Skip to content

Commit

Permalink
style(Skeleton): using new style
Browse files Browse the repository at this point in the history
  • Loading branch information
@anlyyao
anlyyao committed Nov 16, 2022
1 parent e3a4cae commit 8efba50
Show file tree
Hide file tree
Showing 19 changed files with 340 additions and 237 deletions.
13 changes: 13 additions & 0 deletions src/skeleton/README.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -16,6 +16,19 @@ isComponent: true
}
```

### 主题定制

CSS 变量名|说明
--|--
--td-skeleton-bg-color | 骨架屏背景颜色
--td-skeleton-row-spacing | 骨架屏行间距
--td-skeleton-text-height | 'text'类型骨架屏行高
--td-skeleton-text-border-radius | 'text'类型骨架屏行圆角
--td-skeleton-rect-height | 'rect'类型骨架屏行高
--td-skeleton-rect-border-radius | 'rect'类型骨架屏行圆角
--td-skeleton-circle-height | 'circle'类型骨架屏行高
--td-skeleton-circle-border-radius | 'circle'类型骨架屏行圆角

## 代码演示

### 类型
Expand Down
267 changes: 165 additions & 102 deletions src/skeleton/__test__/__snapshots__/demo.test.js.snap
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,28 +2,37 @@

exports[`Skeleton Skeleton animation demo works fine 1`] = `
<animation>
<wx-view
class="group"
>
<t-skeleton
animation="flashed"
class="group-avatar"
loading="{{true}}"
rowCol="{{
Array [
Object {
"size": "48px",
"type": "circle",
},
]
}}"
/>
<t-skeleton
animation="flashed"
class="group-content"
loading="{{true}}"
theme="paragraph"
/>
<wx-view>
<wx-view
class="demo-section__desc"
>
渐变加载效果
</wx-view>
<wx-view
class="demo-section__content"
>
<t-skeleton
animation="gradient"
loading="{{true}}"
theme="paragraph"
/>
</wx-view>
</wx-view>
<wx-view>
<wx-view
class="demo-section__desc"
>
闪烁加载效果
</wx-view>
<wx-view
class="demo-section__content"
>
<t-skeleton
animation="flashed"
loading="{{true}}"
theme="paragraph"
/>
</wx-view>
</wx-view>
</animation>
`;
Expand All @@ -35,7 +44,7 @@ exports[`Skeleton Skeleton cell-group demo works fine 1`] = `
>
<t-skeleton
class="group-avatar"
loading="{{false}}"
loading="{{true}}"
rowCol="{{
Array [
Object {
Expand All @@ -47,7 +56,7 @@ exports[`Skeleton Skeleton cell-group demo works fine 1`] = `
/>
<t-skeleton
class="group-content"
loading="{{false}}"
loading="{{true}}"
rowCol="{{
Array [
Object {
Expand All @@ -65,7 +74,7 @@ exports[`Skeleton Skeleton cell-group demo works fine 1`] = `
>
<t-skeleton
class="group-avatar"
loading="{{false}}"
loading="{{true}}"
rowCol="{{
Array [
Object {
Expand All @@ -77,7 +86,7 @@ exports[`Skeleton Skeleton cell-group demo works fine 1`] = `
/>
<t-skeleton
class="group-content"
loading="{{false}}"
loading="{{true}}"
rowCol="{{
Array [
Object {
Expand All @@ -95,57 +104,71 @@ exports[`Skeleton Skeleton cell-group demo works fine 1`] = `

exports[`Skeleton Skeleton grid demo works fine 1`] = `
<grid>
<t-skeleton
loading="{{true}}"
rowCol="{{
Array [
Array [
Object {
"height": "48px",
"width": "48px",
},
Object {
"height": "48px",
"width": "48px",
},
Object {
"height": "48px",
"width": "48px",
},
Object {
"height": "48px",
"width": "48px",
},
Object {
"height": "48px",
"width": "48px",
},
],
<wx-view
class="wrapper"
>
<t-skeleton
loading="{{true}}"
rowCol="{{
Array [
Object {
"height": "16px",
"width": "48px",
},
Object {
"height": "16px",
"width": "48px",
},
Object {
"height": "16px",
"width": "48px",
},
Object {
"height": "16px",
"width": "48px",
},
Object {
"height": "16px",
"width": "48px",
},
],
]
}}"
/>
Array [
Object {
"borderRadius": "6px",
"height": "48px",
"width": "48px",
},
Object {
"borderRadius": "6px",
"height": "48px",
"width": "48px",
},
Object {
"borderRadius": "6px",
"height": "48px",
"width": "48px",
},
Object {
"borderRadius": "6px",
"height": "48px",
"width": "48px",
},
Object {
"borderRadius": "6px",
"height": "48px",
"width": "48px",
},
],
Array [
Object {
"borderRadius": "3px",
"height": "16px",
"width": "48px",
},
Object {
"borderRadius": "3px",
"height": "16px",
"width": "48px",
},
Object {
"borderRadius": "3px",
"height": "16px",
"width": "48px",
},
Object {
"borderRadius": "3px",
"height": "16px",
"width": "48px",
},
Object {
"borderRadius": "3px",
"height": "16px",
"width": "48px",
},
],
]
}}"
/>
</wx-view>
</grid>
`;

Expand All @@ -159,21 +182,13 @@ exports[`Skeleton Skeleton image-group demo works fine 1`] = `
rowCol="{{
Array [
Object {
"height": "171px",
"borderRadius": "12px",
"size": "163.5px",
},
1,
Object {
"width": "107px",
"width": "61%",
},
Array [
Object {
"width": "93px",
},
Object {
"marginLeft": "41px",
"width": "32px",
},
],
]
}}"
/>
Expand All @@ -182,21 +197,13 @@ exports[`Skeleton Skeleton image-group demo works fine 1`] = `
rowCol="{{
Array [
Object {
"height": "171px",
"borderRadius": "12px",
"size": "163.5px",
},
1,
Object {
"width": "107px",
"width": "61%",
},
Array [
Object {
"width": "93px",
},
Object {
"marginLeft": "41px",
"width": "32px",
},
],
]
}}"
/>
Expand All @@ -206,9 +213,65 @@ exports[`Skeleton Skeleton image-group demo works fine 1`] = `

exports[`Skeleton Skeleton theme demo works fine 1`] = `
<theme>
<t-skeleton
loading="{{false}}"
theme="text"
/>
<wx-view>
<wx-view
class="demo-section__desc"
>
头像骨架屏
</wx-view>
<wx-view
class="demo-section__content"
>
<t-skeleton
loading="{{true}}"
theme="avatar"
/>
</wx-view>
</wx-view>
<wx-view>
<wx-view
class="demo-section__desc"
>
图片骨架屏
</wx-view>
<wx-view
class="demo-section__content"
>
<t-skeleton
loading="{{true}}"
theme="image"
/>
</wx-view>
</wx-view>
<wx-view>
<wx-view
class="demo-section__desc"
>
文本骨架屏
</wx-view>
<wx-view
class="demo-section__content"
>
<t-skeleton
loading="{{true}}"
theme="text"
/>
</wx-view>
</wx-view>
<wx-view>
<wx-view
class="demo-section__desc"
>
段落骨架屏
</wx-view>
<wx-view
class="demo-section__content"
>
<t-skeleton
loading="{{true}}"
theme="paragraph"
/>
</wx-view>
</wx-view>
</theme>
`;
Loading

0 comments on commit 8efba50

Please sign in to comment.