Typography排版
Typography
排版
文本的基本格式。
使用import { Typography } from "antd"; |
- 组件总览
- 通用
- 布局
- 导航
- 数据录入
- 数据展示
- 反馈
- 其他
Sketch and Axure), to help people create their product prototypes beautifully and efficiently.Sketch 和Axure），来帮助业务快速设计出高质量的产品原型。AntV 是蚂蚁集团全新一代数据可视化解决方案，致力于提供一套简单方便、专业可靠、不限可能的数据可视化最佳实践。得益于丰富的业务场景和用户需求挑战，AntV 经历多年积累与不断打磨，已支撑整个阿里集团内外 20000+ 业务系统，通过了日均千万级 UV 产品的严苛考验。 我们正在基础图表，图分析，图编辑，地理空间可视化，智能可视化等各个可视化的领域耕耘，欢迎同路人一起前行。
AntV 是蚂蚁集团全新一代数据可视化解决方案，致力于提供一套简单方便、专业可靠、不限可能的数据可视化最佳实践。得益于丰富的业务场景和用户需求挑战，AntV 经历多年积累与不断打磨，已支撑整个阿里集团内外 20000+ 业务系统，通过了日均千万级 UV 产品的严苛考验。 我们正在基础图表，图分析，图编辑，地理空间可视化，智能可视化等各个可视化的领域耕耘，欢迎同路人一起前行。
展示文档样例。
展示不同级别的标题。
Ant Design (code)内置不同样式的文本以及超链接组件。
提供可编辑的交互能力。
提供可复制的交互能力。
Ant Design, a design language for background applications, is refined by Ant UED Team.多行文本省略。你可以通过 tooltip 属性配置省略展示内容，大量文本时推荐优先使用 expandable。
受控多行文本省略。
使用 ellipsis={{ suffix: ... }} 可以封装一个从中间省略内容的组件，适合于需要保留文本末位特征的内容。
添加后缀的省略。
通用属性参考：通用属性
| 参数 | 说明 | 类型 | 默认值 | 版本 |
|---|---|---|---|---|
| code | 添加代码样式 | boolean | false | |
| copyable | 是否可拷贝，为对象时可进行各种自定义 | boolean | copyable | false | |
| delete | 添加删除线样式 | boolean | false | |
| disabled | 禁用文本 | boolean | false | |
| editable | 是否可编辑，为对象时可对编辑进行控制 | boolean | editable | false | |
| ellipsis | 自动溢出省略，为对象时不能设置省略行数、是否可展开、onExpand 展开事件。不同于 Typography.Paragraph，Text 组件自身不带 100% 宽度样式，因而默认情况下初次缩略后宽度便不再变化。如果需要自适应宽度，请手动配置宽度样式 | boolean | Omit<ellipsis, 'expandable' | 'rows' | 'onExpand'> | false | |
| 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 |
| 参数 | 说明 | 类型 | 默认值 | 版本 |
|---|---|---|---|---|
| code | 添加代码样式 | boolean | false | |
| copyable | 是否可拷贝，为对象时可进行各种自定义 | boolean | copyable | false | |
| delete | 添加删除线样式 | boolean | false | |
| disabled | 禁用文本 | boolean | false | |
| editable | 是否可编辑，为对象时可对编辑进行控制 | boolean | editable | false | |
| ellipsis | 自动溢出省略，为对象时可设置省略行数、是否可展开、添加后缀等 | boolean | ellipsis | false | |
| 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 |
| 参数 | 说明 | 类型 | 默认值 | 版本 |
|---|---|---|---|---|
| code | 添加代码样式 | boolean | false | |
| copyable | 是否可拷贝，为对象时可进行各种自定义 | boolean | copyable | false | |
| delete | 添加删除线样式 | boolean | false | |
| disabled | 禁用文本 | boolean | false | |
| editable | 是否可编辑，为对象时可对编辑进行控制 | boolean | editable | false | |
| ellipsis | 自动溢出省略，为对象时可设置省略行数、是否可展开、添加后缀等 | boolean | ellipsis | false | |
| 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 |
{text: string | (() => string | Promise<string>),onCopy: function(event),icon: ReactNode,tooltips: false | [ReactNode, ReactNode],format: 'text/plain' | 'text/html',tabIndex: number,}
| 参数 | 说明 | 类型 | 默认值 | 版本 |
|---|---|---|---|---|
| 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 | - | |
| tabIndex | 自定义复制按钮的 tabIndex | number | 0 | 5.17.0 |
{icon: ReactNode,tooltip: 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,tabIndex: number,}
| 参数 | 说明 | 类型 | 默认值 | 版本 |
|---|---|---|---|---|
| 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 时关闭 | 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 |
| tabIndex | 自定义编辑按钮的 tabIndex | number | 0 | 5.17.0 |
interface EllipsisConfig {rows: number;/** `5.16.0` 新增 `collapsible` */expandable: boolean | 'collapsible';suffix: string;/** `5.16.0` 新增渲染函数 */symbol: ReactNode | ((expanded: boolean) => ReactNode);tooltip: ReactNode | TooltipProps;/** `5.16.0` 新增 */defaultExpanded: boolean;/** `5.16.0` 新增 */expanded: boolean;/** `5.16.0` 新增 `info` */onExpand: (event: MouseEvent, info: { expanded: boolean }) => void;onEllipsis: (ellipsis: boolean) => void;}
| 参数 | 说明 | 类型 | 默认值 | 版本 |
|---|---|---|---|---|
| expandable | 是否可展开 | boolean | 'collapsible' | - | collapsible: 5.16.0 |
| rows | 最多显示的行数 | number | - | |
| suffix | 自定义省略内容后缀 | string | - | |
| symbol | 自定义展开描述文案 | ReactNode | ((expanded: boolean) => ReactNode) | 展开 收起 | |
| tooltip | 省略时，展示提示信息 | ReactNode | TooltipProps | - | 4.11.0 |
| defaultExpanded | 默认展开或收起 | boolean | 5.16.0 | |
| expanded | 展开或收起 | boolean | 5.16.0 | |
| onEllipsis | 触发省略时的回调 | function(ellipsis) | - | 4.2.0 |
| onExpand | 点击展开或收起时的回调 | function(event, { expanded: boolean }) | - | info: 5.16.0 |
| Token 名称 | 描述 | 类型 | 默认值 |
|---|---|---|---|
| titleMarginBottom | 标题下间距 | string | number | 0.5em |
| titleMarginTop | 标题上间距 | string | number | 1.2em |