SanshuiLiu
/
tiny-vue
forked from opentiny/tiny-vue
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

fix(skeleton): [skeleton]add skeleton of smb theme (#1410) 

* fix: add smb-theme

* fix: update skeleton of smb theme

* fix: update code review

* fix: update code review

* fix: update code review
This commit is contained in:
James 2024-02-27 10:42:13 +08:00 committed by GitHub
parent 30a622b1e0
commit 625d6a505c
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
9 changed files with 64 additions and 22 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
packages/theme/src/skeleton-item/index.less
View File

@ -8,10 +8,10 @@
&--active {
&.@{skeleton-item-prefix-cls} {
background: linear-gradient(100deg, rgba(255, 255, 255, 0) 40%, rgba(255, 255, 255, 0.5) 50%, rgba(255, 255, 255, 0) 60%) #f2f2f3;
background: var(--ti-skeleton-item-linear-gradient);
background-size: 200% 100%;
background-position-x: 180%;
animation: 2s skeleton-loading ease-in-out infinite;
animation: 1.5s skeleton-loading ease-in-out infinite;
}
}

6
packages/theme/src/skeleton-item/smb-theme.js Normal file
View File

@ -0,0 +1,6 @@
export const tinySkeletonItemSmbTheme = {
'ti-skeleton-item-border-radius': '2px',
'ti-skeleton-item-bg-color': 'var(--ti-common-color-bg-normal)',
'ti-skeleton-item-image-icon-color': 'var(--ti-common-color-bg-normal)',
'ti-skeleton-item-linear-gradient': 'linear-gradient(to right, #fafafa, #ebebeb, #fafafa)'
}

40
packages/theme/src/skeleton-item/vars.less
View File

@ -1,16 +1,32 @@
.component-css-vars-skeleton-item() {
// 骨架屏元素背景设置
--ti-skeleton-item-bg-color: var(--ti-base-color-bg-5, #f5f5f6);
--ti-skeleton-item-border-radius: var(--ti-common-border-radius-1, 4px);
--ti-skeleton-item-image-icon-color: var(--ti-base-color-common-2, #adb0b8);
--ti-skeleton-item-square-height: var(--ti-common-size-4x, 16px);
// 骨架屏元素半径设置
--ti-skeleton-item-border-radius: var(--ti-common-border-radius-1);
// 图片颜色设置
--ti-skeleton-item-image-icon-color: var(--ti-common-color-icon-darkbg-normal, #adb0b8);
// 方形高度设置
--ti-skeleton-item-square-height: var(--ti-common-size-4x);
// 圆角半径设置
--ti-skeleton-item-circle-border-radius: var(--ti-common-border-radius-3, 50%);
--ti-skeleton-item-circle-large-size: var(--ti-common-size-15x, 60px);
--ti-skeleton-item-circle-medium-size: var(--ti-common-size-10x, 40px);
--ti-skeleton-item-circle-small-size: var(--ti-common-size-5x, 20px);
--ti-skeleton-item-image-small-size-height: var(--ti-common-size-15x, 60px);
--ti-skeleton-item-image-small-size-width: var(--ti-common-size-15x, 60px);
--ti-skeleton-item-image-medium-size-height: var(--ti-common-size-25x, 100px);
--ti-skeleton-item-image-medium-size-width: var(--ti-common-size-25x, 100px);
--ti-skeleton-item-image-large-size-height: var(--ti-common-size-50x, 200px);
--ti-skeleton-item-image-large-size-width: var(--ti-common-size-50x, 200px);
// 圆形大尺寸设置
--ti-skeleton-item-circle-large-size: var(--ti-common-size-15x);
// 圆形中尺寸设置
--ti-skeleton-item-circle-medium-size: var(--ti-common-size-10x);
// 圆形小尺寸设置
--ti-skeleton-item-circle-small-size: var(--ti-common-size-5x);
// 小图片高度设置
--ti-skeleton-item-image-small-size-height: var(--ti-common-size-15x);
// 小图片宽度设置
--ti-skeleton-item-image-small-size-width: var(--ti-common-size-15x);
// 中图片高度设置
--ti-skeleton-item-image-medium-size-height: var(--ti-common-size-25x);
// 中图片宽度设置
--ti-skeleton-item-image-medium-size-width: var(--ti-common-size-25x);
// 大图片高度设置
--ti-skeleton-item-image-large-size-height: var(--ti-common-size-50x);
// 大图片宽度设置
--ti-skeleton-item-image-large-size-width: var(--ti-common-size-50x);
// 渐变颜色设置(hide)
--ti-skeleton-item-linear-gradient: linear-gradient(100deg, rgba(255, 255, 255, 0) 40%, rgba(255, 255, 255, 0.5) 50%, rgba(255, 255, 255, 0) 60%) #f2f2f3;
}

7
packages/theme/src/skeleton/index.less
View File

@ -28,7 +28,12 @@
&-item__title {
width: var(--ti-skeleton-title-width);
margin-bottom: var(--ti-skeleton-title-margin-bottom);
height: var(--ti-skeleton-title-height);
}
&-item__rows {
margin-top: var(--ti-skeleton-rows-margin-top);
margin-bottom: var(--ti-skeleton-rows-margin-bottom);
}
&-item--square {

6
packages/theme/src/skeleton/smb-theme.js Normal file
View File

@ -0,0 +1,6 @@
export const tinySkeletonSmbTheme = {
'ti-skeleton-title-width': '20%',
'ti-skeleton-title-height': 'var(--ti-common-space-6x)',
'ti-skeleton-rows-margin-top': 'var(--ti-common-space-6x)',
'ti-skeleton-rows-margin-bottom': 'var(--ti-common-space-6x)'
}

3
packages/theme/src/skeleton/vars.less
View File

@ -6,4 +6,7 @@
--ti-skeleton-title-width: 40%;
--ti-skeleton-row-margin-bottom: var(--ti-common-space-3x, 12px);
--ti-skeleton-last-row-width: 60%;
--ti-skeleton-title-height: var(--ti-common-space-4x);
--ti-skeleton-rows-margin-top: var(--ti-common-space-3x);
--ti-skeleton-rows-margin-bottom: var(--ti-common-space-3x);
}

4
packages/theme/src/theme.config.js
View File

@ -79,5 +79,7 @@ export default {
'user-contact': 'user-contact',
'user-head': 'user-head',
'user-link': 'user-link',
'year-table': 'year-table'
'year-table': 'year-table',
'skeleton': 'skeleton',
'skeleton-item': 'skeleton-item'
}

4
packages/theme/src/vars.less
View File

@ -64,4 +64,6 @@
@import './user-contact/vars.less';
@import './user-head/vars.less';
@import './year-table/vars.less';
@import './transfer/vars.less'
@import './transfer/vars.less';
@import './skeleton/vars.less';
@import './skeleton-item/vars.less'

12
packages/vue/src/skeleton/src/pc.vue
View File

@ -6,11 +6,13 @@
<tiny-skeleton-item variant="circle" class="tiny-skeleton__avatar" v-if="avatar"> </tiny-skeleton-item>
<div class="tiny-skeleton__section">
<tiny-skeleton-item class="tiny-skeleton-item__title"></tiny-skeleton-item>
<tiny-skeleton-item
v-for="(item, index) in rows"
:key="item"
:style="{ width: toPxStyle(rowsWidth[index]) }"
></tiny-skeleton-item>
<div class="tiny-skeleton-item__rows">
<tiny-skeleton-item
v-for="(item, index) in rows"
:key="item"
:style="{ width: toPxStyle(rowsWidth[index]) }"
></tiny-skeleton-item>
</div>
</div>
</div>
</slot>