mirror of
https://gitee.com/ant-design/ant-design.git
synced 2024-12-05 13:37:52 +08:00
3bfb7ac2a0
* feat: less to component token for Typography * feat: add titleFontWeight token * feat: add debug demo * chore: rename token * chore: rename demo name * chore: rename titleFontWeight --------- Co-authored-by: zhangjianxiong <zhangjx@tsintergy.com> Co-authored-by: MadCcc <1075746765@qq.com> Co-authored-by: lijianan <574980606@qq.com>
8.2 KiB
8.2 KiB
category | subtitle | group | title | cover | coverDark |
---|---|---|---|---|---|
Components | 排版 | 通用 | Typography | https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*MLt3R6m9huoAAAAAAAAAAAAADrJ8AQ/original | https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*LT2jR41Uj2EAAAAAAAAAAAAADrJ8AQ/original |
文本的基本格式。
何时使用
- 当需要展示标题、段落、列表内容时使用,如文章/博客/日志的文本样式。
- 当需要一列基于文本的基础操作时,如拷贝/省略/可编辑。
代码演示
基本
标题组件
标题与段落
文本与超链接组件
可交互
省略号
省略中间
省略号 Debug
后缀
组件 Token
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) | - |
Design Token
FAQ
Typography.Link 如何与 react-router 库集成?
react-router
支持自定义渲染组件:
<Link to="/" component={Typography.Link} />
注意: 这并不是和 react-router 的 Link 的执行逻辑等价 参考