blackteay/vant
1
0
Fork 0
mirror of https://gitee.com/vant-contrib/vant.git synced 2025-04-06 03:57:59 +08:00
Code Issues Projects Releases Wiki Activity

feat(Skeleton): add @skeleton-title-width less var (#7557)

Browse Source
This commit is contained in:
neverland 2020-11-15 08:56:32 +08:00 committed by GitHub
parent 3f4e0a04c5
commit 3e990f8d79
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
5 changed files with 9 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
src/skeleton/index.less
View File

@ -31,6 +31,7 @@
} }
&__title { &__title {
width: @skeleton-title-width;
margin: 0; margin: 0;
} }

9
src/skeleton/index.tsx
View File

@ -13,9 +13,9 @@ export type SkeletonProps = {
avatar?: boolean; avatar?: boolean;
loading: boolean; loading: boolean;
animate: boolean; animate: boolean;
avatarSize: number | string; titleWidth?: number | string;
avatarSize?: number | string;
avatarShape: 'square' | 'round'; avatarShape: 'square' | 'round';
titleWidth: number | string;
rowWidth: number | string | (number | string)[]; rowWidth: number | string | (number | string)[];
}; };
@ -96,6 +96,7 @@ Skeleton.props = {
title: Boolean, title: Boolean,
round: Boolean, round: Boolean,
avatar: Boolean, avatar: Boolean,
titleWidth: [Number, String],
avatarSize: [Number, String], avatarSize: [Number, String],
row: { row: {
type: [Number, String], type: [Number, String],
@ -113,10 +114,6 @@ Skeleton.props = {
type: String, type: String,
default: 'round', default: 'round',
}, },
titleWidth: {
type: [Number, String],
default: '40%',
},
rowWidth: { rowWidth: {
type: [Number, String, Array], type: [Number, String, Array],
default: DEFAULT_ROW_WIDTH, default: DEFAULT_ROW_WIDTH,

6
src/skeleton/test/__snapshots__/demo.spec.js.snap
View File

@ -5,7 +5,7 @@ exports[`renders demo correctly 1`] = `
<div> <div>
<div class="van-skeleton van-skeleton--animate"> <div class="van-skeleton van-skeleton--animate">
<div class="van-skeleton__content"> <div class="van-skeleton__content">
<h3 class="van-skeleton__title" style="width: 40%;"></h3> <h3 class="van-skeleton__title"></h3>
<div class="van-skeleton__row" style="width: 100%;"></div> <div class="van-skeleton__row" style="width: 100%;"></div>
<div class="van-skeleton__row" style="width: 100%;"></div> <div class="van-skeleton__row" style="width: 100%;"></div>
<div class="van-skeleton__row" style="width: 60%;"></div> <div class="van-skeleton__row" style="width: 60%;"></div>
@ -16,7 +16,7 @@ exports[`renders demo correctly 1`] = `
<div class="van-skeleton van-skeleton--animate"> <div class="van-skeleton van-skeleton--animate">
<div class="van-skeleton__avatar van-skeleton__avatar--round"></div> <div class="van-skeleton__avatar van-skeleton__avatar--round"></div>
<div class="van-skeleton__content"> <div class="van-skeleton__content">
<h3 class="van-skeleton__title" style="width: 40%;"></h3> <h3 class="van-skeleton__title"></h3>
<div class="van-skeleton__row" style="width: 100%;"></div> <div class="van-skeleton__row" style="width: 100%;"></div>
<div class="van-skeleton__row" style="width: 100%;"></div> <div class="van-skeleton__row" style="width: 100%;"></div>
<div class="van-skeleton__row" style="width: 60%;"></div> <div class="van-skeleton__row" style="width: 60%;"></div>
@ -30,7 +30,7 @@ exports[`renders demo correctly 1`] = `
<div class="van-skeleton van-skeleton--animate"> <div class="van-skeleton van-skeleton--animate">
<div class="van-skeleton__avatar van-skeleton__avatar--round"></div> <div class="van-skeleton__avatar van-skeleton__avatar--round"></div>
<div class="van-skeleton__content"> <div class="van-skeleton__content">
<h3 class="van-skeleton__title" style="width: 40%;"></h3> <h3 class="van-skeleton__title"></h3>
<div class="van-skeleton__row" style="width: 100%;"></div> <div class="van-skeleton__row" style="width: 100%;"></div>
<div class="van-skeleton__row" style="width: 100%;"></div> <div class="van-skeleton__row" style="width: 100%;"></div>
<div class="van-skeleton__row" style="width: 60%;"></div> <div class="van-skeleton__row" style="width: 60%;"></div>

2
src/skeleton/test/__snapshots__/index.spec.js.snap
View File

@ -21,7 +21,7 @@ exports[`round prop 1`] = `
<div class="van-skeleton van-skeleton--animate van-skeleton--round"> <div class="van-skeleton van-skeleton--animate van-skeleton--round">
<div class="van-skeleton__avatar van-skeleton__avatar--round"></div> <div class="van-skeleton__avatar van-skeleton__avatar--round"></div>
<div class="van-skeleton__content"> <div class="van-skeleton__content">
<h3 class="van-skeleton__title" style="width: 40%;"></h3> <h3 class="van-skeleton__title"></h3>
</div> </div>
</div> </div>
`; `;

1
src/style/var.less
View File

@ -648,6 +648,7 @@
@skeleton-row-height: 16px; @skeleton-row-height: 16px;
@skeleton-row-background-color: @active-color; @skeleton-row-background-color: @active-color;
@skeleton-row-margin-top: @padding-sm; @skeleton-row-margin-top: @padding-sm;
@skeleton-title-width: 40%;
@skeleton-avatar-size: 32px; @skeleton-avatar-size: 32px;
@skeleton-avatar-background-color: @active-color; @skeleton-avatar-background-color: @active-color;
@skeleton-animation-duration: 1.2s; @skeleton-animation-duration: 1.2s;