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

[WIP] List: update english docs (#7880)

Browse Source 
List: update english docs
This commit is contained in:
niko 2017-10-12 22:40:49 -05:00 committed by GitHub
parent 6e78ffd0a6
commit 58089c7832
11 changed files with 148 additions and 56 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -376,7 +376,7 @@ exports[`renders ./components/list/demo/loadmore.md correctly 1`] = `
/> />
</div> </div>
<div <div
style="text-align:center;margin-top:8px" style="text-align:center;margin-top:8px;height:32px"
> >
<button <button
class="ant-btn" class="ant-btn"
@ -401,7 +401,7 @@ exports[`renders ./components/list/demo/resposive.md correctly 1`] = `
style="margin-left:-8px;margin-right:-8px" style="margin-left:-8px;margin-right:-8px"
> >
<div <div
class="ant-col-xs-12 ant-col-sm-12 ant-col-md-6 ant-col-lg-6 ant-col-xl-4" class="ant-col-xs-24 ant-col-sm-12 ant-col-md-6 ant-col-lg-6 ant-col-xl-4"
> >
<div <div
class="ant-list-item" class="ant-list-item"
@ -440,7 +440,7 @@ exports[`renders ./components/list/demo/resposive.md correctly 1`] = `
</div> </div>
</div> </div>
<div <div
class="ant-col-xs-12 ant-col-sm-12 ant-col-md-6 ant-col-lg-6 ant-col-xl-4" class="ant-col-xs-24 ant-col-sm-12 ant-col-md-6 ant-col-lg-6 ant-col-xl-4"
> >
<div <div
class="ant-list-item" class="ant-list-item"
@ -479,7 +479,7 @@ exports[`renders ./components/list/demo/resposive.md correctly 1`] = `
</div> </div>
</div> </div>
<div <div
class="ant-col-xs-12 ant-col-sm-12 ant-col-md-6 ant-col-lg-6 ant-col-xl-4" class="ant-col-xs-24 ant-col-sm-12 ant-col-md-6 ant-col-lg-6 ant-col-xl-4"
> >
<div <div
class="ant-list-item" class="ant-list-item"
@ -518,7 +518,7 @@ exports[`renders ./components/list/demo/resposive.md correctly 1`] = `
</div> </div>
</div> </div>
<div <div
class="ant-col-xs-12 ant-col-sm-12 ant-col-md-6 ant-col-lg-6 ant-col-xl-4" class="ant-col-xs-24 ant-col-sm-12 ant-col-md-6 ant-col-lg-6 ant-col-xl-4"
> >
<div <div
class="ant-list-item" class="ant-list-item"
@ -556,6 +556,84 @@ exports[`renders ./components/list/demo/resposive.md correctly 1`] = `
</div> </div>
</div> </div>
</div> </div>
<div
class="ant-col-xs-24 ant-col-sm-12 ant-col-md-6 ant-col-lg-6 ant-col-xl-4"
>
<div
class="ant-list-item"
style="padding-left:8px;padding-right:8px"
>
<div
class="ant-list-item-content ant-list-item-content-single"
>
<div
class="ant-card ant-card-bordered"
>
<div>
<div
class="ant-card-head"
>
<div
class="ant-card-head-wrapper"
>
<div
class="ant-card-head-title"
>
Title 5
</div>
</div>
</div>
<div
class="ant-card-body"
>
<div>
Card content
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div
class="ant-col-xs-24 ant-col-sm-12 ant-col-md-6 ant-col-lg-6 ant-col-xl-4"
>
<div
class="ant-list-item"
style="padding-left:8px;padding-right:8px"
>
<div
class="ant-list-item-content ant-list-item-content-single"
>
<div
class="ant-card ant-card-bordered"
>
<div>
<div
class="ant-card-head"
>
<div
class="ant-card-head-wrapper"
>
<div
class="ant-card-head-title"
>
Title 6
</div>
</div>
</div>
<div
class="ant-card-body"
>
<div>
Card content
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div> </div>
</div> </div>
</div> </div>

4
components/list/demo/basic.md
View File

@ -2,7 +2,7 @@
order: 1 order: 1
title: title:
zh-CN: 基础列表 zh-CN: 基础列表
en-US: Basic List en-US: Basic list
--- ---
## zh-CN ## zh-CN
@ -11,7 +11,7 @@ title:
## en-US ## en-US
Basic List. Basic list.
````jsx ````jsx
import { List, Avatar } from 'antd'; import { List, Avatar } from 'antd';

4
components/list/demo/grid.md
View File

@ -7,11 +7,11 @@ title:
## zh-CN ## zh-CN
栅格列表。 可以通过设置 `List` 的 `grid` 属性来实现栅格列表，`column` 可设置期望显示的列数。
## en-US ## en-US
Grid List. Creating a grid list by setting the `grid` property of List
````jsx ````jsx
import { List, Card } from 'antd'; import { List, Card } from 'antd';

2
components/list/demo/infinite-load.md
View File

@ -2,7 +2,7 @@
order: 6 order: 6
title: title:
zh-CN: 滚动加载 zh-CN: 滚动加载
en-US: Scrolling loaded List en-US: Scrolling loaded
--- ---
## zh-CN ## zh-CN

4
components/list/demo/infinite-virtualized-load.md
View File

@ -2,7 +2,7 @@
order: 7 order: 7
title: title:
zh-CN: 滚动加载无限长列表 zh-CN: 滚动加载无限长列表
en-US: Infinite virtualized List en-US: Infinite & virtualized
--- ---
## zh-CN ## zh-CN
@ -13,7 +13,7 @@ title:
## en-US ## en-US
The example of infinite & virtualized load with [react-virtualized](https://github.com/bvaughn/react-virtualized). [learn more](https://blog.jscrambler.com/optimizing-react-rendering-through-virtualization/) The example of infinite & virtualized load with [react-virtualized](https://github.com/bvaughn/react-virtualized). [Learned more](https://blog.jscrambler.com/optimizing-react-rendering-through-virtualization/)
`virtualized` is a technology which use to mount big data, to reducing the render dom witch not visible. `virtualized` is a technology which use to mount big data, to reducing the render dom witch not visible.

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

@ -2,7 +2,7 @@
order: 2 order: 2
title: title:
zh-CN: 加载更多 zh-CN: 加载更多
en-US: loadmore en-US: Load more
--- ---
## zh-CN ## zh-CN
@ -11,7 +11,7 @@ title:
## en-US ## en-US
To show how to realize a loading more list with `loadMore` prop. Load more list with `loadMore` property.
````jsx ````jsx
import { List, Avatar, Button, Spin } from 'antd'; import { List, Avatar, Button, Spin } from 'antd';
@ -57,6 +57,8 @@ class LoadMoreList extends React.Component {
loadingMore: false, loadingMore: false,
}, () => { }, () => {
// Resetting window's offsetTop so as to display react-virtualized demo underfloor. // Resetting window's offsetTop so as to display react-virtualized demo underfloor.
// In real scene, you can using public method of react-virtualized:
// https://stackoverflow.com/questions/46700726/how-to-use-public-method-updateposition-of-react-virtualized
window.dispatchEvent(new Event('resize')); window.dispatchEvent(new Event('resize'));
}); });
}); });
@ -64,7 +66,7 @@ class LoadMoreList extends React.Component {
render() { render() {
const { loading, loadingMore, showLoadingMore, data } = this.state; const { loading, loadingMore, showLoadingMore, data } = this.state;
const loadMore = showLoadingMore ? ( const loadMore = showLoadingMore ? (
<div style={{ textAlign: 'center', marginTop: 8 }}> <div style={{ textAlign: 'center', marginTop: 8, height: 32 }}>
{loadingMore && <Spin />} {loadingMore && <Spin />}
{!loadingMore && <Button onClick={this.onLoadMore}>loading more</Button>} {!loadingMore && <Button onClick={this.onLoadMore}>loading more</Button>}
</div> </div>

14
components/list/demo/resposive.md
View File

@ -2,16 +2,16 @@
order: 5 order: 5
title: title:
zh-CN: 响应式的栅格列表 zh-CN: 响应式的栅格列表
en-US: Grid en-US: Responsive grid list
--- ---
## zh-CN ## zh-CN
响应式的栅格列表。 响应式的栅格列表。尺寸与 [Layout Grid](https://ant.design/components/grid-cn/#Col) 保持一致。
## en-US ## en-US
Responsive Grid List. Responsive grid list. The size property is as same as [Layout Grid](https://ant.design/components/grid/#Col).
````jsx ````jsx
import { List, Card } from 'antd'; import { List, Card } from 'antd';
@ -29,11 +29,17 @@ const data = [
{ {
title: 'Title 4', title: 'Title 4',
}, },
{
title: 'Title 5',
},
{
title: 'Title 6',
},
]; ];
ReactDOM.render( ReactDOM.render(
<List <List
grid={{ gutter: 16, xs: 2, sm: 2, md: 4, lg: 4, xl: 6 }} grid={{ gutter: 16, xs: 1, sm: 2, md: 4, lg: 4, xl: 6 }}
dataSource={data} dataSource={data}
renderItem={item => ( renderItem={item => (
<List.Item> <List.Item>

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

@ -2,7 +2,7 @@
order: 0 order: 0
title: title:
zh-CN: 简单列表 zh-CN: 简单列表
en-US: Simple en-US: Simple list
--- ---
## zh-CN ## zh-CN
@ -15,7 +15,11 @@ title:
## en-US ## en-US
Simple List. Ant Design supports a default list size as well as a large and small size.
If a large or small list is desired, set the size property to either large or small respectively. Omit the size property for a list with the default size.
Customizing the header and footer of list by setting `header` and `footer` property.
````jsx ````jsx
import { List } from 'antd'; import { List } from 'antd';

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

@ -2,16 +2,16 @@
order: 3 order: 3
title: title:
zh-CN: 竖排列表样式 zh-CN: 竖排列表样式
en-US: Layout Vertical en-US: Vertical
--- ---
## zh-CN ## zh-CN
基础列表。 通过设置 `itemLayout` 属性为 `vertical` 可实现竖排列表样式。
## en-US ## en-US
Basic List. Setting `itemLayout` property with `vertical` to create a vertical list.
````jsx ````jsx
import { List, Avatar, Icon } from 'antd'; import { List, Avatar, Icon } from 'antd';

43
components/list/index.en-US.md
View File

@ -17,38 +17,39 @@ A list can be used to display content related to a single subject. The content c
| Property | Description | Type | Default | | Property | Description | Type | Default |
|----------|----------------|----------|--------------| |----------|----------------|----------|--------------|
| bordered | - | string \| boolean | false | | bordered | Toggles rendering of the border around the list | boolean | false |
| split | - | string \| boolean | true | | split | Toggles rendering of the split under the list item | boolean | true |
| loading | -| boolean | false | | loading | Shows a loading indicator while the contents of the list are being fetched | boolean | false |
| itemLayout | - | string | - | | itemLayout | The layout of list, default is `horizontal`, If a vertical list is desired, set the itemLayout property to `vertical` | string | - |
| loadMore | -| string\|ReactNode | - | | loadMore | Shows a load more content | string\|ReactNode | - |
| pagination | - | boolean \| object | false | | pagination | Pagination [config](https://ant.design/components/pagination/), hide it by setting it to false | boolean \| object | false |
| grid | - | object | - | | grid | The grid type of list. You can set grid to something like {gutter: 16, column: 4} | object | - |
| header | - | string\|ReactNode | - | | header | List header renderer | string\|ReactNode | - |
| footer | - | string\|ReactNode | - | | footer | List footer renderer | string\|ReactNode | - |
### List grid props ### List grid props
| Property | Description | Type | Default | | Property | Description | Type | Default |
---------|-------------|------|--------- ---------|-------------|------|---------
| gutter | - | number | 0 | | gutter | spacing between grid | number | 0 |
| column | - | number | - | | column | column of grid | number | - |
| xs | `<768px` - | number | - | | xs | `<576px` column of grid | number | - |
| sm | `≥768px` - | number | - | | sm | `≥576px` column of grid | number | - |
| md | `≥992px` - | number | - | | md | `≥768px` column of grid | number | - |
| lg | `≥1200px` - | number | - | | lg | `≥992px` column of grid | number | - |
| xl | `≥1600px` - | number | - | | xl | `≥1200px` column of grid | number | - |
| xxl | `≥1600px` column of grid | number | - |
### List.Item ### List.Item
| Property | Description | Type | Default | | Property | Description | Type | Default |
---------|-------------|------|--------- ---------|-------------|------|---------
| extra | - | string\|ReactNode | - | | extra | The extra content of list item. If `itemLayout` is `vertical`, shows the content on right, otherwise shows content on the far right. | string\|ReactNode | - |
| actions | - | Array<ReactNode> | - | | actions | The actions content of list item. If `itemLayout` is `vertical`, shows the content on bottom, otherwise shows content on the far right. | Array<ReactNode> | - |
### List.Item.Meta ### List.Item.Meta
| Property | Description | Type | Default | | Property | Description | Type | Default |
---------|-------------|------|--------- ---------|-------------|------|---------
| avatar | - | ReactNode | - | | avatar | The avatar of list item | ReactNode | - |
| title | - | string\|ReactNode | - | | title | The title of list item | string\|ReactNode | - |
| description | - | string\|ReactNode | - | | description | The description of list item | string\|ReactNode | - |

23
components/list/index.zh-CN.md
View File

@ -20,11 +20,11 @@ cols: 1
|----------|----------------|----------|--------------| |----------|----------------|----------|--------------|
| bordered | 是否展示边框 | boolean | false | | bordered | 是否展示边框 | boolean | false |
| split | 是否展示分割线 | boolean | true | | split | 是否展示分割线 | boolean | true |
| loading | 当卡片内容还在加载中时，可以用 loading 展示一个占位 | boolean | false | | loading | 当卡片内容还在加载中时，可以用 `loading` 展示一个占位 | boolean | false |
| itemLayout | 设置 List.Item 布局, 设置成 vertical 则竖直样式显示, 默认横排 | string | - | | itemLayout | 设置 `List.Item` 布局, 设置成 `vertical` 则竖直样式显示, 默认横排 | string | - |
| loadMore | 加载更多 | string\|ReactNode | - | | loadMore | 加载更多 | string\|ReactNode | - |
| pagination | 对应的 pagination 配置, 设置 false 不显示 | boolean \| object | false | | pagination | 对应的 `pagination` 配置, 设置 `false` 不显示 | boolean\|object | false |
| grid | 列表栅格 | object | - | | grid | 列表栅格配置 | object | - |
| header | 列表头部 | string\|ReactNode | - | | header | 列表头部 | string\|ReactNode | - |
| footer | 列表底部 | string\|ReactNode | - | | footer | 列表底部 | string\|ReactNode | - |
@ -33,18 +33,19 @@ cols: 1
---------|-------------|------|--------- ---------|-------------|------|---------
| gutter | 栅格间隔 | number | 0 | | gutter | 栅格间隔 | number | 0 |
| column | 列数 | number | - | | column | 列数 | number | - |
| xs | `<768px` 展示的列数 | number | - | | xs | `<576px` 展示的列数 | number | - |
| sm | `≥768px` 展示的列数 | number | - | | sm | `≥576px` 展示的列数 | number | - |
| md | `≥992px` 展示的列数 | number | - | | md | `≥768px` 展示的列数 | number | - |
| lg | `≥1200px` 展示的列数 | number | - | | lg | `≥992px` 展示的列数 | number | - |
| xl | `≥1600px` 展示的列数 | number | - | | xl | `≥1200px` 展示的列数 | number | - |
| xxl | `≥1600px` 展示的列数 | number | - |
### List.Item ### List.Item
| 参数 | 说明 | 类型 | 默认值 | | 参数 | 说明 | 类型 | 默认值 |
---------|-------------|------|--------- ---------|-------------|------|---------
| extra | 额外内容, 通常用在 itemLayout 为 vertical 的情况下, 展示右侧内容; horizontal 展示在列表元素最右侧 | string\|ReactNode | - | | extra | 额外内容, 通常用在 `itemLayout` 为 `vertical` 的情况下, 展示右侧内容; `horizontal` 展示在列表元素最右侧 | string\|ReactNode | - |
| actions | 列表操作组，根据 itemLayout 的不同, 位置在卡片底部或者最右侧 | Array<ReactNode> | - | | actions | 列表操作组，根据 `itemLayout` 的不同, 位置在卡片底部或者最右侧 | Array<ReactNode\> | - |
### List.Item.Meta ### List.Item.Meta