文本的基本格式。
何时使用
- 当需要展示标题、段落、列表内容时使用,如文章/博客/日志的文本样式。
- 当需要一列基于文本的基础操作时,如拷贝/省略/可编辑。
API
Typography.Text
参数 |
说明 |
类型 |
默认值 |
版本 |
code |
添加代码样式 |
boolean |
false |
|
copyable |
是否可拷贝,为对象时可进行各种自定义 |
boolean | copyable |
false |
copyable |
delete |
添加删除线样式 |
boolean |
false |
|
disabled |
禁用文本 |
boolean |
false |
|
editable |
是否可编辑,为对象时可对编辑进行控制 |
boolean | editable |
false |
editable |
ellipsis |
自动溢出省略,为对象时不能设置省略行数、是否可展开、onExpand 展开事件。不同于 Typography.Paragraph,Text 组件自身不带 100% 宽度样式,因而默认情况下初次缩略后宽度便不再变化。如果需要自适应宽度,请手工配置宽度样式 |
boolean | Omit<ellipsis, 'expandable' | 'rows' | 'onExpand'> |
false |
ellipsis |
keyboard |
添加键盘样式 |
boolean |
false |
4.3.0 |
mark |
添加标记样式 |
boolean |
false |
|
onClick |
点击 Text 时的回调 |
(event) => void |
- |
|
strong |
是否加粗 |
boolean |
false |
|
italic |
是否斜体 |
boolean |
false |
4.16.0 |
type |
文本类型 |
secondary | success | warning | danger |
- |
success: 4.6.0 |
underline |
添加下划线样式 |
boolean |
false |
|
Typography.Title
参数 |
说明 |
类型 |
默认值 |
版本 |
code |
添加代码样式 |
boolean |
false |
|
copyable |
是否可拷贝,为对象时可进行各种自定义 |
boolean | copyable |
false |
copyable |
delete |
添加删除线样式 |
boolean |
false |
|
disabled |
禁用文本 |
boolean |
false |
|
editable |
是否可编辑,为对象时可对编辑进行控制 |
boolean | editable |
false |
editable |
ellipsis |
自动溢出省略,为对象时可设置省略行数、是否可展开、添加后缀等 |
boolean | ellipsis |
false |
ellipsis |
level |
重要程度,相当于 h1 、h2 、h3 、h4 、h5 |
number: 1, 2, 3, 4, 5 |
1 |
5: 4.6.0 |
mark |
添加标记样式 |
boolean |
false |
|
onClick |
点击 Title 时的回调 |
(event) => void |
- |
|
italic |
是否斜体 |
boolean |
false |
4.16.0 |
type |
文本类型 |
secondary | success | warning | danger |
- |
success: 4.6.0 |
underline |
添加下划线样式 |
boolean |
false |
|
Typography.Paragraph
参数 |
说明 |
类型 |
默认值 |
版本 |
code |
添加代码样式 |
boolean |
false |
|
copyable |
是否可拷贝,为对象时可进行各种自定义 |
boolean | copyable |
false |
copyable |
delete |
添加删除线样式 |
boolean |
false |
|
disabled |
禁用文本 |
boolean |
false |
|
editable |
是否可编辑,为对象时可对编辑进行控制 |
boolean | editable |
false |
editable |
ellipsis |
自动溢出省略,为对象时可设置省略行数、是否可展开、添加后缀等 |
boolean | ellipsis |
false |
ellipsis |
mark |
添加标记样式 |
boolean |
false |
|
onClick |
点击 Paragraph 时的回调 |
(event) => void |
- |
|
strong |
是否加粗 |
boolean |
false |
|
italic |
是否斜体 |
boolean |
false |
4.16.0 |
type |
文本类型 |
secondary | success | warning | danger |
- |
success: 4.6.0 |
underline |
添加下划线样式 |
boolean |
false |
|
copyable
{
text: string,
onCopy: function(event),
icon: ReactNode,
tooltips: false | [ReactNode, ReactNode],
format: 'text/plain' | 'text/html',
}
参数 |
说明 |
类型 |
默认值 |
版本 |
format |
剪切板数据的 Mime Type |
'text/plain' | 'text/html' |
- |
4.21.0 |
icon |
自定义拷贝图标:[默认图标, 拷贝后的图标] |
[ReactNode, ReactNode] |
- |
4.6.0 |
text |
拷贝到剪切板里的文本 |
string |
- |
|
tooltips |
自定义提示文案,为 false 时隐藏文案 |
[ReactNode, ReactNode] |
[复制 , 复制成功 ] |
4.4.0 |
onCopy |
拷贝成功的回调函数 |
function |
- |
|
editable
{
icon: ReactNode,
tooltip: boolean | ReactNode,
editing: boolean,
maxLength: number,
autoSize: boolean | { minRows: number, maxRows: number },
text: string,
onChange: function(string),
onCancel: function,
onStart: function,
onEnd: function,
triggerType: ('icon' | 'text')[],
enterIcon: ReactNode,
}
参数 |
说明 |
类型 |
默认值 |
版本 |
autoSize |
自动 resize 文本域 |
boolean | { minRows: number, maxRows: number } |
- |
4.4.0 |
editing |
控制是否是编辑中状态 |
boolean |
false |
|
icon |
自定义编辑图标 |
ReactNode |
<EditOutlined /> |
4.6.0 |
maxLength |
编辑中文本域最大长度 |
number |
- |
4.4.0 |
tooltip |
自定义提示文本,为 false 时关闭 |
boolean | ReactNode |
编辑 |
4.6.0 |
text |
显式地指定编辑文案,为空时将隐式地使用 children |
string |
- |
4.24.0 |
onChange |
文本域编辑时触发 |
function(value: string) |
- |
|
onCancel |
按 ESC 退出编辑状态时触发 |
function |
- |
|
onStart |
进入编辑中状态时触发 |
function |
- |
|
onEnd |
按 ENTER 结束编辑状态时触发 |
function |
- |
4.14.0 |
triggerType |
编辑模式触发器类型,图标、文本或者两者都设置(不设置图标作为触发器时它会隐藏) |
Array<icon |text > |
[icon ] |
|
enterIcon |
在编辑段中自定义“enter”图标(传递“null”将删除图标) |
ReactNode |
<EnterOutlined /> |
4.17.0 |
ellipsis
{
rows: number,
expandable: boolean,
suffix: string,
symbol: ReactNode,
tooltip: boolean | ReactNode | TooltipProps,
onExpand: function(event),
onEllipsis: function(ellipsis),
}
参数 |
说明 |
类型 |
默认值 |
版本 |
expandable |
是否可展开 |
boolean |
- |
|
rows |
最多显示的行数 |
number |
- |
|
suffix |
自定义省略内容后缀 |
string |
- |
|
symbol |
自定义展开描述文案 |
ReactNode |
展开 |
|
tooltip |
省略时,展示提示信息 |
boolean | ReactNode | TooltipProps |
- |
4.11.0 |
onEllipsis |
触发省略时的回调 |
function(ellipsis) |
- |
4.2.0 |
onExpand |
点击展开时的回调 |
function(event) |
- |
|
FAQ
Typography.Link 如何与 react-router 库集成?
react-router
支持自定义渲染组件:
<Link to="/" component={Typography.Link} />
注意: 这并不是和 react-router 的 Link 的执行逻辑等价 参考