mirror/ant-design
1
0
Fork 0
mirror of https://github.com/ant-design/ant-design.git synced 2025-06-07 09:26:06 +08:00
Code Issues Actions 18 Packages Projects Releases Wiki Activity

docs: fix Skeleton style and demo layout (#38625)

Browse Source 
* docs: fix skeleton demo style

* docs: update skeleton demo
This commit is contained in:
afc163 2022-11-17 18:49:41 +08:00 committed by GitHub
parent c6c35cc0ad
commit ac1e1c230b
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
6 changed files with 48 additions and 50 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

26
components/skeleton/__tests__/__snapshots__/demo-extend.test.ts.snap
View File

@ -49,17 +49,17 @@ exports[`renders ./components/skeleton/demo/basic.tsx extend context correctly 1
`;
exports[`renders ./components/skeleton/demo/children.tsx extend context correctly 1`] = `
<div
class="article"
>
<div>
<h4>
Ant Design, a design language
</h4>
<p>
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.
</p>
</div>
Array [
<h4
style="margin-bottom:16px"
>
Ant Design, a design language
</h4>,
<p
style="margin-bottom:16px"
>
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.
</p>,
<button
class="ant-btn ant-btn-default"
type="button"
@ -67,8 +67,8 @@ exports[`renders ./components/skeleton/demo/children.tsx extend context correctl
<span>
Show Skeleton
</span>
</button>
</div>
</button>,
]
`;
exports[`renders ./components/skeleton/demo/complex.tsx extend context correctly 1`] = `

26
components/skeleton/__tests__/__snapshots__/demo.test.ts.snap
View File

@ -49,17 +49,17 @@ exports[`renders ./components/skeleton/demo/basic.tsx correctly 1`] = `
`;
exports[`renders ./components/skeleton/demo/children.tsx correctly 1`] = `
<div
class="article"
>
<div>
<h4>
Ant Design, a design language
</h4>
<p>
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.
</p>
</div>
Array [
<h4
style="margin-bottom:16px"
>
Ant Design, a design language
</h4>,
<p
style="margin-bottom:16px"
>
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.
</p>,
<button
class="ant-btn ant-btn-default"
type="button"
@ -67,8 +67,8 @@ exports[`renders ./components/skeleton/demo/children.tsx correctly 1`] = `
<span>
Show Skeleton
</span>
</button>
</div>
</button>,
]
`;
exports[`renders ./components/skeleton/demo/complex.tsx correctly 1`] = `

9
components/skeleton/demo/children.md
View File

@ -5,12 +5,3 @@
## en-US
Skeleton contains sub component.
<style>
.article h4 {
margin-bottom: 16px;
}
.article button {
margin-top: 16px;
}
</style>

18
components/skeleton/demo/children.tsx
View File

@ -13,21 +13,19 @@ const App: React.FC = () => {
};
return (
<div className="article">
<>
<Skeleton loading={loading}>
<div>
<h4>Ant Design, a design language</h4>
<p>
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.
</p>
</div>
<h4 style={{ marginBottom: 16 }}>Ant Design, a design language</h4>
<p style={{ marginBottom: 16 }}>
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.
</p>
</Skeleton>
<Button onClick={showSkeleton} disabled={loading}>
Show Skeleton
</Button>
</div>
</>
);
};

2
components/skeleton/index.en-US.md
View File

@ -5,7 +5,7 @@ title: Skeleton
cover: https://gw.alipayobjects.com/zos/alicdn/KpcciCJgv/Skeleton.svg
---
Provide a placeholder while you wait for content to load, or to visualise content that doesn't exist yet.
Provide a placeholder while you wait for content to load, or to visualize content that doesn't exist yet.
## When To Use

17
components/skeleton/style/index.tsx
View File

@ -95,12 +95,20 @@ const genSkeletonElementAvatar = (token: SkeletonToken): CSSObject => {
};
const genSkeletonElementInput = (token: SkeletonToken): CSSObject => {
const { controlHeight, skeletonInputCls, controlHeightLG, controlHeightSM, color } = token;
const {
controlHeight,
borderRadiusSM,
skeletonInputCls,
controlHeightLG,
controlHeightSM,
color,
} = token;
return {
[`${skeletonInputCls}`]: {
display: 'inline-block',
verticalAlign: 'top',
background: color,
borderRadius: borderRadiusSM,
...genSkeletonElementInputSize(controlHeight),
},
@ -120,7 +128,7 @@ const genSkeletonElementImageSize = (size: number): CSSObject => ({
});
const genSkeletonElementImage = (token: SkeletonToken): CSSObject => {
const { skeletonImageCls, imageSizeBase, color } = token;
const { skeletonImageCls, imageSizeBase, color, borderRadiusSM } = token;
return {
[`${skeletonImageCls}`]: {
display: 'flex',
@ -128,6 +136,7 @@ const genSkeletonElementImage = (token: SkeletonToken): CSSObject => {
justifyContent: 'center',
verticalAlign: 'top',
background: color,
borderRadius: borderRadiusSM,
...genSkeletonElementImageSize(imageSizeBase * 2),
[`${skeletonImageCls}-path`]: {
fill: '#bfbfbf',
@ -347,7 +356,7 @@ const genBaseStyle: GenerateStyle<SkeletonToken> = (token: SkeletonToken) => {
// ============================== Export ==============================
export default genComponentStyleHook(
'Skeleton',
token => {
(token) => {
const { componentCls } = token;
const skeletonToken = mergeToken<SkeletonToken>(token, {
@ -368,7 +377,7 @@ export default genComponentStyleHook(
});
return [genBaseStyle(skeletonToken)];
},
token => {
(token) => {
const { colorFillContent, colorFill } = token;
return {