From 487d3e46c035c636262705c20bd7a614702d5b49 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E5=81=8F=E5=8F=B3?= Date: Mon, 10 Aug 2020 10:44:16 +0800 Subject: [PATCH] docs: improve typography API table (#26102) * docs: improve typography API table * Update components/typography/index.en-US.md Co-authored-by: xrkffgg * Update components/typography/index.en-US.md Co-authored-by: xrkffgg * docs: update doc * docs: update Co-authored-by: xrkffgg Co-authored-by: xrkffgg --- components/typography/index.en-US.md | 82 +++++++++++++++++++++------- components/typography/index.zh-CN.md | 82 +++++++++++++++++++++------- 2 files changed, 126 insertions(+), 38 deletions(-) diff --git a/components/typography/index.en-US.md b/components/typography/index.en-US.md index 5b5e5441f5..58a3009998 100644 --- a/components/typography/index.en-US.md +++ b/components/typography/index.en-US.md @@ -20,11 +20,11 @@ Basic text writing, including headings, body text, lists, and more. | Property | Description | Type | Default | Version | | --- | --- | --- | --- | --- | | 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 | | | 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) | -| ellipsis | Display ellipsis when text overflows. Should set width when ellipsis needed | boolean | false | | +| 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 \| [ellipsis](#ellipsis) | false | [ellipsis](#ellipsis) | | mark | Marked style | boolean | false | | | keyboard | Keyboard style | boolean | false | 4.3.0 | | underline | Underlined style | boolean | false | | @@ -37,11 +37,11 @@ Basic text writing, including headings, body text, lists, and more. | Property | Description | Type | Default | Version | | --- | --- | --- | --- | --- | | 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 | | | 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) | -| 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 | +| 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 \| [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 | | mark | Marked 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 | | --- | --- | --- | --- | --- | | 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 | | | 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) | -| 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 | +| 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 \| [ellipsis](#ellipsis) | false | [ellipsis](#ellipsis) | | mark | Marked style | boolean | false | | | underline | Underlined style | boolean | false | | | 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` supports `{ icon: }` 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`. - -`copyable` supports `{ icon: [, ] }` to customize copy and copied icon since `4.6.0`. - -`copyable` supports `{ tooltips: false }` to hide tooltips since `4.6.0`. +| Property | Description | Type | Default | Version | +| --- | --- | --- | --- | --- | +| text | The text to copy | string | - | | +| onCopy | Called when copied text | function | - | | +| 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` 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 | <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: }` 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 diff --git a/components/typography/index.zh-CN.md b/components/typography/index.zh-CN.md index 169ada9f88..98aa11b14f 100644 --- a/components/typography/index.zh-CN.md +++ b/components/typography/index.zh-CN.md @@ -21,11 +21,11 @@ cover: https://gw.alipayobjects.com/zos/alicdn/GOM1KQ24O/Typography.svg | 参数 | 说明 | 类型 | 默认值 | 版本 | | --- | --- | --- | --- | --- | | 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 | | | 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) | -| ellipsis | 设置自动溢出省略，需要设置元素宽度 | boolean | false | | +| editable | 是否可编辑，为对象时可对编辑进行控制 | boolean \| [editable](#editable) | false | [editable](#editable) | +| ellipsis | 自动溢出省略，为对象时可设置省略行数、是否可展开、添加后缀等 | boolean \| [ellipsis](#ellipsis) | false | [ellipsis](#ellipsis) | | mark | 添加标记样式 | boolean | false | | | keyboard | 添加键盘样式 | boolean | false | 4.3.0 | | underline | 添加下划线样式 | boolean | false | | @@ -37,11 +37,11 @@ cover: https://gw.alipayobjects.com/zos/alicdn/GOM1KQ24O/Typography.svg | 参数 | 说明 | 类型 | 默认值 | 版本 | | --- | --- | --- | --- | --- | | 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 | | | 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) | -| ellipsis | 自动溢出省略，为对象时可设置省略行数与是否可展开等 | boolean \| { rows: number, expandable: boolean, onExpand: function(event), onEllipsis: function(ellipsis) } | false | onEllipsis: 4.2.0 | +| editable | 是否可编辑，为对象时可对编辑进行控制 | boolean \| [editable](#editable) | false | [editable](#editable) | +| ellipsis | 自动溢出省略，为对象时可设置省略行数、是否可展开、添加后缀等 | boolean \| [ellipsis](#ellipsis) | false | [ellipsis](#ellipsis) | | level | 重要程度，相当于 `h1`、`h2`、`h3`、`h4`、`h5` | number: 1, 2, 3, 4, 5 | 1 | 5: 4.6.0 | | mark | 添加标记样式 | boolean | false | | | underline | 添加下划线样式 | boolean | false | | @@ -53,11 +53,11 @@ cover: https://gw.alipayobjects.com/zos/alicdn/GOM1KQ24O/Typography.svg | 参数 | 说明 | 类型 | 默认值 | 版本 | | --- | --- | --- | --- | --- | | 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 | | | 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) | -| ellipsis | 自动溢出省略，为对象时可设置省略行数、是否可展开、添加后缀等 | boolean \| { rows: number, expandable: boolean, suffix: string, symbol: React.ReactNode, onExpand: function(event), onEllipsis: function(ellipsis) } | false | onEllipsis: 4.2.0 | +| editable | 是否可编辑，为对象时可对编辑进行控制 | boolean \| [editable](#editable) | false | [editable](#editable) | +| ellipsis | 自动溢出省略，为对象时可设置省略行数、是否可展开、添加后缀等 | boolean \| [ellipsis](#ellipsis) | false | [ellipsis](#ellipsis) | | mark | 添加标记样式 | boolean | false | | | underline | 添加下划线样式 | boolean | false | | | onChange | 当用户提交编辑内容时触发 | function(string) | - | | @@ -66,23 +66,67 @@ cover: https://gw.alipayobjects.com/zos/alicdn/GOM1KQ24O/Typography.svg ### copyable -从 `4.4.0` 版本开始，`copyable` 支持使用 `{ icon: }` 设置 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: [, ] }` 设置 copy 和 copied 图标。 - -从 `4.6.0` 版本开始，`copyable` 支持使用 `{ tooltips: false }` 设置隐藏 tooltips。 +| 参数 | 说明 | 类型 | 默认值 | 版本 | +| --- | --- | --- | --- | --- | +| text | 拷贝到剪切板里的文本 | string | - | | +| onCopy | 拷贝成功的回调函数 | function | - | | +| icon | 自定义拷贝图标：\[默认图标, 拷贝后的图标] | \[ReactNode, ReactNode\] | - | 4.6.0 | +| tooltips | 自定义提示文案，为 false 时隐藏文案 | \[ReactNode, ReactNode\] | \[`复制`, `复制成功`] | 4.4.0 | ### 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 | <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: }` 设置 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