feat: add new component Skeleton

packages/arcodesign/components/index.ts

@@ -44,6 +44,7 @@ export { default as Portal } from './portal';
 export { default as Progress } from './progress';
 export { default as PullRefresh } from './pull-refresh';
 export { default as SearchBar } from './search-bar';
+export { default as Skeleton } from './skeleton';
 export { default as Stepper } from './stepper';
 export { default as Steps } from './steps';
 export { default as Sticky } from './sticky';

packages/arcodesign/components/skeleton/README.en-US.md

@@ -0,0 +1,60 @@
+### Data Display
+
+# Skeleton 
+
+Display a set of placeholder graphics during content loading
+
+======
+
+> Props
+
+|Property|Description|Type|DefaultValue|
+|----------|-------------|------|------|
+|animation|Animation of loading effect, 'gradient' and 'breath' effects are optional, default is no animation effect if not passed|"gradient" \| "breath"|-|
+|title|Show title placeholder|boolean \| SkeletonTitleProps|true|
+|paragraph|Show paragraph placeholder|boolean \| SkeletonParagraphProps|true|
+|avatar|Show Avatar placeholder|boolean \| SkeletonAvatarProps|false|
+|grid|Show Grid placeholder\. When it's value is present, the paragraph, avatar or title placeholder will not be displayed|boolean \| SkeletonGridProps|false|
+|children|Children element|ReactNode|null|
+|className|Custom classname|string|""|
+|style|Custom stylesheet|CSSProperties|{}|
+
+> Refs
+
+|Property|Description|Type|
+|----------|-------------|------|
+|dom|The outer DOM element of the component|HTMLDivElement|
+
+> SkeletonTitleProps
+
+|Property|Description|Type|DefaultValue|
+|----------|-------------|------|------|
+|width|The width of title|ReactText|'38%'|
+|className|Custom classname|string|""|
+|style|Custom stylesheet|CSSProperties|{}|
+
+> SkeletonParagraphProps
+
+|Property|Description|Type|DefaultValue|
+|----------|-------------|------|------|
+|rows|Number of lines for paragraph|number|3|
+|width|The width of paragraph\. If width is an Array, it corresponds to the width of each line, otherwise it indicates the width of the last line|string \| number \| ReactText\[\]|'58%'|
+|className|Custom classname|string|""|
+|style|Custom stylesheet|CSSProperties|{}|
+
+> SkeletonAvatarProps
+
+|Property|Description|Type|DefaultValue|
+|----------|-------------|------|------|
+|shape|Shape of avatar|"circle" \| "square"|'circle'|
+|size|Size of avatar|"medium" \| "large" \| "small" \| "smaller" \| "ultra\-small"|'smaller'|
+|className|Custom classname|string|""|
+|style|Custom stylesheet|CSSProperties|{}|
+
+> SkeletonGridProps
+
+|Property|Description|Type|DefaultValue|
+|----------|-------------|------|------|
+|columns|columns of grid|number|4|
+|className|Custom classname|string|""|
+|style|Custom stylesheet|CSSProperties|{}|

packages/arcodesign/components/skeleton/README.md

@@ -0,0 +1,60 @@
+### 信息展示
+
+# 骨架屏 Skeleton
+
+在内容加载过程中展示一组占位图形。
+
+======
+
+> 属性/Props
+
+|参数|描述|类型|默认值|
+|----------|-------------|------|------|
+|animation|加载动画效果，可选“扫光”、“呼吸”两种效果，不传入表示不展示动画效果|"gradient" \| "breath"|-|
+|title|是否显示标题占位图|boolean \| SkeletonTitleProps|true|
+|paragraph|是否显示段落占位图|boolean \| SkeletonParagraphProps|true|
+|avatar|是否显示头像占位图|boolean \| SkeletonAvatarProps|false|
+|grid|是否显示金刚位占位图（该参数非空时，不展示标题/段落/头像占位符）|boolean \| SkeletonGridProps|false|
+|children|子元素|ReactNode|null|
+|className|自定义类名|string|""|
+|style|自定义样式|CSSProperties|{}|
+
+> 引用/Refs
+
+|参数|描述|类型|
+|----------|-------------|------|
+|dom|最外层 DOM 元素|HTMLDivElement|
+
+> SkeletonTitleProps
+
+|参数|描述|类型|默认值|
+|----------|-------------|------|------|
+|width|标题占位图宽度|ReactText|'38%'|
+|className|自定义类名|string|""|
+|style|自定义样式|CSSProperties|{}|
+
+> SkeletonParagraphProps
+
+|参数|描述|类型|默认值|
+|----------|-------------|------|------|
+|rows|段落占位图的行数|number|3|
+|width|段落占位图宽度，若为数组格式对应每行宽度，否则表示最后一行的宽度|string \| number \| ReactText\[\]|'58%'|
+|className|自定义类名|string|""|
+|style|自定义样式|CSSProperties|{}|
+
+> SkeletonAvatarProps
+
+|参数|描述|类型|默认值|
+|----------|-------------|------|------|
+|shape|头像形状|"circle" \| "square"|'circle'|
+|size|头像尺寸|"medium" \| "large" \| "small" \| "smaller" \| "ultra\-small"|'smaller'|
+|className|自定义类名|string|""|
+|style|自定义样式|CSSProperties|{}|
+
+> SkeletonGridProps
+
+|参数|描述|类型|默认值|
+|----------|-------------|------|------|
+|columns|金刚位列数|number|4|
+|className|自定义类名|string|""|
+|style|自定义样式|CSSProperties|{}|