📝 Optimize table and form documentation

This commit is contained in:
afc163 2019-04-14 14:24:06 +08:00
parent a091c726f8
commit 60f4930348
No known key found for this signature in database
GPG Key ID: 5F00908D72002306
7 changed files with 22 additions and 12 deletions

View File

@ -7,7 +7,12 @@ title: Form
Form is used to collect, validate, and submit the user input, usually contains various form items including checkbox, radio, input, select, and etc.
## Form
## When to use
- When you need to create a instance or collect information.
- When you need to validate fields in certain rules.
## Form Component
You can align the controls of a `form` using the `layout` prop
@ -15,7 +20,7 @@ You can align the controls of a `form` using the `layout` prop
- `vertical`to vertically align the `label`s and controls of the fields.
- `inline`to render form fields in one line.
## Form fields
## Form Item Component
A form consists of one or more form fields whose type includes input, textarea, checkbox, radio, select, tag, and more.
A form field is defined using `<Form.Item />`.

View File

@ -8,6 +8,11 @@ title: Form
具有数据收集、校验和提交功能的表单,包含复选框、单选框、输入框、下拉选择框等元素。
## 何时使用
- 用于创建一个实体或收集信息。
- 需要对输入的数据类型进行校验时。
## 表单
我们为 `form` 提供了以下三种排列方式:

View File

@ -9,7 +9,7 @@ title:
适合同时展示有大量数据和数据列。
> 若列头与内容不对齐或出现列重复,请指定**固定列**的宽度 `width`
> 若列头与内容不对齐或出现列重复,请指定**固定列**的宽度 `width`如果指定 `width` 不生效,请尝试建议留一列不设宽度以适应弹性布局,或者检查是否有[超长连续字段破坏布局](https://github.com/ant-design/ant-design/issues/13825#issuecomment-449889241)。
>
> 建议指定 `scroll.x` 为大于表格宽度的固定值或百分比。注意,且非固定列宽度之和不要超过 `scroll.x`
@ -17,7 +17,7 @@ title:
A Solution for displaying large amounts of data with long columns.
> Specify the width of columns if header and cell do not align properly. (Leave one column at least without width to fit fluid layout)
> Specify the width of columns if header and cell do not align properly. If specified width is not working, please try to leave one column at least without width to fit fluid layout, or make sure no [long word to break table layout](https://github.com/ant-design/ant-design/issues/13825#issuecomment-449889241).
>
> A fixed value which is greater than table width for `scroll.x` is recommended. The sum of unfixed columns should not greater than `scroll.x`.

View File

@ -9,7 +9,7 @@ title:
对于列数很多的数据,可以固定前后的列,横向滚动查看其它数据,需要和 `scroll.x` 配合使用。
> 若列头与内容不对齐或出现列重复,请指定**固定列**的宽度 `width`
> 若列头与内容不对齐或出现列重复,请指定**固定列**的宽度 `width`如果指定 `width` 不生效,请尝试建议留一列不设宽度以适应弹性布局,或者检查是否有[超长连续字段破坏布局](https://github.com/ant-design/ant-design/issues/13825#issuecomment-449889241)。
>
> 建议指定 `scroll.x` 为大于表格宽度的固定值或百分比。注意,且非固定列宽度之和不要超过 `scroll.x`
@ -17,7 +17,7 @@ title:
To fix some columns and scroll inside other columns, and you must set `scroll.x` meanwhile.
> Specify the width of columns if header and cell do not align properly. (Leave one column at least without width to fit fluid layout)
> Specify the width of columns if header and cell do not align properly. If specified width is not working, please try to leave one column at least without width to fit fluid layout, or make sure no [long word to break table layout](https://github.com/ant-design/ant-design/issues/13825#issuecomment-449889241).
>
> A fixed value which is greater than table width for `scroll.x` is recommended. The sum of unfixed columns should not greater than `scroll.x`.

View File

@ -9,13 +9,13 @@ title:
方便一页内展示大量数据。
需要指定 column 的 `width` 属性,否则列头和内容可能不对齐。(建议留一列不设宽度以适应弹性布局)
需要指定 column 的 `width` 属性,否则列头和内容可能不对齐。如果指定 `width` 不生效,请尝试建议留一列不设宽度以适应弹性布局,或者检查是否有[超长连续字段破坏布局](https://github.com/ant-design/ant-design/issues/13825#issuecomment-449889241)。
## en-US
Display large amounts of data in scrollable view.
> Specify width of columns if header and cell do not align properly. (Leave one column at least without width to fit fluid layout)
> Specify width of columns if header and cell do not align properly. If specified width is not working, please try to leave one column at least without width to fit fluid layout, or make sure no [long word to break table layout](https://github.com/ant-design/ant-design/issues/13825#issuecomment-449889241).
````jsx
import { Table } from 'antd';

View File

@ -71,7 +71,7 @@ const columns = [{
| rowClassName | Row's className | Function(record, index):string | - |
| rowKey | Row's unique key, could be a string or function that returns a string | string\|Function(record):string | `key` |
| rowSelection | Row selection [config](#rowSelection) | object | null |
| scroll | Set horizontal or vertical scrolling, can also be used to specify the width and height of the scroll area. It is recommended to set a number for `x`, if you want to set it to `true`, you need to add style `.ant-table td { white-space: nowrap; }`. | { x: number \| true, y: number } | - |
| scroll | Set horizontal or vertical scrolling, can also be used to specify the width and height of the scroll area, could be number, percent value, `ture` and ['max-content'](https://developer.mozilla.org/en-US/docs/Web/CSS/width) | { x: number \| true, y: number } | - |
| showHeader | Whether to show table header | boolean | `true` |
| size | Size of table | `default` \| `middle` \| `small` | `default` |
| title | Table title renderer | Function(currentPageData) | |
@ -129,7 +129,7 @@ One of the Table `columns` prop for describing the table's columns, Column has t
| sortOrder | Order of sorted values: `'ascend'` `'descend'` `false` | boolean\|string | - |
| sortDirections | supported sort way, could be `'ascend'`, `'descend'` | Array | `['ascend', 'descend']` |
| title | Title of this column | ReactNode\|({ sortOrder, filters }) => ReactNode | - |
| width | Width of this column | string\|number | - |
| width | Width of this column ([width not working?](https://github.com/ant-design/ant-design/issues/13825#issuecomment-449889241)) | string\|number | - |
| onCell | Set props on per cell | Function(record, rowIndex) | - |
| onFilter | Callback executed when the confirm filter button is clicked | Function | - |
| onFilterDropdownVisibleChange | Callback executed when `filterDropdownVisible` is changed | function(visible) {} | - |

View File

@ -76,7 +76,7 @@ const columns = [{
| rowClassName | 表格行的类名 | Function(record, index):string | - |
| rowKey | 表格行 key 的取值,可以是字符串或一个函数 | string\|Function(record):string | 'key' |
| rowSelection | 表格行是否可选择,[配置项](#rowSelection) | object | null |
| scroll | 设置横向或纵向滚动,也可用于指定滚动区域的宽和高,建议为 `x` 设置一个数字,如果要设置为 `true`,需要配合样式 `.ant-table td { white-space: nowrap; }` | { x: number \| true, y: number } | - |
| scroll | 设置横向或纵向滚动,也可用于指定滚动区域的宽和高,可以设置为像素值,百分比,`true` 和 ['max-content'](https://developer.mozilla.org/zh-CN/docs/Web/CSS/width#max-content) | { x: number \| true, y: number } | - |
| showHeader | 是否显示表头 | boolean | true |
| size | 表格大小 | default \| middle \| small | default |
| title | 表格标题 | Function(currentPageData) | |
@ -134,7 +134,7 @@ const columns = [{
| sortOrder | 排序的受控属性,外界可用此控制列的排序,可设置为 `'ascend'` `'descend'` `false` | boolean\|string | - |
| sortDirections | 支持的排序方式,取值为 `'ascend'` `'descend'` | Array | `['ascend', 'descend']` |
| title | 列头显示文字 | ReactNode\|({ sortOrder, filters }) => ReactNode | - |
| width | 列宽度 | string\|number | - |
| width | 列宽度[指定了也不生效?](https://github.com/ant-design/ant-design/issues/13825#issuecomment-449889241) | string\|number | - |
| onCell | 设置单元格属性 | Function(record, rowIndex) | - |
| onFilter | 本地模式下,确定筛选的运行函数 | Function | - |
| onFilterDropdownVisibleChange | 自定义筛选菜单可见变化时调用 | function(visible) {} | - |