diff --git a/src/skeleton/README.md b/src/skeleton/README.md index efbd99e2c..3cf31e308 100644 --- a/src/skeleton/README.md +++ b/src/skeleton/README.md @@ -56,6 +56,7 @@ export default { | avatar | Whether to show avatar placeholder | _boolean_ | `false` | | loading | Whether to show skeleton,pass `false` to show child component | _boolean_ | `true` | | animate | Whether to enable animation | _boolean_ | `true` | +| round `v2.8.5` | Whether to show round title and row | _boolean_ | `false` | | title-width | Title width | _number \| string_ | `40%` | | avatar-size | Size of avatar placeholder | _number \| string_ | `32px` | | avatar-shape | Shape of avatar placeholder,can be set to `square` | _string_ | `round` | diff --git a/src/skeleton/README.zh-CN.md b/src/skeleton/README.zh-CN.md index ddb695772..fc69a07ee 100644 --- a/src/skeleton/README.zh-CN.md +++ b/src/skeleton/README.zh-CN.md @@ -60,8 +60,9 @@ export default { | row-width | 段落占位图宽度,可传数组来设置每一行的宽度 | _number \| string \|
(number \| string)[]_ | `100%` | | title | 是否显示标题占位图 | _boolean_ | `false` | | avatar | 是否显示头像占位图 | _boolean_ | `false` | -| loading | 是否显示骨架屏,传`false`时会展示子组件内容 | _boolean_ | `true` | +| loading | 是否显示骨架屏,传 `false` 时会展示子组件内容 | _boolean_ | `true` | | animate | 是否开启动画 | _boolean_ | `true` | +| round `v2.8.5` | 是否将标题和段落显示为圆角风格 | _boolean_ | `false` | | title-width | 标题占位图宽度 | _number \| string_ | `40%` | | avatar-size | 头像占位图大小 | _number \| string_ | `32px` | | avatar-shape | 头像占位图形状,可选值为`square` | _string_ | `round` | diff --git a/src/skeleton/index.less b/src/skeleton/index.less index 2f368e093..95ab87c47 100644 --- a/src/skeleton/index.less +++ b/src/skeleton/index.less @@ -10,7 +10,7 @@ background-color: @skeleton-avatar-background-color; &--round { - border-radius: 100%; + border-radius: @border-radius-max; } } @@ -46,6 +46,13 @@ animation: van-skeleton-blink @skeleton-animation-duration ease-in-out infinite; } + + &--round { + .van-skeleton__row, + .van-skeleton__title { + border-radius: @border-radius-max; + } + } } @keyframes van-skeleton-blink { diff --git a/src/skeleton/index.tsx b/src/skeleton/index.tsx index b430827ed..fa68231d8 100644 --- a/src/skeleton/index.tsx +++ b/src/skeleton/index.tsx @@ -9,6 +9,7 @@ import { DefaultSlots } from '../utils/types'; export type SkeletonProps = { row: number | string; title?: boolean; + round?: boolean; avatar?: boolean; loading: boolean; animate: boolean; @@ -78,7 +79,10 @@ function Skeleton( } return ( -
+
{Avatar()}
{Title()} @@ -90,6 +94,7 @@ function Skeleton( Skeleton.props = { title: Boolean, + round: Boolean, avatar: Boolean, row: { type: [Number, String], diff --git a/src/skeleton/test/__snapshots__/index.spec.js.snap b/src/skeleton/test/__snapshots__/index.spec.js.snap index 2d6923cc0..0ffcccc95 100644 --- a/src/skeleton/test/__snapshots__/index.spec.js.snap +++ b/src/skeleton/test/__snapshots__/index.spec.js.snap @@ -17,6 +17,15 @@ exports[`disable animate 1`] = ` exports[`render chidren 1`] = `
Content
`; +exports[`round prop 1`] = ` +
+
+
+

+
+
+`; + exports[`row-width array 1`] = `
diff --git a/src/skeleton/test/index.spec.js b/src/skeleton/test/index.spec.js index e725c5f82..d46140c9d 100644 --- a/src/skeleton/test/index.spec.js +++ b/src/skeleton/test/index.spec.js @@ -34,6 +34,17 @@ test('avatar shape', () => { expect(wrapper).toMatchSnapshot(); }); +test('round prop', () => { + const wrapper = mount(Skeleton, { + propsData: { + title: true, + round: true, + avatar: true, + }, + }); + expect(wrapper).toMatchSnapshot(); +}); + test('disable animate', () => { const wrapper = mount(Skeleton, { propsData: {