+
+`;
diff --git a/components/drawer/demo/basic-left.md b/components/drawer/demo/basic-left.md
deleted file mode 100644
index 1caf745dea..0000000000
--- a/components/drawer/demo/basic-left.md
+++ /dev/null
@@ -1,57 +0,0 @@
----
-order: 1
-title:
- zh-CN: 左侧滑出
- en-US: Left Slider
----
-
-## zh-CN
-
-基础抽屉，点击触发按钮抽屉从左滑出，点击遮罩区关闭
-
-## en-US
-
-Basic drawer.
-
-```jsx
-import { Drawer, Button } from 'antd';
-
-class App extends React.Component {
- state = { visible: false };
-
- showDrawer = () => {
- this.setState({
- visible: true,
- });
- };
-
- onClose = () => {
- this.setState({
- visible: false,
- });
- };
-
- render() {
- return (
-
+
+
+
+
+
+
+
+
+
+
+ Here is content of Drawer
+
+
-
-
-
-
- );
- }
-}
-
-ReactDOM.render(Some contents...
-Some contents...
-Some contents...
-
+
+ top
+ right
+ bottom
+ left
+
+
+
+
+
+ );
+ }
+}
+
+ReactDOM.render(Some contents...
+Some contents...
+Some contents...
+
+
+ );
+ }
+}
+
+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