Typography 排版
文本的基本格式。
何时使用
- 当需要展示标题、段落、列表内容时。
- 当需要一列基于文本的基础操作时，如拷贝、省略、可编辑。
代码演示
标题组件
vue
<template>
<div>
<a-typography-title>介绍</a-typography-title>
<a-typography-title :level="2">介绍</a-typography-title>
<a-typography-title :level="3">介绍</a-typography-title>
<a-typography-title :level="4">介绍</a-typography-title>
<a-typography-title :level="5">介绍</a-typography-title>
</div>
</template>文本组件
vue
<template>
<div>
<a-typography-text>Ant Design Vue (默认)</a-typography-text>
<br />
<a-typography-text type="secondary">Ant Design Vue (次要)</a-typography-text>
<br />
<a-typography-text type="success">Ant Design Vue (成功)</a-typography-text>
<br />
<a-typography-text type="warning">Ant Design Vue (警告)</a-typography-text>
<br />
<a-typography-text type="danger">Ant Design Vue (危险)</a-typography-text>
<br />
<a-typography-text disabled>Ant Design Vue (禁用)</a-typography-text>
<br />
<a-typography-text mark>Ant Design Vue (标记)</a-typography-text>
<br />
<a-typography-text code>Ant Design Vue (代码)</a-typography-text>
<br />
<a-typography-text keyboard>Ant Design Vue (键盘)</a-typography-text>
<br />
<a-typography-text underline>Ant Design Vue (下划线)</a-typography-text>
<br />
<a-typography-text delete>Ant Design Vue (删除线)</a-typography-text>
<br />
<a-typography-text strong>Ant Design Vue (加粗)</a-typography-text>
<br />
<a-typography-text italic>Ant Design Vue (斜体)</a-typography-text>
</div>
</template>可交互
vue
<template>
<div>
<a-typography-paragraph editable>这是一段可编辑的文字。</a-typography-paragraph>
<a-typography-paragraph copyable>这是一段可复制的文字。</a-typography-paragraph>
<a-typography-paragraph
copyable="{ text: '复制的内容！' }"
>
点击复制文字。
</a-typography-paragraph>
</div>
</template>省略号
vue
<template>
<div>
<a-typography-paragraph
ellipsis
>
Ant Design，一套企业级 UI 设计语言和 Vue 组件库，具有统一的 UI 设计语言和开发框架，提升界面设计和前端开发的工作效率。
</a-typography-paragraph>
<a-typography-paragraph
:ellipsis="{ rows: 2, expandable: true, symbol: 'more' }"
>
Ant Design，一套企业级 UI 设计语言和 Vue 组件库，具有统一的 UI 设计语言和开发框架，提升界面设计和前端开发的工作效率。Ant Design，一套企业级 UI 设计语言和 Vue 组件库，具有统一的 UI 设计语言和开发框架，提升界面设计和前端开发的工作效率。
</a-typography-paragraph>
</div>
</template>API
Typography.Text
| 参数 | 说明 | 类型 | 默认值 | 版本 |
|---|---|---|---|---|
| code | 添加代码样式 | boolean | false | |
| copyable | 是否可拷贝，为对象时可进行各种自定义 | boolean | copyable | false | |
| delete | 添加删除线样式 | boolean | false | |
| disabled | 禁用文本 | boolean | false | |
| editable | 是否可编辑，为对象时可对编辑进行控制 | boolean | editable | false | |
| ellipsis | 自动溢出省略，为对象时可设置省略行数、是否可展开、添加后缀等 | boolean | ellipsis | false | |
| keyboard | 添加键盘样式 | boolean | false | |
| mark | 添加标记样式 | boolean | false | |
| strong | 是否加粗 | boolean | false | |
| italic | 是否斜体 | boolean | false | |
| type | 文本类型 | secondary | success | warning | danger | - | |
| underline | 添加下划线样式 | boolean | false |
Typography.Title
| 参数 | 说明 | 类型 | 默认值 | 版本 |
|---|---|---|---|---|
| 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 | |
| mark | 添加标记样式 | boolean | false | |
| type | 文本类型 | secondary | success | warning | danger | - | |
| underline | 添加下划线样式 | boolean | false |
Typography.Paragraph
| 参数 | 说明 | 类型 | 默认值 | 版本 |
|---|---|---|---|---|
| code | 添加代码样式 | boolean | false | |
| copyable | 是否可拷贝，为对象时可进行各种自定义 | boolean | copyable | false | |
| delete | 添加删除线样式 | boolean | false | |
| disabled | 禁用文本 | boolean | false | |
| editable | 是否可编辑，为对象时可对编辑进行控制 | boolean | editable | false | |
| ellipsis | 自动溢出省略，为对象时可设置省略行数、是否可展开、添加后缀等 | boolean | ellipsis | false | |
| mark | 添加标记样式 | boolean | false | |
| strong | 是否加粗 | boolean | false | |
| type | 文本类型 | secondary | success | warning | danger | - | |
| underline | 添加下划线样式 | boolean | false |
copyable
ts
{
text: string,
onCopy: function,
icon: VNode,
tooltips: false | [VNode, VNode],
format: 'text/plain' | 'text/html',
}| 参数 | 说明 | 类型 | 默认值 | 版本 |
|---|---|---|---|---|
| format | 剪贴板数据的 Mime Type | 'text/plain' | 'text/html' | 'text/plain' | |
| icon | 自定义拷贝图标：[默认图标, 拷贝后的图标] | [VNode, VNode] | - | |
| text | 拷贝到剪贴板里的文本 | string | - | |
| tooltips | 自定义提示文案，为 false 时隐藏文案 | [VNode, VNode] | [复制, 复制成功] | |
| onCopy | 拷贝成功的回调函数 | function | - |
editable
ts
{
icon: VNode,
tooltip: boolean | VNode,
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: VNode,
}| 参数 | 说明 | 类型 | 默认值 | 版本 |
|---|---|---|---|---|
| autoSize | 自动 resize 文本域 | boolean | | - | |
| editing | 控制是否是编辑中状态 | boolean | false | |
| icon | 自定义编辑图标 | VNode | <EditOutlined /> | |
| maxlength | 编辑中文本域最大长度 | number | - | |
| tooltip | 自定义提示文本，为 false 时关闭 | boolean | VNode | 编辑 | |
| text | 显示文本 | string | - | |
| triggerType | 编辑模式触发器类型，图标、文本或者两者都设置（不设置图标则无编辑功能） | Array<icon|text> | [icon] | |
| onCancel | 按 ESC 退出编辑状态时触发 | function | - | |
| onChange | 文本域编辑时触发 | function(event) | - | |
| onEnd | 按 ENTER 结束编辑状态时触发 | function | - | |
| onStart | 进入编辑中状态时触发 | function | - |
ellipsis
ts
{
rows: number,
expandable: boolean,
suffix: string,
symbol: VNode,
tooltip: boolean | VNode,
onExpand: function(event),
onEllipsis: function(ellipsis),
}| 参数 | 说明 | 类型 | 默认值 | 版本 |
|---|---|---|---|---|
| expandable | 是否可展开 | boolean | - | |
| rows | 最多显示的行数 | number | - | |
| suffix | 自定义省略内容后缀 | string | - | |
| symbol | 自定义展开描述文案 | VNode | 展开 | |
| tooltip | 省略时，展示提示信息 | boolean | VNode | - | |
| onEllipsis | 触发省略时的回调 | function(ellipsis) | - | |
| onExpand | 点击展开时的回调 | function(event) | - |