diff --git a/components/skeleton/Paragraph.tsx b/components/skeleton/Paragraph.tsx index 9d6982aa38..5bf25bfb6a 100644 --- a/components/skeleton/Paragraph.tsx +++ b/components/skeleton/Paragraph.tsx @@ -59,7 +59,7 @@ class Paragraph extends React.Component ( -
  • +
  • )); return ( diff --git a/components/skeleton/demo/active.md b/components/skeleton/demo/active.md index 5249130cdd..c59150d2f6 100644 --- a/components/skeleton/demo/active.md +++ b/components/skeleton/demo/active.md @@ -1,5 +1,5 @@ --- -order: 1 +order: 2 title: zh-CN: 动画效果 en-US: Active Animation @@ -16,7 +16,5 @@ Display active animation. ````jsx import { Skeleton } from 'antd'; -ReactDOM.render( - , -mountNode); +ReactDOM.render(, mountNode); ```` diff --git a/components/skeleton/demo/basic.md b/components/skeleton/demo/basic.md index 189ed7ef4f..43358a0f05 100644 --- a/components/skeleton/demo/basic.md +++ b/components/skeleton/demo/basic.md @@ -7,16 +7,14 @@ title: ## zh-CN -最简单的用法。 +最简单的占位效果。 ## en-US -Basic usage. +Simplest Skeleton usage. ````jsx import { Skeleton } from 'antd'; -ReactDOM.render( - , -mountNode); +ReactDOM.render(, mountNode); ```` diff --git a/components/skeleton/demo/children.md b/components/skeleton/demo/children.md index 1091081777..173dfe52dc 100644 --- a/components/skeleton/demo/children.md +++ b/components/skeleton/demo/children.md @@ -1,5 +1,5 @@ --- -order: 2 +order: 3 title: zh-CN: 包含子组件 en-US: Contains sub component diff --git a/components/skeleton/demo/complex.md b/components/skeleton/demo/complex.md new file mode 100644 index 0000000000..d8fc26ad4b --- /dev/null +++ b/components/skeleton/demo/complex.md @@ -0,0 +1,20 @@ +--- +order: 1 +title: + zh-CN: 复杂的组合 + en-US: Complex combination +--- + +## zh-CN + +更复杂的组合。 + +## en-US + +Complex combination with avatar and multiple paragraphs. + +````jsx +import { Skeleton } from 'antd'; + +ReactDOM.render(, mountNode); +```` diff --git a/components/skeleton/demo/list.md b/components/skeleton/demo/list.md index 5c14a55554..c90d4c0878 100644 --- a/components/skeleton/demo/list.md +++ b/components/skeleton/demo/list.md @@ -1,5 +1,5 @@ --- -order: 3 +order: 4 title: zh-CN: 列表 en-US: List @@ -60,7 +60,7 @@ class App extends React.Component { actions={!loading && [, , ]} extra={!loading && logo} > - + } title={{item.title}} diff --git a/components/skeleton/index.tsx b/components/skeleton/index.tsx index bf2064b5f4..27d901524c 100644 --- a/components/skeleton/index.tsx +++ b/components/skeleton/index.tsx @@ -39,16 +39,14 @@ function getTitleBasicProps(hasAvatar: boolean, hasParagraph: boolean): Skeleton return { width: '50%' }; } - return { width: '100%' }; + return {}; } function getParagraphBasicProps(hasAvatar: boolean, hasTitle: boolean): SkeletonParagraphProps { const basicProps: SkeletonParagraphProps = {}; // Width - if (hasAvatar && hasTitle) { - basicProps.width = '100%'; - } else { + if (!hasAvatar || !hasTitle) { basicProps.width = '61%'; } diff --git a/components/skeleton/style/index.less b/components/skeleton/style/index.less index a1351dafbf..f1664e8649 100644 --- a/components/skeleton/style/index.less +++ b/components/skeleton/style/index.less @@ -58,6 +58,15 @@ height: 16px; background: @skeleton-color; list-style: none; + width: 100%; + + &:nth-child(3) { + width: 94%; + } + + &:nth-child(4) { + width: 96%; + } + li { margin-top: 16px;