From 58089c78323fd4be47ee5fc06c7db377b4619043 Mon Sep 17 00:00:00 2001 From: niko <644506165@qq.com> Date: Thu, 12 Oct 2017 22:40:49 -0500 Subject: [PATCH] [WIP] List: update english docs (#7880) List: update english docs --- .../__tests__/__snapshots__/demo.test.js.snap | 88 +++++++++++++++++-- components/list/demo/basic.md | 4 +- components/list/demo/grid.md | 4 +- components/list/demo/infinite-load.md | 2 +- .../list/demo/infinite-virtualized-load.md | 4 +- components/list/demo/loadmore.md | 8 +- components/list/demo/resposive.md | 14 ++- components/list/demo/simple.md | 8 +- components/list/demo/vertical.md | 6 +- components/list/index.en-US.md | 43 ++++----- components/list/index.zh-CN.md | 23 ++--- 11 files changed, 148 insertions(+), 56 deletions(-) diff --git a/components/list/__tests__/__snapshots__/demo.test.js.snap b/components/list/__tests__/__snapshots__/demo.test.js.snap index 173899795e..fd37f95686 100644 --- a/components/list/__tests__/__snapshots__/demo.test.js.snap +++ b/components/list/__tests__/__snapshots__/demo.test.js.snap @@ -376,7 +376,7 @@ exports[`renders ./components/list/demo/loadmore.md correctly 1`] = ` />
}
diff --git a/components/list/demo/resposive.md b/components/list/demo/resposive.md index d48b5bedd9..216ea2460e 100644 --- a/components/list/demo/resposive.md +++ b/components/list/demo/resposive.md @@ -2,16 +2,16 @@ order: 5 title: zh-CN: 响应式的栅格列表 - en-US: Grid + en-US: Responsive grid list --- ## zh-CN -响应式的栅格列表。 +响应式的栅格列表。尺寸与 [Layout Grid](https://ant.design/components/grid-cn/#Col) 保持一致。 ## en-US -Responsive Grid List. +Responsive grid list. The size property is as same as [Layout Grid](https://ant.design/components/grid/#Col). ````jsx import { List, Card } from 'antd'; @@ -29,11 +29,17 @@ const data = [ { title: 'Title 4', }, + { + title: 'Title 5', + }, + { + title: 'Title 6', + }, ]; ReactDOM.render( ( diff --git a/components/list/demo/simple.md b/components/list/demo/simple.md index 99e6e2e6e9..93c1a7c3d0 100644 --- a/components/list/demo/simple.md +++ b/components/list/demo/simple.md @@ -2,7 +2,7 @@ order: 0 title: zh-CN: 简单列表 - en-US: Simple + en-US: Simple list --- ## zh-CN @@ -15,7 +15,11 @@ title: ## 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 import { List } from 'antd'; diff --git a/components/list/demo/vertical.md b/components/list/demo/vertical.md index f609802a68..a0dfd95f2c 100644 --- a/components/list/demo/vertical.md +++ b/components/list/demo/vertical.md @@ -2,16 +2,16 @@ order: 3 title: zh-CN: 竖排列表样式 - en-US: Layout Vertical + en-US: Vertical --- ## zh-CN -基础列表。 +通过设置 `itemLayout` 属性为 `vertical` 可实现竖排列表样式。 ## en-US -Basic List. +Setting `itemLayout` property with `vertical` to create a vertical list. ````jsx import { List, Avatar, Icon } from 'antd'; diff --git a/components/list/index.en-US.md b/components/list/index.en-US.md index 03a17d30a1..c015a2da27 100644 --- a/components/list/index.en-US.md +++ b/components/list/index.en-US.md @@ -17,38 +17,39 @@ A list can be used to display content related to a single subject. The content c | Property | Description | Type | Default | |----------|----------------|----------|--------------| -| bordered | - | string \| boolean | false | -| split | - | string \| boolean | true | -| loading | -| boolean | false | -| itemLayout | - | string | - | -| loadMore | -| string\|ReactNode | - | -| pagination | - | boolean \| object | false | -| grid | - | object | - | -| header | - | string\|ReactNode | - | -| footer | - | string\|ReactNode | - | +| bordered | Toggles rendering of the border around the list | boolean | false | +| split | Toggles rendering of the split under the list item | boolean | true | +| loading | Shows a loading indicator while the contents of the list are being fetched | boolean | false | +| itemLayout | The layout of list, default is `horizontal`, If a vertical list is desired, set the itemLayout property to `vertical` | string | - | +| loadMore | Shows a load more content | string\|ReactNode | - | +| pagination | Pagination [config](https://ant.design/components/pagination/), hide it by setting it to false | boolean \| object | false | +| grid | The grid type of list. You can set grid to something like {gutter: 16, column: 4} | object | - | +| header | List header renderer | string\|ReactNode | - | +| footer | List footer renderer | string\|ReactNode | - | ### List grid props | Property | Description | Type | Default | ---------|-------------|------|--------- -| gutter | - | number | 0 | -| column | - | number | - | -| xs | `<768px` - | number | - | -| sm | `≥768px` - | number | - | -| md | `≥992px` - | number | - | -| lg | `≥1200px` - | number | - | -| xl | `≥1600px` - | number | - | +| gutter | spacing between grid | number | 0 | +| column | column of grid | number | - | +| xs | `<576px` column of grid | number | - | +| sm | `≥576px` column of grid | number | - | +| md | `≥768px` column of grid | number | - | +| lg | `≥992px` column of grid | number | - | +| xl | `≥1200px` column of grid | number | - | +| xxl | `≥1600px` column of grid | number | - | ### List.Item | Property | Description | Type | Default | ---------|-------------|------|--------- -| extra | - | string\|ReactNode | - | -| actions | - | Array | - | +| 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 | The actions content of list item. If `itemLayout` is `vertical`, shows the content on bottom, otherwise shows content on the far right. | Array | - | ### List.Item.Meta | Property | Description | Type | Default | ---------|-------------|------|--------- -| avatar | - | ReactNode | - | -| title | - | string\|ReactNode | - | -| description | - | string\|ReactNode | - | +| avatar | The avatar of list item | ReactNode | - | +| title | The title of list item | string\|ReactNode | - | +| description | The description of list item | string\|ReactNode | - | diff --git a/components/list/index.zh-CN.md b/components/list/index.zh-CN.md index 9924246c2c..245fce9c84 100644 --- a/components/list/index.zh-CN.md +++ b/components/list/index.zh-CN.md @@ -20,11 +20,11 @@ cols: 1 |----------|----------------|----------|--------------| | bordered | 是否展示边框 | boolean | false | | split | 是否展示分割线 | boolean | true | -| loading | 当卡片内容还在加载中时，可以用 loading 展示一个占位 | boolean | false | -| itemLayout | 设置 List.Item 布局, 设置成 vertical 则竖直样式显示, 默认横排 | string | - | +| loading | 当卡片内容还在加载中时，可以用 `loading` 展示一个占位 | boolean | false | +| itemLayout | 设置 `List.Item` 布局, 设置成 `vertical` 则竖直样式显示, 默认横排 | string | - | | loadMore | 加载更多 | string\|ReactNode | - | -| pagination | 对应的 pagination 配置, 设置 false 不显示 | boolean \| object | false | -| grid | 列表栅格 | object | - | +| pagination | 对应的 `pagination` 配置, 设置 `false` 不显示 | boolean\|object | false | +| grid | 列表栅格配置 | object | - | | header | 列表头部 | string\|ReactNode | - | | footer | 列表底部 | string\|ReactNode | - | @@ -33,18 +33,19 @@ cols: 1 ---------|-------------|------|--------- | gutter | 栅格间隔 | number | 0 | | column | 列数 | number | - | -| xs | `<768px` 展示的列数 | number | - | -| sm | `≥768px` 展示的列数 | number | - | -| md | `≥992px` 展示的列数 | number | - | -| lg | `≥1200px` 展示的列数 | number | - | -| xl | `≥1600px` 展示的列数 | number | - | +| xs | `<576px` 展示的列数 | number | - | +| sm | `≥576px` 展示的列数 | number | - | +| md | `≥768px` 展示的列数 | number | - | +| lg | `≥992px` 展示的列数 | number | - | +| xl | `≥1200px` 展示的列数 | number | - | +| xxl | `≥1600px` 展示的列数 | number | - | ### List.Item | 参数 | 说明 | 类型 | 默认值 | ---------|-------------|------|--------- -| extra | 额外内容, 通常用在 itemLayout 为 vertical 的情况下, 展示右侧内容; horizontal 展示在列表元素最右侧 | string\|ReactNode | - | -| actions | 列表操作组，根据 itemLayout 的不同, 位置在卡片底部或者最右侧 | Array | - | +| extra | 额外内容, 通常用在 `itemLayout` 为 `vertical` 的情况下, 展示右侧内容; `horizontal` 展示在列表元素最右侧 | string\|ReactNode | - | +| actions | 列表操作组，根据 `itemLayout` 的不同, 位置在卡片底部或者最右侧 | Array | - | ### List.Item.Meta