diff --git a/example/app.json b/example/app.json index f005f5530..37f8a635e 100644 --- a/example/app.json +++ b/example/app.json @@ -109,7 +109,6 @@ "t-dropdown-item": "tdesign-miniprogram/dropdown-menu/dropdown-item", "t-drawer": "tdesign-miniprogram/drawer/drawer", "t-pull-down-refresh": "tdesign-miniprogram/pull-down-refresh/pull-down-refresh", - "t-skeleton": "tdesign-miniprogram/skeleton/skeleton", "t-footer": "tdesign-miniprogram/footer/footer", "t-divider": "tdesign-miniprogram/divider/divider", "t-empty": "tdesign-miniprogram/empty/empty", diff --git a/src/skeleton/README.md b/src/skeleton/README.md index a44c7df9e..9c7334ffd 100644 --- a/src/skeleton/README.md +++ b/src/skeleton/README.md @@ -17,29 +17,28 @@ isComponent: true ## 代码演示 -### 基础骨架屏 +### 类型 +#### 基础骨架屏 - +{{ theme }} -```html - -``` +#### 宫格骨架屏 + +{{ grid }} + +#### 单元格骨架屏 + +{{ cell-group }} + +#### 图片组合骨架屏 + +{{ image-group }} + +### 动画 +#### 渐变加载效果 + +{{ animation }} -```js -data: { - rowCol: [ - { width: '566rpx', height: '32rpx' }, - { width: '100%', height: '32rpx' }, - { width: '100%', height: '32rpx' }, - { width: '314rpx', height: '32rpx' }, - ], -}, -``` ## API @@ -48,7 +47,7 @@ data: { | 名称 | 类型 | 默认值 | 说明 | 必传 | | ---------------- | ------- | --------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ---- | | animation | String | - | 动画效果，有「渐变加载动画」和「闪烁加载动画」两种。值为空则表示没有动画。可选项：gradient/flashed | N | -| external-classes | Array | - | 组件类名，分别用于设置组件外层元素、头像、图片、文本等元素类名。`['t-class', 't-class-avatar', 't-class-image', 't-class-text']` | N | -| loading | Boolean | - | 是否为加载状态，如果是则显示骨架图，如果不是则显示加载完成的内容 | N | -| row-col | Array | [1, 1, 1, { width: '70%' }] | 用于设置行列数量、宽度高度、间距等。【示例一】，`[1, 1, 2]` 表示输出三行骨架图，第一行一列，第二行一列，第三行两列。【示例二】，`[1, 1, { width: '100px' }]` 表示自定义第三行的宽度为 `100px`。【示例三】，`[1, 2, [{ width, height }, { width, height, marginLeft }]]` 表示第三行有两列，且自定义宽度、高度和间距。TS 类型：`SkeletonRowCol`。[详细类型定义](https://github.com/Tencent/tdesign-miniprogram/tree/develop/src/skeleton/type.ts) | N | -| theme | String | text | 骨架图风格，有基础、头像组合等两大类。可选项：text/avatar-text | N | +| external-classes | Array | - | 组件类名，分别用于设置组件外层、每一列等元素类名。`['t-class', 't-class-col']` | N | +| loading | Boolean | - | 是否为加载状态，如果是则显示骨架图，如果不是则显示加载完成的内容 | N | +| row-col | Array |- | 用于设置行列数量、宽度高度、间距等。【示例一】，`[1, 1, 2]` 表示输出三行骨架图，第一行一列，第二行一列，第三行两列。【示例二】，`[1, 1, { width: '100px' }]` 表示自定义第三行的宽度为 `100px`。【示例三】，`[1, 2, [{ width, height }, { width, height, marginLeft }]]` 表示第三行有两列，且自定义宽度、高度和间距。TS 类型：`SkeletonRowCol`。[详细类型定义](https://github.com/Tencent/tdesign-miniprogram/tree/develop/src/skeleton/type.ts) | N | +| theme | String | text | 骨架图风格，有头像、图片、文本、段落等5大类。可选项：avatar/image/text/paragraph | N | diff --git a/src/skeleton/_example/animation/index.js b/src/skeleton/_example/animation/index.js new file mode 100644 index 000000000..2fb2bbfb9 --- /dev/null +++ b/src/skeleton/_example/animation/index.js @@ -0,0 +1,6 @@ +Component({ + data: { + rowColsAvater: [{ size: '48px', type: 'circle' }], + animation: 'flashed', + }, +}); diff --git a/src/skeleton/_example/animation/index.json b/src/skeleton/_example/animation/index.json new file mode 100644 index 000000000..ce39d3a4f --- /dev/null +++ b/src/skeleton/_example/animation/index.json @@ -0,0 +1,6 @@ +{ + "component": true, + "usingComponents": { + "t-skeleton": "tdesign-miniprogram/skeleton/skeleton" + } +} diff --git a/src/skeleton/_example/animation/index.wxml b/src/skeleton/_example/animation/index.wxml new file mode 100644 index 000000000..99014f94c --- /dev/null +++ b/src/skeleton/_example/animation/index.wxml @@ -0,0 +1,4 @@ + + + + diff --git a/src/skeleton/_example/animation/index.wxss b/src/skeleton/_example/animation/index.wxss new file mode 100644 index 000000000..f9add2415 --- /dev/null +++ b/src/skeleton/_example/animation/index.wxss @@ -0,0 +1,12 @@ +.group { + display: flex; + margin-bottom: 32rpx; +} + +.group-avatar { + margin-right: 24rpx; +} + +.group-content { + width: 566rpx; +} diff --git a/src/skeleton/_example/cell-group/index.js b/src/skeleton/_example/cell-group/index.js new file mode 100644 index 000000000..bf73528a5 --- /dev/null +++ b/src/skeleton/_example/cell-group/index.js @@ -0,0 +1,17 @@ +Component({ + properties: { + theme: { + type: String, + value: 'text', + }, + loading: { + type: Boolean, + }, + }, + + data: { + rowColsAvater: [{ size: '48px', type: 'circle' }], + rowColsImage: [{ size: '48px', type: 'rect' }], + rowColsContent: [{ width: '50%' }, { width: '100%' }], + }, +}); diff --git a/src/skeleton/_example/cell-group/index.json b/src/skeleton/_example/cell-group/index.json new file mode 100644 index 000000000..ce39d3a4f --- /dev/null +++ b/src/skeleton/_example/cell-group/index.json @@ -0,0 +1,6 @@ +{ + "component": true, + "usingComponents": { + "t-skeleton": "tdesign-miniprogram/skeleton/skeleton" + } +} diff --git a/src/skeleton/_example/cell-group/index.wxml b/src/skeleton/_example/cell-group/index.wxml new file mode 100644 index 000000000..ab5fe85df --- /dev/null +++ b/src/skeleton/_example/cell-group/index.wxml @@ -0,0 +1,9 @@ + + + + + + + + + diff --git a/src/skeleton/_example/cell-group/index.wxss b/src/skeleton/_example/cell-group/index.wxss new file mode 100644 index 000000000..8a39dd5ac --- /dev/null +++ b/src/skeleton/_example/cell-group/index.wxss @@ -0,0 +1,13 @@ +.group { + display: flex; + align-items: center; + margin-bottom: 32rpx; +} + +.group-avatar { + margin-right: 24rpx; +} + +.group-content { + width: 566rpx; +} diff --git a/src/skeleton/_example/grid/index.js b/src/skeleton/_example/grid/index.js new file mode 100644 index 000000000..41907cba1 --- /dev/null +++ b/src/skeleton/_example/grid/index.js @@ -0,0 +1,20 @@ +Component({ + data: { + grid: [ + [ + { width: '48px', height: '48px' }, + { width: '48px', height: '48px' }, + { width: '48px', height: '48px' }, + { width: '48px', height: '48px' }, + { width: '48px', height: '48px' }, + ], + [ + { width: '48px', height: '16px' }, + { width: '48px', height: '16px' }, + { width: '48px', height: '16px' }, + { width: '48px', height: '16px' }, + { width: '48px', height: '16px' }, + ], + ], + }, +}); diff --git a/src/skeleton/_example/grid/index.json b/src/skeleton/_example/grid/index.json new file mode 100644 index 000000000..ce39d3a4f --- /dev/null +++ b/src/skeleton/_example/grid/index.json @@ -0,0 +1,6 @@ +{ + "component": true, + "usingComponents": { + "t-skeleton": "tdesign-miniprogram/skeleton/skeleton" + } +} diff --git a/src/skeleton/_example/grid/index.wxml b/src/skeleton/_example/grid/index.wxml new file mode 100644 index 000000000..b1482aabb --- /dev/null +++ b/src/skeleton/_example/grid/index.wxml @@ -0,0 +1 @@ + diff --git a/src/skeleton/_example/grid/index.wxss b/src/skeleton/_example/grid/index.wxss new file mode 100644 index 000000000..e69de29bb diff --git a/src/skeleton/_example/image-group/index.js b/src/skeleton/_example/image-group/index.js new file mode 100644 index 000000000..85f18decc --- /dev/null +++ b/src/skeleton/_example/image-group/index.js @@ -0,0 +1,5 @@ +Component({ + data: { + rowCol: [{ height: '171px' }, 1, { width: '107px' }, [{ width: '93px' }, { width: '32px', marginLeft: '41px' }]], + }, +}); diff --git a/src/skeleton/_example/image-group/index.json b/src/skeleton/_example/image-group/index.json new file mode 100644 index 000000000..ce39d3a4f --- /dev/null +++ b/src/skeleton/_example/image-group/index.json @@ -0,0 +1,6 @@ +{ + "component": true, + "usingComponents": { + "t-skeleton": "tdesign-miniprogram/skeleton/skeleton" + } +} diff --git a/src/skeleton/_example/image-group/index.wxml b/src/skeleton/_example/image-group/index.wxml new file mode 100644 index 000000000..095abedea --- /dev/null +++ b/src/skeleton/_example/image-group/index.wxml @@ -0,0 +1,4 @@ + + + + diff --git a/src/skeleton/_example/image-group/index.wxss b/src/skeleton/_example/image-group/index.wxss new file mode 100644 index 000000000..a99a8d6d3 --- /dev/null +++ b/src/skeleton/_example/image-group/index.wxss @@ -0,0 +1,4 @@ +.group { + display: flex; + justify-content: space-between; +} diff --git a/src/skeleton/_example/skeleton.json b/src/skeleton/_example/skeleton.json index f59178634..f84c2790a 100644 --- a/src/skeleton/_example/skeleton.json +++ b/src/skeleton/_example/skeleton.json @@ -2,6 +2,11 @@ "navigationBarTitleText": "Skeleton 骨架屏", "navigationBarBackgroundColor": "#fff", "usingComponents": { - "t-demo": "../../components/demo-block/index" + "t-skeleton": "tdesign-miniprogram/skeleton/skeleton", + "theme": "./theme", + "grid": "./grid", + "cell-group": "./cell-group", + "image-group": "./image-group", + "animation": "./animation" } } diff --git a/src/skeleton/_example/skeleton.less b/src/skeleton/_example/skeleton.less index e8eef0698..c448acbce 100644 --- a/src/skeleton/_example/skeleton.less +++ b/src/skeleton/_example/skeleton.less @@ -1,17 +1,6 @@ page { background-color: #fff; - - .skeleton-text { - border-radius: 16rpx; - } - - .container-flex { - display: flex; - justify-content: space-between; + .box { margin: 32rpx; } - - .none-margin { - margin: 0 !important; - } } diff --git a/src/skeleton/_example/skeleton.ts b/src/skeleton/_example/skeleton.ts index cb3ce3e87..4e5de883f 100644 --- a/src/skeleton/_example/skeleton.ts +++ b/src/skeleton/_example/skeleton.ts @@ -1,30 +1,26 @@ Page({ data: { - rowCol: [ - { width: '686rpx', height: '32rpx' }, - 2, - 3, - [ - { width: '38rpx', height: '32rpx', marginRight: '20rpx', marginLeft: '20rpx' }, - { width: '38rpx', height: '32rpx' }, - ], - { width: '380rpx' }, - ], - rowCol1: [{ width: '686rpx', height: '32rpx' }, 1, 1, { width: '380rpx', height: '32rpx' }], - rowCol2: [ - { width: '566rpx', height: '32rpx' }, - { width: '100%', height: '32rpx' }, - { width: '100%', height: '32rpx' }, - { width: '314rpx', height: '32rpx' }, - ], - rowCol3: [ - { width: '332rpx', height: '342rpx' }, - { width: '332rpx', height: '32rpx' }, - { width: '214rpx', height: '32rpx' }, - [ - { width: '186rpx', height: '32rpx' }, - { width: '64rpx', height: '32rpx', marginLeft: '82rpx' }, - ], + themeList: [ + { + title: '头像骨架屏', + value: 'avatar', + loading: true, + }, + { + title: '图片骨架屏', + value: 'image', + loading: true, + }, + { + title: '文本骨架屏', + value: 'text', + loading: true, + }, + { + title: '段落骨架屏', + value: 'paragraph', + loading: true, + }, ], }, }); diff --git a/src/skeleton/_example/skeleton.wxml b/src/skeleton/_example/skeleton.wxml index bbccc1631..b1d5e82fe 100644 --- a/src/skeleton/_example/skeleton.wxml +++ b/src/skeleton/_example/skeleton.wxml @@ -2,20 +2,34 @@ Skeleton 骨架屏 用于等待加载内容所展示的占位图形组合，有动态效果加载效果，减少用户等待焦虑。 - 基础 - - 头像组合 - - 图片组合 - - - + + {{themeItem.title}} + + + + + 宫格骨架屏 + + + + 单元格骨架屏 + + + + 图片组合骨架屏 + + + 渐变加载动画 - + + + 闪烁加载动画 - + + + diff --git a/src/skeleton/_example/theme/index.js b/src/skeleton/_example/theme/index.js new file mode 100644 index 000000000..ac00052ea --- /dev/null +++ b/src/skeleton/_example/theme/index.js @@ -0,0 +1,11 @@ +Component({ + properties: { + theme: { + type: String, + value: 'text', + }, + loading: { + type: Boolean, + }, + }, +}); diff --git a/src/skeleton/_example/theme/index.json b/src/skeleton/_example/theme/index.json new file mode 100644 index 000000000..ce39d3a4f --- /dev/null +++ b/src/skeleton/_example/theme/index.json @@ -0,0 +1,6 @@ +{ + "component": true, + "usingComponents": { + "t-skeleton": "tdesign-miniprogram/skeleton/skeleton" + } +} diff --git a/src/skeleton/_example/theme/index.wxml b/src/skeleton/_example/theme/index.wxml new file mode 100644 index 000000000..ab7afc55d --- /dev/null +++ b/src/skeleton/_example/theme/index.wxml @@ -0,0 +1 @@ + diff --git a/src/skeleton/_example/theme/index.wxss b/src/skeleton/_example/theme/index.wxss new file mode 100644 index 000000000..e69de29bb diff --git a/src/skeleton/props.ts b/src/skeleton/props.ts index 71c5d4f52..b4a6cb7e2 100644 --- a/src/skeleton/props.ts +++ b/src/skeleton/props.ts @@ -22,7 +22,6 @@ const props: TdSkeletonProps = { /** 用于设置行列数量、宽度高度、间距等。【示例一】，`[1, 1, 2]` 表示输出三行骨架图，第一行一列，第二行一列，第三行两列。【示例二】，`[1, 1, { width: '100px' }]` 表示自定义第三行的宽度为 `100px`。【示例三】，`[1, 2, [{ width, height }, { width, height, marginLeft }]]` 表示第三行有两列，且自定义宽度、高度和间距 */ rowCol: { type: Array, - value: [1, 1, 1, { width: '70%' }], }, /** 骨架图风格，有基础、头像组合等两大类 */ theme: { diff --git a/src/skeleton/skeleton.less b/src/skeleton/skeleton.less index 506d17046..3188c29c9 100644 --- a/src/skeleton/skeleton.less +++ b/src/skeleton/skeleton.less @@ -1,68 +1,114 @@ -// @import (css) '../common/index.wxss'; @import '../common/style/index.less'; +@skeleton-animation-gradient: rgba(0, 0, 0, 4%); +@skeleton-animation-flashed: rgba(90%, 90%, 90%, 0.3); +@skeleton-background-color: rgba(238, 238, 238, 1); +@text-height-default: 16px; +@rect-height-default: 16px; +@circle-height-default: 48px; +@row-margin-bottom: 16px; +@border-radius-text: 2px; +@border-radius-rect: 4px; +@border-radius-circle: 50%; + .@{prefix}-skeleton { - display: flex; box-sizing: border-box; - margin: 32rpx; - - &__avatar { - flex-shrink: 0; - background-color: rgba(238, 238, 238, 1); - height: 96rpx; - width: 96rpx; - border-radius: 100%; - margin-right: 24rpx; + + &__row { + display: flex; + margin-bottom: @row-margin-bottom; + align-items: center; + justify-content: space-between; } - &__item { - background-color: rgba(238, 238, 238, 1); - border-radius: 4rpx; + &__row:only-child, + &__row:last-child { + margin-bottom: 0; } - &__row { + &__col { + background-color: @skeleton-background-color; + border-radius: @border-radius-text; display: flex; + align-items: center; + justify-content: center; - &:not(:first-child) { - margin-top: 24rpx; + &:first-child:last-child, + &:last-child { + margin-right: 0; } } -} -.@{prefix}-skeleton--animate-flashed { - animation: t-flashed 0.6s infinite alternate; -} + &--type { + &-text { + width: 100%; + height: @text-height-default; + border-radius: @border-radius-text; + } -@keyframes t-flashed { - 0% { - opacity: 1; - } + &-rect { + width: 100%; + height: @rect-height-default; + border-radius: @border-radius-rect; + } - 100% { - opacity: 0.6; + &-circle { + width: @circle-height-default; + height: @circle-height-default; + border-radius: @border-radius-circle; + flex-shrink: 0; + } } -} -.@{prefix}-skeleton--animate-gradient { - .t-skeleton__item { - background: linear-gradient( - to right, - rgba(238, 238, 238, 1) 10%, - rgba(238, 238, 238, 0.4) 20%, - rgba(238, 238, 238, 1) 30% - ); - background-size: 400% 50%; - width: 100%; - animation: t-gradient 1s ease-in-out infinite; + &--animation { + &-gradient { + position: relative; + overflow-x: hidden; + + &::after { + content: ' '; + position: absolute; + bottom: 0; + left: 0; + right: 0; + top: 0; + background: linear-gradient( + 90deg, + rgba(255, 255, 255, 0%), + @skeleton-animation-gradient, + rgba(255, 255, 255, 0%) + ); + animation: t-skeleton--gradient 1.5s linear 2s infinite; + } + } + + &-flashed { + animation: t-skeleton--flashed 2s linear 2s infinite; + } } -} -@keyframes t-gradient { - 0% { - background-position: 100% 50%; + @keyframes t-skeleton--gradient { + 0% { + transform: translateX(-100%) skewX(-15deg); + } + + 100% { + transform: translateX(100%) skewX(-15deg); + } } - 100% { - background-position: 0% 50%; + @keyframes t-skeleton--flashed { + 0% { + opacity: 1; + } + + 50% { + background-color: @skeleton-animation-flashed; + opacity: 0.3; + } + + 100% { + opacity: 1; + } } } diff --git a/src/skeleton/skeleton.ts b/src/skeleton/skeleton.ts index 104774cf9..e3d1e80b1 100644 --- a/src/skeleton/skeleton.ts +++ b/src/skeleton/skeleton.ts @@ -1,45 +1,121 @@ import { SuperComponent, wxComponent } from '../common/src/index'; import config from '../common/config'; import props from './props'; +import { SkeletonRowColObj } from './type'; +import { ClassName, Styles } from '../common/common'; import { isNumber } from '../common/utils'; const { prefix } = config; const name = `${prefix}-skeleton`; +const ThemeMap = { + avatar: [{ type: 'circle', height: '64px', width: '64px' }], + image: [{ type: 'rect', height: '64px', width: '64px' }], + text: [ + 1, + [ + { width: '24%', height: '16px', marginRight: '16px' }, + { width: '76%', height: '16px' }, + ], + ], + paragraph: [1, 1, 1, { width: '55%' }], +}; + @wxComponent() export default class Skeleton extends SuperComponent { - externalClasses = ['t-class', 't-class-avatar', 't-class-text']; + externalClasses = ['t-class', 't-class-col']; properties = props; observers = { - rowCol(this, val) { - const rowStyles = []; - const isNumList = []; - if (Array.isArray(val)) { - val.forEach((v) => { - if (isNumber(v)) { - const curArr = []; - const defaultWidth = `${(686 - 32 * (v - 1)) / v}rpx`; - // eslint-disable-next-line no-plusplus - for (let i = 0; i < v; i++) { - curArr.push({ width: defaultWidth, height: '32rpx' }); - } - rowStyles.push(curArr); - isNumList.push(true); + rowCol() { + this.init(); + }, + }; + + lifetimes = { + attached() { + this.init(); + }, + }; + + methods = { + init() { + const { theme, rowCol } = this.properties; + const rowCols = []; + if (rowCol.length) { + rowCols.push(...rowCol); + } else { + rowCols.push(...ThemeMap[theme || 'text']); + } + + const parsedRowcols = rowCols.map((item) => { + if (isNumber(item)) { + return [ + { + class: this.getColItemClass({ type: 'text' }), + style: {}, + }, + ]; + } + if (Array.isArray(item)) { + return item.map((col) => { + return { + ...col, + class: this.getColItemClass(col), + style: this.getColItemStyle(col), + }; + }); + } + + const nItem = item as SkeletonRowColObj; + return [ + { + ...nItem, + class: this.getColItemClass(nItem), + style: this.getColItemStyle(nItem), + }, + ]; + }); + + this.setData({ + parsedRowcols, + }); + }, + getColItemClass(obj: SkeletonRowColObj): ClassName { + return [`${name}__col`, `${name}--type-${obj.type || 'text'}`, `${name}--animation-${this.properties.animation}`]; + }, + + getColItemStyle(obj: SkeletonRowColObj): Styles { + const styleName = [ + 'width', + 'height', + 'marginRight', + 'marginLeft', + 'margin', + 'size', + 'background', + 'backgroundColor', + 'borderRadius', + ]; + const style: Styles = {}; + styleName.forEach((name) => { + if (name in obj) { + const px = isNumber(obj[name]) ? `${obj[name]}px` : obj[name]; + if (name === 'size') { + [style.width, style.height] = [px, px]; } else { - rowStyles.push(Array.isArray(v) ? v : [v]); - isNumList.push(false); + style[name] = px; } - }); - } - this.setData({ rowStyles, isNumList }); + } + }); + return style; }, }; data = { + prefix, classPrefix: name, - isNumList: [], - rowStyles: [], + parsedRowcols: [], }; } diff --git a/src/skeleton/skeleton.wxml b/src/skeleton/skeleton.wxml index 7de0a7cbf..5c4cacacc 100644 --- a/src/skeleton/skeleton.wxml +++ b/src/skeleton/skeleton.wxml @@ -1,22 +1,15 @@ - - - - + + + + + diff --git a/src/skeleton/skeleton.wxs b/src/skeleton/skeleton.wxs new file mode 100644 index 000000000..c5edd48d6 --- /dev/null +++ b/src/skeleton/skeleton.wxs @@ -0,0 +1,33 @@ +var getStyle = function (object) { + var styleStr = ''; + styleStr += + 'width:' + + object.width + + ';' + + 'height:' + + (object.height || '16px') + + ';' + + 'background:' + + object.background + + ';' + + 'background-color:' + + object.backgroundColor + + ';' + + 'margin:' + + object.margin + + ';' + + 'margin-right:' + + object.marginRight + + ';' + + 'margin-left:' + + object.marginLeft + + ';' + + 'border-radius:' + + object.borderRadius + + ';'; + return styleStr; +}; + +module.exports = { + getStyle: getStyle, +}; diff --git a/src/skeleton/type.ts b/src/skeleton/type.ts index 242300dd9..1f03c4f71 100644 --- a/src/skeleton/type.ts +++ b/src/skeleton/type.ts @@ -32,7 +32,6 @@ export interface TdSkeletonProps { }; /** * 用于设置行列数量、宽度高度、间距等。【示例一】，`[1, 1, 2]` 表示输出三行骨架图，第一行一列，第二行一列，第三行两列。【示例二】，`[1, 1, { width: '100px' }]` 表示自定义第三行的宽度为 `100px`。【示例三】，`[1, 2, [{ width, height }, { width, height, marginLeft }]]` 表示第三行有两列，且自定义宽度、高度和间距 - * @default [1, 1, 1, { width: '70%' }] */ rowCol?: { type: ArrayConstructor; @@ -45,11 +44,19 @@ export interface TdSkeletonProps { */ theme?: { type: StringConstructor; - value?: 'text' | 'avatar-text'; + value?: 'avatar' | 'image' | 'text' | 'paragraph'; required?: boolean; }; -}; +} export type SkeletonRowCol = Array>; -export interface SkeletonRowColObj { width?: string; height?: string; marginRight?: string; marginLeft?: string; margin?: string; }; +export interface SkeletonRowColObj { + width?: string; + height?: string; + size?: string; + marginRight?: string; + marginLeft?: string; + margin?: string; + type?: 'rect' | 'circle' | 'text'; +}