test/ant-design
1
0
Fork 0
mirror of https://gitee.com/ant-design/ant-design.git synced 2024-12-02 12:09:14 +08:00
Code Issues Actions 84 Packages Projects Releases Wiki Activity

docs: optimize site of components 1 (#23670)

Browse Source 
* docs: optimize site of components 1

* fix: lint

* fix: use space

* fix: snap

* revert: button demo

* fix snap
This commit is contained in:
xrkffgg 2020-04-27 21:40:52 +08:00 committed by GitHub
parent 3e38e4448c
commit a823400b79
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
10 changed files with 313 additions and 203 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
components/button/index.en-US.md
View File

@ -54,12 +54,15 @@ Following the Ant Design specification, we will add one space between if Button
<img src="https://gw.alipayobjects.com/zos/antfincdn/MY%26THAPZrW/38f06cb9-293a-4b42-b183-9f443e79ffea.png" style="box-shadow: none; margin: 0; width: 100px" alt="Button with two Chinese characters" />
<style>
[id^=components-button-demo-] .ant-btn {
margin-right: 8px;
margin-bottom: 12px;
}
[id^="components-button-demo-"] .ant-btn-rtl {
margin-right: 0;
margin-left: 8px;
}
[id^=components-button-demo-] .ant-btn-group > .ant-btn,
[id^=components-button-demo-] .ant-btn-group > span > .ant-btn {
margin-right: 0;

4
components/button/index.zh-CN.md
View File

@ -62,6 +62,10 @@ subtitle: 按钮
margin-right: 8px;
margin-bottom: 12px;
}
[id^="components-button-demo-"] .ant-btn-rtl {
margin-right: 0;
margin-left: 8px;
}
[id^="components-button-demo-"] .ant-btn-group > .ant-btn {
margin-right: 0;
}

1
components/collapse/__tests__/__snapshots__/demo.test.js.snap
View File

@ -658,6 +658,7 @@ exports[`renders ./components/collapse/demo/extra.md correctly 1`] = `
</span>
<div
class="ant-select ant-select-single ant-select-show-arrow"
style="margin:0 8px"
>
<div
class="ant-select-selector"

6
components/collapse/demo/extra.md
View File

@ -69,7 +69,11 @@ class Demo extends React.Component {
</Collapse>
<br />
<span>Expand Icon Position: </span>
<Select value={expandIconPosition} onChange={this.onPositionChange}>
<Select
value={expandIconPosition}
style={{ margin: '0 8px' }}
onChange={this.onPositionChange}
>
<Option value="left">left</Option>
<Option value="right">right</Option>
</Select>

8
components/grid/__tests__/__snapshots__/demo.test.js.snap
View File

@ -1147,7 +1147,9 @@ Array [
</div>
</div>
</div>,
<pre>
<pre
class="demo-code"
>
&lt;Row gutter={[16, 16]}&gt;
&lt;Col span={6} /&gt;
&lt;Col span={6} /&gt;
@ -1155,7 +1157,9 @@ Array [
&lt;Col span={6} /&gt;
&lt;/Row&gt;
</pre>,
<pre>
<pre
class="demo-code"
>
&lt;Row gutter={[16, 16]}&gt;
&lt;Col span={6} /&gt;
&lt;Col span={6} /&gt;

7
components/grid/demo/playground.md
View File

@ -103,8 +103,8 @@ class App extends React.Component {
</div>
<Row gutter={[this.gutters[gutterKey], this.vgutters[vgutterKey]]}>{cols}</Row>
<Row gutter={[this.gutters[gutterKey], this.vgutters[vgutterKey]]}>{cols}</Row>
<pre>{`<Row gutter={[${this.gutters[gutterKey]}, ${this.vgutters[vgutterKey]}]}>\n${colCode}</Row>`}</pre>
<pre>{`<Row gutter={[${this.gutters[gutterKey]}, ${this.vgutters[vgutterKey]}]}>\n${colCode}</Row>`}</pre>
<pre className="demo-code">{`<Row gutter={[${this.gutters[gutterKey]}, ${this.vgutters[vgutterKey]}]}>\n${colCode}</Row>`}</pre>
<pre className="demo-code">{`<Row gutter={[${this.gutters[gutterKey]}, ${this.vgutters[vgutterKey]}]}>\n${colCode}</Row>`}</pre>
</>
);
}
@ -131,6 +131,9 @@ ReactDOM.render(<App />, mountNode);
background: #f9f9f9;
border-radius: 6px;
}
#components-grid-demo-playground pre.demo-code {
direction: ltr;
}
```
<style>

144
components/list/__tests__/__snapshots__/demo.test.js.snap
View File

@ -934,12 +934,17 @@ exports[`renders ./components/list/demo/vertical.md correctly 1`] = `
class="ant-list-item-action"
>
<li>
<span>
<div
class="ant-space ant-space-horizontal"
>
<div
class="ant-space-item"
style="margin-right:8px"
>
<span
aria-label="star"
class="anticon anticon-star"
role="img"
style="margin-right:8px"
>
<svg
aria-hidden="true"
@ -956,19 +961,29 @@ exports[`renders ./components/list/demo/vertical.md correctly 1`] = `
/>
</svg>
</span>
</div>
<div
class="ant-space-item"
>
156
</span>
</div>
</div>
<em
class="ant-list-item-action-split"
/>
</li>
<li>
<span>
<div
class="ant-space ant-space-horizontal"
>
<div
class="ant-space-item"
style="margin-right:8px"
>
<span
aria-label="like"
class="anticon anticon-like"
role="img"
style="margin-right:8px"
>
<svg
aria-hidden="true"
@ -985,19 +1000,29 @@ exports[`renders ./components/list/demo/vertical.md correctly 1`] = `
/>
</svg>
</span>
</div>
<div
class="ant-space-item"
>
156
</span>
</div>
</div>
<em
class="ant-list-item-action-split"
/>
</li>
<li>
<span>
<div
class="ant-space ant-space-horizontal"
>
<div
class="ant-space-item"
style="margin-right:8px"
>
<span
aria-label="message"
class="anticon anticon-message"
role="img"
style="margin-right:8px"
>
<svg
aria-hidden="true"
@ -1014,8 +1039,13 @@ exports[`renders ./components/list/demo/vertical.md correctly 1`] = `
/>
</svg>
</span>
</div>
<div
class="ant-space-item"
>
2
</span>
</div>
</div>
</li>
</ul>
</div>
@ -1073,12 +1103,17 @@ exports[`renders ./components/list/demo/vertical.md correctly 1`] = `
class="ant-list-item-action"
>
<li>
<span>
<div
class="ant-space ant-space-horizontal"
>
<div
class="ant-space-item"
style="margin-right:8px"
>
<span
aria-label="star"
class="anticon anticon-star"
role="img"
style="margin-right:8px"
>
<svg
aria-hidden="true"
@ -1095,19 +1130,29 @@ exports[`renders ./components/list/demo/vertical.md correctly 1`] = `
/>
</svg>
</span>
</div>
<div
class="ant-space-item"
>
156
</span>
</div>
</div>
<em
class="ant-list-item-action-split"
/>
</li>
<li>
<span>
<div
class="ant-space ant-space-horizontal"
>
<div
class="ant-space-item"
style="margin-right:8px"
>
<span
aria-label="like"
class="anticon anticon-like"
role="img"
style="margin-right:8px"
>
<svg
aria-hidden="true"
@ -1124,19 +1169,29 @@ exports[`renders ./components/list/demo/vertical.md correctly 1`] = `
/>
</svg>
</span>
</div>
<div
class="ant-space-item"
>
156
</span>
</div>
</div>
<em
class="ant-list-item-action-split"
/>
</li>
<li>
<span>
<div
class="ant-space ant-space-horizontal"
>
<div
class="ant-space-item"
style="margin-right:8px"
>
<span
aria-label="message"
class="anticon anticon-message"
role="img"
style="margin-right:8px"
>
<svg
aria-hidden="true"
@ -1153,8 +1208,13 @@ exports[`renders ./components/list/demo/vertical.md correctly 1`] = `
/>
</svg>
</span>
</div>
<div
class="ant-space-item"
>
2
</span>
</div>
</div>
</li>
</ul>
</div>
@ -1212,12 +1272,17 @@ exports[`renders ./components/list/demo/vertical.md correctly 1`] = `
class="ant-list-item-action"
>
<li>
<span>
<div
class="ant-space ant-space-horizontal"
>
<div
class="ant-space-item"
style="margin-right:8px"
>
<span
aria-label="star"
class="anticon anticon-star"
role="img"
style="margin-right:8px"
>
<svg
aria-hidden="true"
@ -1234,19 +1299,29 @@ exports[`renders ./components/list/demo/vertical.md correctly 1`] = `
/>
</svg>
</span>
</div>
<div
class="ant-space-item"
>
156
</span>
</div>
</div>
<em
class="ant-list-item-action-split"
/>
</li>
<li>
<span>
<div
class="ant-space ant-space-horizontal"
>
<div
class="ant-space-item"
style="margin-right:8px"
>
<span
aria-label="like"
class="anticon anticon-like"
role="img"
style="margin-right:8px"
>
<svg
aria-hidden="true"
@ -1263,19 +1338,29 @@ exports[`renders ./components/list/demo/vertical.md correctly 1`] = `
/>
</svg>
</span>
</div>
<div
class="ant-space-item"
>
156
</span>
</div>
</div>
<em
class="ant-list-item-action-split"
/>
</li>
<li>
<span>
<div
class="ant-space ant-space-horizontal"
>
<div
class="ant-space-item"
style="margin-right:8px"
>
<span
aria-label="message"
class="anticon anticon-message"
role="img"
style="margin-right:8px"
>
<svg
aria-hidden="true"
@ -1292,8 +1377,13 @@ exports[`renders ./components/list/demo/vertical.md correctly 1`] = `
/>
</svg>
</span>
</div>
<div
class="ant-space-item"
>
2
</span>
</div>
</div>
</li>
</ul>
</div>

8
components/list/demo/vertical.md
View File

@ -14,7 +14,7 @@ title:
Set the `itemLayout` property to `vertical` to create a vertical list.
```jsx
import { List, Avatar } from 'antd';
import { List, Avatar, Space } from 'antd';
import { MessageOutlined, LikeOutlined, StarOutlined } from '@ant-design/icons';
const listData = [];
@ -31,10 +31,10 @@ for (let i = 0; i < 23; i++) {
}
const IconText = ({ icon, text }) => (
<span>
{React.createElement(icon, { style: { marginRight: 8 } })}
<Space>
{React.createElement(icon)}
{text}
</span>
</Space>
);
ReactDOM.render(

2
components/steps/demo/step-next.md
View File

@ -73,7 +73,7 @@ class App extends React.Component {
</Button>
)}
{current > 0 && (
<Button style={{ margin: 8 }} onClick={() => this.prev()}>
<Button style={{ margin: '0 8px' }} onClick={() => this.prev()}>
Previous
</Button>
)}

7
site/theme/static/demo.less
View File

@ -108,10 +108,11 @@
background: inherit;
transform: scale(0.9);
.ant-row-rtl & {
.ant-row.ant-row-rtl & {
right: auto;
left: -21px;
padding-right: 0;
left: -22px;
margin-right: 0;
padding-right: 8px;
padding-left: 6px;
}
}