test/ant-design
1
0
Fork 0
mirror of https://gitee.com/ant-design/ant-design.git synced 2024-11-30 02:59:04 +08:00
Code Issues Actions 68 Packages Projects Releases Wiki Activity

chore: update Space vertical demo (#34647)

Browse Source 
* chore: update Space vertical demo

close #34609

* fix snapshot
This commit is contained in:
afc163 2022-03-22 14:49:42 +08:00 committed by GitHub
parent 4209fa251f
commit d207ba65b8
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 79 additions and 17 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

41
components/space/__tests__/__snapshots__/demo-extend.test.ts.snap
View File

@ -894,14 +894,46 @@ exports[`renders ./components/space/demo/split.md extend context correctly 1`] =
exports[`renders ./components/space/demo/vertical.md extend context correctly 1`] = `
<div
class="ant-space ant-space-vertical"
style="display:flex"
>
<div
class="ant-space-item"
style="margin-bottom:8px"
style="margin-bottom:16px"
>
<div
class="ant-card ant-card-bordered"
style="width:300px"
class="ant-card ant-card-bordered ant-card-small"
>
<div
class="ant-card-head"
>
<div
class="ant-card-head-wrapper"
>
<div
class="ant-card-head-title"
>
Card
</div>
</div>
</div>
<div
class="ant-card-body"
>
<p>
Card content
</p>
<p>
Card content
</p>
</div>
</div>
</div>
<div
class="ant-space-item"
style="margin-bottom:16px"
>
<div
class="ant-card ant-card-bordered ant-card-small"
>
<div
class="ant-card-head"
@ -932,8 +964,7 @@ exports[`renders ./components/space/demo/vertical.md extend context correctly 1`
class="ant-space-item"
>
<div
class="ant-card ant-card-bordered"
style="width:300px"
class="ant-card ant-card-bordered ant-card-small"
>
<div
class="ant-card-head"

41
components/space/__tests__/__snapshots__/demo.test.js.snap
View File

@ -645,14 +645,46 @@ exports[`renders ./components/space/demo/split.md correctly 1`] = `
exports[`renders ./components/space/demo/vertical.md correctly 1`] = `
<div
class="ant-space ant-space-vertical"
style="display:flex"
>
<div
class="ant-space-item"
style="margin-bottom:8px"
style="margin-bottom:16px"
>
<div
class="ant-card ant-card-bordered"
style="width:300px"
class="ant-card ant-card-bordered ant-card-small"
>
<div
class="ant-card-head"
>
<div
class="ant-card-head-wrapper"
>
<div
class="ant-card-head-title"
>
Card
</div>
</div>
</div>
<div
class="ant-card-body"
>
<p>
Card content
</p>
<p>
Card content
</p>
</div>
</div>
</div>
<div
class="ant-space-item"
style="margin-bottom:16px"
>
<div
class="ant-card ant-card-bordered ant-card-small"
>
<div
class="ant-card-head"
@ -683,8 +715,7 @@ exports[`renders ./components/space/demo/vertical.md correctly 1`] = `
class="ant-space-item"
>
<div
class="ant-card ant-card-bordered"
style="width:300px"
class="ant-card ant-card-bordered ant-card-small"
>
<div
class="ant-card-head"

14
components/space/demo/vertical.md
View File

@ -9,25 +9,25 @@ title:
相邻组件垂直间距。
可以设置 `width: 100%` 独占一行。
## en-US
Crowded components vertical spacing.
Can set `width: 100%` to fill a row.
```jsx
import { Space, Card } from 'antd';
function SpaceVertical() {
return (
<Space direction="vertical">
<Card title="Card" style={{ width: 300 }}>
<Space direction="vertical" size="middle" style={{ display: 'flex' }}>
<Card title="Card" size="small">
<p>Card content</p>
<p>Card content</p>
</Card>
<Card title="Card" style={{ width: 300 }}>
<Card title="Card" size="small">
<p>Card content</p>
<p>Card content</p>
</Card>
<Card title="Card" size="small">
<p>Card content</p>
<p>Card content</p>
</Card>