GitHub
/
ant-design
6
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

docs: optimize site of components 1 (#23670) 

* docs: optimize site of components 1

* fix: lint

* fix: use space

* fix: snap

* revert: button demo

* fix snap
pull/23682/head
xrkffgg 5 years ago
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
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 5
      components/button/index.en-US.md
  2. 4
      components/button/index.zh-CN.md
  3. 1
      components/collapse/__tests__/__snapshots__/demo.test.js.snap
  4. 6
      components/collapse/demo/extra.md
  5. 8
      components/grid/__tests__/__snapshots__/demo.test.js.snap
  6. 7
      components/grid/demo/playground.md
  7. 144
      components/list/__tests__/__snapshots__/demo.test.js.snap
  8. 8
      components/list/demo/vertical.md
  9. 2
      components/steps/demo/step-next.md
  10. 7
      site/theme/static/demo.less

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;
}
}

Write Preview
Loading…
Cancel
Save