mirror of
https://github.com/ant-design/ant-design.git
synced 2024-11-24 02:59:58 +08:00
docs: improve typography API table (#26102)
* 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:
偏右
GitHub
parent
d0c4e4b3cf
commit
487d3e46c0
@ -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: <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`.
|
||||
|
||||
`copyable` supports `{ icon: [<SmileOutlined key="copy-icon" />, <SmileFilled key="copied-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: <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
|
||||
|
||||
|
||||
@ -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: <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 图标。
|
||||
|
||||
从 `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: <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
|
||||
|
||||
|
||||
Loading…
Reference in New Issue
Block a user