content
+ content
+ -
+ {rowList}
+
+
+`;
+
+exports[`renders ./components/skeleton/demo/basic.md correctly 1`] = `
+
+
+
+-
+
+
+
+
+
+`;
+
+exports[`renders ./components/skeleton/demo/children.md correctly 1`] = `
+
+
+
+-
+
+
+
+
+
+`;
+
+exports[`renders ./components/skeleton/demo/list.md correctly 1`] = `
+
+
+
++ Ant Design, a design language +
++ We supply a series of design principles, practical patterns and high quality design resources (Sketch and Axure), to help people create their product prototypes beautifully and efficiently. +
+
+
+
+
+
+`;
diff --git a/components/skeleton/__tests__/__snapshots__/index.test.js.snap b/components/skeleton/__tests__/__snapshots__/index.test.js.snap
new file mode 100644
index 0000000000..bac82f863c
--- /dev/null
+++ b/components/skeleton/__tests__/__snapshots__/index.test.js.snap
@@ -0,0 +1,279 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Skeleton avatar shape 1`] = `
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ -
+
+
+
+
+
+
+
+
+
+
+
+
+ -
+
+
+
+
+
+
+
+
+
+
+
+
+ -
+
+
+
+
+
+`;
+
+exports[`Skeleton avatar shape 2`] = `
+
+
+
+
+
+
+-
+
+
+
+
+`;
+
+exports[`Skeleton avatar size 1`] = `
+
+
+
+
+
+
+-
+
+
+
+
+`;
+
+exports[`Skeleton avatar size 2`] = `
+
+
+
+
+
+
+-
+
+
+
+
+`;
+
+exports[`Skeleton avatar size 3`] = `
+
+
+
+
+
+
+-
+
+
+
+
+`;
+
+exports[`Skeleton paragraph rows 1`] = `
+
+
+
+
+
+
+-
+
+
+
+
+`;
+
+exports[`Skeleton paragraph width 1`] = `
+
+
+
+-
+
+
+
+
+
+
+
+`;
+
+exports[`Skeleton paragraph width 2`] = `
+
+
+
+-
+
+
+
+
+
+`;
+
+exports[`Skeleton title width 1`] = `
+
+
+
+-
+
+
+
+
+
+`;
diff --git a/components/skeleton/__tests__/demo.test.js b/components/skeleton/__tests__/demo.test.js
new file mode 100644
index 0000000000..2fb54f3080
--- /dev/null
+++ b/components/skeleton/__tests__/demo.test.js
@@ -0,0 +1,3 @@
+import demoTest from '../../../tests/shared/demoTest';
+
+demoTest('skeleton');
diff --git a/components/skeleton/__tests__/index.test.js b/components/skeleton/__tests__/index.test.js
new file mode 100644
index 0000000000..22697a6761
--- /dev/null
+++ b/components/skeleton/__tests__/index.test.js
@@ -0,0 +1,50 @@
+import React from 'react';
+import { mount } from 'enzyme';
+import Skeleton from '..';
+
+describe('Skeleton', () => {
+ const genSkeleton = props => mount(
+
+
+
+-
+
+
+
+
+
+
+
+
+ );
+ }
+}
+
+ReactDOM.render(
+
+ Ant Design, a design language
+We supply a series of design principles, practical patterns and high quality design resources (Sketch and Axure), to help people create their product prototypes beautifully and efficiently.
+
+
+ );
+ }
+}
+
+ReactDOM.render(- (
+
}
+ >
+
+
+ );
+ }
+
+ let contentNode;
+ if (hasTitle || hasParagraph) {
+ // Title
+ let $title;
+ if (hasTitle) {
+ const titleProps: SkeletonTitleProps = {
+ ...getTitleBasicProps(hasAvatar, hasParagraph),
+ ...getComponentProps(title),
+ };
+
+ $title = (
+
+ {$title}
+ {paragraphNode}
+
+ );
+ }
+
+ const cls = classNames(
+ prefixCls,
+ className, {
+ [`${prefixCls}-with-avatar`]: hasAvatar,
+ [`${prefixCls}-active`]: active,
+ },
+ );
+
+ return (
+
+ {avatarNode}
+ {contentNode}
+
+ );
+ }
+
+ return children;
+ }
+}
+
+export default Skeleton;
diff --git a/components/skeleton/index.zh-CN.md b/components/skeleton/index.zh-CN.md
new file mode 100644
index 0000000000..f515513827
--- /dev/null
+++ b/components/skeleton/index.zh-CN.md
@@ -0,0 +1,46 @@
+---
+category: Components
+subtitle: 加载占位图
+type: Data Entry
+title: Skeleton
+cols: 1
+---
+
+在需要等待加载内容的位置提供一个占位图。
+
+## 何时使用
+
+- 网络较慢，需要长时间等待加载处理的情况下。
+- 图文信息内容较多的列表/卡片中。
+
+## API
+
+### Skeleton
+
+| 属性 | 说明 | 类型 | 默认值 |
+| --- | --- | --- | --- |
+| active | 是否展示动画效果 | boolean | false |
+| avatar | 是否显示头像占位图 | boolean \| [SkeletonAvatarProps](#SkeletonAvatarProps) | false |
+| loading | 为 `true` 时，显示占位图。反之则直接展示子组件 | boolean | - |
+| paragraph | 是否显示段落占位图 | boolean \| [SkeletonParagraphProps](#SkeletonParagraphProps) | true |
+| title | 是否显示标题占位图 | boolean \| [SkeletonTitleProps](#SkeletonTitleProps) | true |
+
+### SkeletonAvatarProps
+
+| 属性 | 说明 | 类型 | 默认值 |
+| --- | --- | --- | --- |
+| size | 设置头像占位图的大小 | Enum{ 'large', 'small', 'default' } | - |
+| shape | 指定头像的形状 | Enum{ 'circle', 'square' } | - |
+
+### SkeletonTitleProps
+
+| 属性 | 说明 | 类型 | 默认值 |
+| --- | --- | --- | --- |
+| width | 设置标题占位图的宽度 | number \| string | - |
+
+### SkeletonParagraphProps
+
+| 属性 | 说明 | 类型 | 默认值 |
+| --- | --- | --- | --- |
+| rows | 设置段落占位图的行数 | number | - |
+| width | 设置标题占位图的宽度，若为数组时则为对应的每行宽度，反之则是最后一行的宽度 | number \| string \| Array