mirror/ant-design
1
0
Fork 0
mirror of https://github.com/ant-design/ant-design.git synced 2024-12-18 11:18:14 +08:00
Code Issues Actions 15 Packages Projects Releases Wiki Activity

docs: improve typography API table (#26102)

Browse Source 
* docs: improve typography API table

* Update components/typography/index.en-US.md

Co-authored-by: xrkffgg <xrkffgg@gmail.com>

* Update components/typography/index.en-US.md

Co-authored-by: xrkffgg <xrkffgg@gmail.com>

* docs: update doc

* docs: update

Co-authored-by: xrkffgg <xrkffgg@gmail.com>
Co-authored-by: xrkffgg <xrkffgg@vip.qq.com>
This commit is contained in:
偏右 2020-08-10 10:44:16 +08:00 committed by GitHub
parent d0c4e4b3cf
commit 487d3e46c0
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 126 additions and 38 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

82
components/typography/index.en-US.md
View File

@ -20,11 +20,11 @@ Basic text writing, including headings, body text, lists, and more.
| Property | Description | Type | Default | Version | | Property | Description | Type | Default | Version |
| --- | --- | --- | --- | --- | | --- | --- | --- | --- | --- |
| code | Code style | boolean | false | | | code | Code style | boolean | false | |
| copyable | Whether to be copyable, customize it via setting an object | boolean \| { text: string, onCopy: function, icon: ReactNode, tooltips: boolean \| ReactNode } | false | See [below](#copyable) | | copyable | Whether to be copyable, customize it via setting an object | boolean \| [copyable](#copyable) | false | [copyable](#copyable) |
| delete | Deleted line style | boolean | false | | | delete | Deleted line style | boolean | false | |
| disabled | Disabled content | boolean | false | | | disabled | Disabled content | boolean | false | |
| editable | If editable. Can control edit state when is object | boolean \| { editing: boolean, maxLength: number, autoSize: true \| false \| { minRows: number, maxRows: number }, onStart: function, onChange: function(string), icon: ReactNode, tooltip: boolean \| ReactNode } | false | See [below](#editable) | | editable | If editable. Can control edit state when is object | boolean \| [editable](#editable) | false | [editable](#editable) |
| ellipsis | Display ellipsis when text overflows. Should set width when ellipsis needed | boolean | false | | | ellipsis | Display ellipsis when text overflows, can configure rows and expandable by using object | boolean \| [ellipsis](#ellipsis) | false | [ellipsis](#ellipsis) |
| mark | Marked style | boolean | false | | | mark | Marked style | boolean | false | |
| keyboard | Keyboard style | boolean | false | 4.3.0 | | keyboard | Keyboard style | boolean | false | 4.3.0 |
| underline | Underlined style | boolean | false | | | underline | Underlined style | boolean | false | |
@ -37,11 +37,11 @@ Basic text writing, including headings, body text, lists, and more.
| Property | Description | Type | Default | Version | | Property | Description | Type | Default | Version |
| --- | --- | --- | --- | --- | | --- | --- | --- | --- | --- |
| code | Code style | boolean | false | | | code | Code style | boolean | false | |
| copyable | Whether to be copyable, customize it via setting an object | boolean \| { text: string, onCopy: function, icon: ReactNode, tooltips: boolean \| ReactNode } | false | See [below](#copyable) | | copyable | Whether to be copyable, customize it via setting an object | boolean \| [copyable](#copyable) | false | [copyable](#copyable) |
| delete | Deleted line style | boolean | false | | | delete | Deleted line style | boolean | false | |
| disabled | Disabled content | boolean | false | | | disabled | Disabled content | boolean | false | |
| editable | If editable. Can control edit state when is object | boolean \| { editing: boolean, maxLength: number, autoSize: true \| false \| { minRows: number, maxRows: number }, onStart: function, onChange: function(string), icon: ReactNode, tooltip: boolean \| ReactNode } | false | See [below](#editable) | | editable | If editable. Can control edit state when is object | boolean \| [editable](#editable) | false | [editable](#editable) |
| ellipsis | Display ellipsis when text overflows. Can configure rows and expandable by using object | boolean \| { rows: number, expandable: boolean, onExpand: function(event), onEllipsis: function(ellipsis) } | false | onEllipsis: 4.2.0 | | ellipsis | Display ellipsis when text overflows, can configure rows and expandable by using object | boolean \| [ellipsis](#ellipsis) | false | [ellipsis](#ellipsis) |
| level | Set content importance. Match with `h1`, `h2`, `h3`, `h4`, `h5` | number: 1, 2, 3, 4, 5 | 1 | 5: 4.6.0 | | level | Set content importance. Match with `h1`, `h2`, `h3`, `h4`, `h5` | number: 1, 2, 3, 4, 5 | 1 | 5: 4.6.0 |
| mark | Marked style | boolean | false | | | mark | Marked style | boolean | false | |
| underline | Underlined style | boolean | false | | | underline | Underlined style | boolean | false | |
@ -53,11 +53,11 @@ Basic text writing, including headings, body text, lists, and more.
| Property | Description | Type | Default | Version | | Property | Description | Type | Default | Version |
| --- | --- | --- | --- | --- | | --- | --- | --- | --- | --- |
| code | Code style | boolean | false | | | code | Code style | boolean | false | |
| copyable | Whether to be copyable, customize it via setting an object | boolean \| { text: string, onCopy: function, icon: ReactNode, tooltips: boolean \| ReactNode } | false | See [below](#copyable) | | copyable | Whether to be copyable, customize it via setting an object | boolean \| [copyable](#copyable) | false | [copyable](#copyable) |
| delete | Deleted line style | boolean | false | | | delete | Deleted line style | boolean | false | |
| disabled | Disabled content | boolean | false | | | disabled | Disabled content | boolean | false | |
| editable | If editable. Can control edit state when is object | boolean \| { editing: boolean, maxLength: number, autoSize: true \| false \| { minRows: number, maxRows: number }, onStart: function, onChange: function(string), icon: ReactNode, tooltip: boolean \| ReactNode } | false | See [below](#editable) | | editable | If editable. Can control edit state when is object | boolean \| [editable](#editable) | false | [editable](#editable) |
| ellipsis | Display ellipsis when text overflows. Can configure rows expandable and suffix by using object | boolean \| { rows: number, expandable: boolean, suffix: string, symbol: React.ReactNode, onExpand: function(event), onEllipsis: function(ellipsis) } | false | onEllipsis: 4.2.0 | | ellipsis | Display ellipsis when text overflows, can configure rows and expandable by using object | boolean \| [ellipsis](#ellipsis) | false | [ellipsis](#ellipsis) |
| mark | Marked style | boolean | false | | | mark | Marked style | boolean | false | |
| underline | Underlined style | boolean | false | | | underline | Underlined style | boolean | false | |
| onChange | Trigger when user edits the content | function(string) | - | | | onChange | Trigger when user edits the content | function(string) | - | |
@ -66,23 +66,67 @@ Basic text writing, including headings, body text, lists, and more.
### copyable ### copyable
`copyable` supports `{ icon: <SmileOutlined /> }` to customize copy icon since `4.4.0`. ```
{
text: string,
onCopy: function,
icon: ReactNode,
tooltips: false | [ReactNode, ReactNode],
}
```
`copyable` supports `{ tooltips: ['click here', 'you clicked!!'] }` to replace tooltips text since `4.4.0`. | Property | Description | Type | Default | Version |
| --- | --- | --- | --- | --- |
`copyable` supports `{ icon: [<SmileOutlined key="copy-icon" />, <SmileFilled key="copied-icon" />] }` to customize copy and copied icon since `4.6.0`. | text | The text to copy | string | - | |
| onCopy | Called when copied text | function | - | |
`copyable` supports `{ tooltips: false }` to hide tooltips since `4.6.0`. | icon | Custom copy icon: \[copyIcon, copiedIcon] | \[ReactNode, ReactNode\] | - | 4.6.0 |
| tooltips | Custom tooltip text, hide when it is false | \[ReactNode, ReactNode\] | \[`Copy`, `Copied`] | 4.4.0 |
### editable ### editable
`editable` supports `{ maxLength: 50 }` to config TextArea `maxLength` props since `4.6.0`. ```
{
icon: ReactNode,
tooltip: boolean | ReactNode,
editing: boolean,
maxLength: number,
autoSize: boolean | { minRows: number, maxRows: number },
onStart: function,
onChange: function(string),
}
```
`editable` supports `{ autoSize: { maxRows: 5, minRows: 3 } }` to config TextArea `autoSize` props since `4.6.0`. | Property | Description | Type | Default | Version |
| --- | --- | --- | --- | --- |
| icon | Custom editable icon | ReactNode | &lt;EditOutlined /> | 4.6.0 |
| tooltip | Custom tooltip text, hide when it is false | boolean \| ReactNode | `Edit` | 4.6.0 |
| editing | Whether to be editable | boolean | false | |
| maxLength | `maxLength` attribute of textarea | number | - | 4.4.0 |
| autoSize | `autoSize` attribute of textarea | boolean \| { minRows: number, maxRows: number } | - | 4.4.0 |
| onStart | Called when enter editable state | function | - | |
| onChange | Called when input at textarea | function(event) | - | |
`editable` supports `{ icon: <HighlightOutlined /> }` to customize edit icon since `4.6.0`. ### ellipsis
`editable` supports `{ tooltips: 'click to edit text' }` to replace tooltip text since `4.6.0`. ```
{
rows: number,
expandable: boolean,
suffix: string,
symbol: ReactNode,
onExpand: function(event),
onEllipsis: function(ellipsis),
}
```
| Property | Description | Type | Default | Version |
| ---------- | ----------------------------------------- | ------------------ | ------- | ------- |
| rows | Max rows of content | number | - | |
| expandable | Whether to be expandable | boolean | - | |
| suffix | Suffix of ellipsis content | ReactNode | - | |
| symbol | Custom `...` symbol of ellipsis | ReactNode | `...` | |
| onExpand | Called when expand content | function(event) | - | |
| onEllipsis | Called when enter or leave ellipsis state | function(ellipsis) | - | 4.2.0 |
## FAQ ## FAQ

82
components/typography/index.zh-CN.md
View File

@ -21,11 +21,11 @@ cover: https://gw.alipayobjects.com/zos/alicdn/GOM1KQ24O/Typography.svg
| 参数 | 说明 | 类型 | 默认值 | 版本 | | 参数 | 说明 | 类型 | 默认值 | 版本 |
| --- | --- | --- | --- | --- | | --- | --- | --- | --- | --- |
| code | 添加代码样式 | boolean | false | | | code | 添加代码样式 | boolean | false | |
| copyable | 是否可拷贝，为对象时可进行各种自定义 | boolean \| { text: string, onCopy: function, icon: ReactNode, tooltips: boolean \| ReactNode } | false | 说明[见下](#copyable) | | copyable | 是否可拷贝，为对象时可进行各种自定义 | boolean \| [copyable](#copyable) | false | [copyable](#copyable) |
| delete | 添加删除线样式 | boolean | false | | | delete | 添加删除线样式 | boolean | false | |
| disabled | 禁用文本 | boolean | false | | | disabled | 禁用文本 | boolean | false | |
| editable | 是否可编辑，为对象时可对编辑进行控制 | boolean \| { editing: boolean, maxLength: number, autoSize: true \| false \| { minRows: number, maxRows: number }, onStart: function, onChange: function(string), icon: ReactNode, tooltip: boolean \| ReactNode } | false | 说明[见下](#editable) | | editable | 是否可编辑，为对象时可对编辑进行控制 | boolean \| [editable](#editable) | false | [editable](#editable) |
| ellipsis | 设置自动溢出省略，需要设置元素宽度 | boolean | false | | | ellipsis | 自动溢出省略，为对象时可设置省略行数、是否可展开、添加后缀等 | boolean \| [ellipsis](#ellipsis) | false | [ellipsis](#ellipsis) |
| mark | 添加标记样式 | boolean | false | | | mark | 添加标记样式 | boolean | false | |
| keyboard | 添加键盘样式 | boolean | false | 4.3.0 | | keyboard | 添加键盘样式 | boolean | false | 4.3.0 |
| underline | 添加下划线样式 | boolean | false | | | underline | 添加下划线样式 | boolean | false | |
@ -37,11 +37,11 @@ cover: https://gw.alipayobjects.com/zos/alicdn/GOM1KQ24O/Typography.svg
| 参数 | 说明 | 类型 | 默认值 | 版本 | | 参数 | 说明 | 类型 | 默认值 | 版本 |
| --- | --- | --- | --- | --- | | --- | --- | --- | --- | --- |
| code | 添加代码样式 | boolean | false | | | code | 添加代码样式 | boolean | false | |
| copyable | 是否可拷贝，为对象时可进行各种自定义 | boolean \| { text: string, onCopy: function, icon: ReactNode, tooltips: boolean \| ReactNode } | false | 说明[见下](#copyable) | | copyable | 是否可拷贝，为对象时可进行各种自定义 | boolean \| [copyable](#copyable) | false | [copyable](#copyable) |
| delete | 添加删除线样式 | boolean | false | | | delete | 添加删除线样式 | boolean | false | |
| disabled | 禁用文本 | boolean | false | | | disabled | 禁用文本 | boolean | false | |
| editable | 是否可编辑，为对象时可对编辑进行控制 | boolean \| { editing: boolean, maxLength: number, autoSize: true \| false \| { minRows: number, maxRows: number }, onStart: function, onChange: function(string), icon: ReactNode, tooltip: boolean \| ReactNode } | false | 说明[见下](#editable) | | editable | 是否可编辑，为对象时可对编辑进行控制 | boolean \| [editable](#editable) | false | [editable](#editable) |
| ellipsis | 自动溢出省略，为对象时可设置省略行数与是否可展开等 | boolean \| { rows: number, expandable: boolean, onExpand: function(event), onEllipsis: function(ellipsis) } | false | onEllipsis: 4.2.0 | | ellipsis | 自动溢出省略，为对象时可设置省略行数、是否可展开、添加后缀等 | boolean \| [ellipsis](#ellipsis) | false | [ellipsis](#ellipsis) |
| level | 重要程度，相当于 `h1`、`h2`、`h3`、`h4`、`h5` | number: 1, 2, 3, 4, 5 | 1 | 5: 4.6.0 | | level | 重要程度，相当于 `h1`、`h2`、`h3`、`h4`、`h5` | number: 1, 2, 3, 4, 5 | 1 | 5: 4.6.0 |
| mark | 添加标记样式 | boolean | false | | | mark | 添加标记样式 | boolean | false | |
| underline | 添加下划线样式 | boolean | false | | | underline | 添加下划线样式 | boolean | false | |
@ -53,11 +53,11 @@ cover: https://gw.alipayobjects.com/zos/alicdn/GOM1KQ24O/Typography.svg
| 参数 | 说明 | 类型 | 默认值 | 版本 | | 参数 | 说明 | 类型 | 默认值 | 版本 |
| --- | --- | --- | --- | --- | | --- | --- | --- | --- | --- |
| code | 添加代码样式 | boolean | false | | | code | 添加代码样式 | boolean | false | |
| copyable | 是否可拷贝，为对象时可进行各种自定义 | boolean \| { text: string, onCopy: function, icon: ReactNode, tooltips: boolean \| ReactNode } | false | 说明[见下](#copyable) | | copyable | 是否可拷贝，为对象时可进行各种自定义 | boolean \| [copyable](#copyable) | false | [copyable](#copyable) |
| delete | 添加删除线样式 | boolean | false | | | delete | 添加删除线样式 | boolean | false | |
| disabled | 禁用文本 | boolean | false | | | disabled | 禁用文本 | boolean | false | |
| editable | 是否可编辑，为对象时可对编辑进行控制 | boolean \| { editing: boolean, maxLength: number, autoSize: true \| false \| { minRows: number, maxRows: number }, onStart: function, onChange: function(string), icon: ReactNode, tooltip: boolean \| ReactNode } | false | 说明[见下](#editable) | | editable | 是否可编辑，为对象时可对编辑进行控制 | boolean \| [editable](#editable) | false | [editable](#editable) |
| ellipsis | 自动溢出省略，为对象时可设置省略行数、是否可展开、添加后缀等 | boolean \| { rows: number, expandable: boolean, suffix: string, symbol: React.ReactNode, onExpand: function(event), onEllipsis: function(ellipsis) } | false | onEllipsis: 4.2.0 | | ellipsis | 自动溢出省略，为对象时可设置省略行数、是否可展开、添加后缀等 | boolean \| [ellipsis](#ellipsis) | false | [ellipsis](#ellipsis) |
| mark | 添加标记样式 | boolean | false | | | mark | 添加标记样式 | boolean | false | |
| underline | 添加下划线样式 | boolean | false | | | underline | 添加下划线样式 | boolean | false | |
| onChange | 当用户提交编辑内容时触发 | function(string) | - | | | onChange | 当用户提交编辑内容时触发 | function(string) | - | |
@ -66,23 +66,67 @@ cover: https://gw.alipayobjects.com/zos/alicdn/GOM1KQ24O/Typography.svg
### copyable ### copyable
从 `4.4.0` 版本开始，`copyable` 支持使用 `{ icon: <SmileOutlined /> }` 设置 copy 图标。 ```
{
text: string,
onCopy: function,
icon: ReactNode,
tooltips: false | [ReactNode, ReactNode],
}
```
从 `4.4.0` 版本开始，`copyable` 支持使用 `{ tooltips: ['click here', 'you clicked!!'] }` 设置 tooltips 文本。 | 参数 | 说明 | 类型 | 默认值 | 版本 |
| --- | --- | --- | --- | --- |
从 `4.6.0` 版本开始，`copyable` 支持使用 `{ icon: [<SmileOutlined key="copy-icon" />, <SmileFilled key="copied-icon" />] }` 设置 copy 和 copied 图标。 | text | 拷贝到剪切板里的文本 | string | - | |
| onCopy | 拷贝成功的回调函数 | function | - | |
从 `4.6.0` 版本开始，`copyable` 支持使用 `{ tooltips: false }` 设置隐藏 tooltips。 | icon | 自定义拷贝图标：\[默认图标, 拷贝后的图标] | \[ReactNode, ReactNode\] | - | 4.6.0 |
| tooltips | 自定义提示文案，为 false 时隐藏文案 | \[ReactNode, ReactNode\] | \[`复制`, `复制成功`] | 4.4.0 |
### editable ### editable
从 `4.4.0` 版本开始，`editable` 支持使用 `{ maxLength: 50 }` 设置 TextArea 的 `maxLength` 属性。 ```
{
icon: ReactNode,
tooltip: boolean | ReactNode,
editing: boolean,
maxLength: number,
autoSize: boolean | { minRows: number, maxRows: number },
onStart: function,
onChange: function(string),
}
```
从 `4.4.0` 版本开始，`editable` 支持使用 `{ autoSize: { maxRows: 5, minRows: 3 } }` 设置 TextArea 的 `autoSize` 属性。 | 参数 | 说明 | 类型 | 默认值 | 版本 |
| --- | --- | --- | --- | --- |
| icon | 自定义编辑图标 | ReactNode | &lt;EditOutlined /> | 4.6.0 |
| tooltip | 自定义提示文本，为 false 时关闭 | boolean \| ReactNode | `编辑` | 4.6.0 |
| editing | 控制是否是编辑中状态 | boolean | false | |
| maxLength | 编辑中文本域最大长度 | number | - | 4.4.0 |
| autoSize | 自动 resize 文本域 | boolean \| { minRows: number, maxRows: number } | - | 4.4.0 |
| onStart | 进入编辑中状态时触发 | function | - | |
| onChange | 文本域编辑时触发 | function(event) | - | |
从 `4.6.0` 版本开始，`editable` 支持使用 `{ icon: <HighlightOutlined /> }` 设置 edit 图标。 ### ellipsis
从 `4.6.0` 版本开始，`editable` 支持使用 `{ tooltips: 'click to edit text' }` 设置 tooltip 文本。 ```
{
rows: number,
expandable: boolean,
suffix: string,
symbol: ReactNode,
onExpand: function(event),
onEllipsis: function(ellipsis),
}
```
| 参数 | 说明 | 类型 | 默认值 | 版本 |
| ---------- | ------------------ | ------------------ | ------ | ----- |
| rows | 最多显示的行数 | number | - | |
| expandable | 是否可展开 | boolean | - | |
| suffix | 自定义省略内容后缀 | ReactNode | - | |
| symbol | 自定义省略符号 | ReactNode | `...` | |
| onExpand | 点击展开时的回调 | function(event) | - | |
| onEllipsis | 触发省略时的回调 | function(ellipsis) | - | 4.2.0 |
## FAQ ## FAQ