案例：展示標題
核心代碼：
<a-typography><a-typography-title>Introduction</a-typography-title>
</a-typography>
vue3示例：
<template><a-typography><a-typography-title>這是一個標題</a-typography-title></a-typography>
</template>
案例：展示段落
核心代碼：
<template><a-typography><a-typography-title>美國新聞稿發布-華爾街日報</a-typography-title><a-typography-paragraph>媒體介紹：華爾街日報（The Wall Street Journal）于1889年創刊，是美國付費發行量最大的財經報紙，其發行量超過200萬份。該報出版于美國紐約，主要報道財經新聞，側重金融商業報道，其影響力巨大。《華爾街日報》的讀者大多為政治、經濟、教育和醫學界人士、金融大亨和經營管理人員以及股票市場的投資者。</a-typography-paragraph></a-typography>
vue3示例：
<template><a-typography><a-typography-title>美國新聞稿發布-華爾街日報</a-typography-title><a-typography-paragraph>媒體介紹：華爾街日報（The Wall StreetJournal）于1889年創刊，是美國付費發行量最大的財經報紙，其發行量超過200萬份。該報出版于美國紐約，主要報道財經新聞，側重金融商業報道，其影響力巨大。《華爾街日報》的讀者大多為政治、經濟、教育和醫學界人士、金融大亨和經營管理人員以及股票市場的投資者。</a-typography-paragraph><a-typography-paragraph>該報出版亞洲版（1976年）、歐洲版（1983年）、網絡版（1996年）等，覆蓋面廣泛且歷史悠久，其讀者每天超2000萬人。《華爾街日報》是美國的高端報紙，讀者群的平均家庭年收入達15萬美元。針對不同的用戶群體有不同的營銷策略，為忠實用戶推出專業并具有深度的優質新聞內容，為潛在用戶提供免費內容資源，獨家新聞采取收費。</a-typography-paragraph></a-typography>
</template>
案例：展示重要內容
核心代碼：
<a-typography-text strong>uniform the user interface specs for internal background projects, lower the unnecessarycost of design differences and implementation and liberate the resources of design andfront-end development.
</a-typography-text>
vue3示例：
<template><a-typography><a-typography-title>美國新聞稿發布-華爾街日報</a-typography-title><a-typography-paragraph>媒體介紹：華爾街日報（The Wall StreetJournal）于1889年創刊，是美國付費發行量最大的財經報紙，其發行量超過200萬份。該報出版于美國紐約，主要報道財經新聞，側重金融商業報道，其影響力巨大。《華爾街日報》的讀者大多為政治、經濟、教育和醫學界人士、金融大亨和經營管理人員以及股票市場的投資者。</a-typography-paragraph><a-typography-text strong>該報出版亞洲版（1976年）、歐洲版（1983年）、網絡版（1996年）等，覆蓋面廣泛且歷史悠久，其讀者每天超2000萬人。《華爾街日報》是美國的高端報紙，讀者群的平均家庭年收入達15萬美元。針對不同的用戶群體有不同的營銷策略，為忠實用戶推出專業并具有深度的優質新聞內容，為潛在用戶提供免費內容資源，獨家新聞采取收費。</a-typography-text></a-typography>
</template>
案例：展示二級標題
核心代碼：
<a-typography-title :level="2">Guidelines and Resources</a-typography-title>
vue3示例：
<template><a-typography><a-typography-title>美國新聞稿發布-華爾街日報</a-typography-title><a-typography-title :level="2">二級標題</a-typography-title><a-typography-paragraph>媒體介紹：華爾街日報（The Wall StreetJournal）于1889年創刊，是美國付費發行量最大的財經報紙，其發行量超過200萬份。該報出版于美國紐約，主要報道財經新聞，側重金融商業報道，其影響力巨大。《華爾街日報》的讀者大多為政治、經濟、教育和醫學界人士、金融大亨和經營管理人員以及股票市場的投資者。</a-typography-paragraph><a-typography-title :level="2">二級標題</a-typography-title><a-typography-paragraph>該報出版亞洲版（1976年）、歐洲版（1983年）、網絡版（1996年）等，覆蓋面廣泛且歷史悠久，其讀者每天超2000萬人。《華爾街日報》是美國的高端報紙，讀者群的平均家庭年收入達15萬美元。針對不同的用戶群體有不同的營銷策略，為忠實用戶推出專業并具有深度的優質新聞內容，為潛在用戶提供免費內容資源，獨家新聞采取收費。</a-typography-paragraph></a-typography>
</template>
案例：展示代碼片段
核心代碼：
<a-typography-text code>Sketch</a-typography-text>
vue3示例：
<template><a-typography><a-typography-title>Python代碼片段</a-typography-title><a-typography-text code>def add(a, b):return a + bprint(add(11, 22))</a-typography-text></a-typography>
</template>
案例：展示鏈接
核心代碼：
<a-typography-link href="/docs/resources">Resource Download</a-typography-link>
vue3示例：
<template><a-typography><a-typography-title>友情鏈接</a-typography-title><a-typography-paragraph>參考鏈接：<a-typography-link href="http://www.baidu.com">百度</a-typography-link><a-typography-link href="https://www.sohu.com/">搜狐</a-typography-link><a-typography-link href="https://www.sina.com/">新浪</a-typography-link></a-typography-paragraph></a-typography>
</template>
案例：展示鍵盤快捷鍵
核心代碼：
<a-typography-text keyboard>Esc</a-typography-text>
vue3示例：
<template><a-typography><a-typography-title>常用快捷鍵</a-typography-title><a-typography-paragraph><a-typography-text keyboard>ctrl + c</a-typography-text><a-typography-text>復制</a-typography-text></a-typography-paragraph><a-typography-paragraph><a-typography-text keyboard>ctrl + v</a-typography-text><a-typography-text>粘貼</a-typography-text></a-typography-paragraph></a-typography>
</template>
<script setup lang="ts">
</script>
案例：超過一行變省略號
核心代碼：
<a-typography-paragraph:ellipsis="ellipsis"content=" Ant Design, a design language for background applications, is refined by Ant UED Team. AntDesign, a design language for background applications, is refined by Ant UED Team. AntDesign, a design language for background applications, is refined by Ant UED Team. AntDesign, a design language for background applications, is refined by Ant UED Team. AntDesign, a design language for background applications, is refined by Ant UED Team. AntDesign, a design language for background applications, is refined by Ant UED Team."/>
vue3示例：
<template><a-typography><a-typography-title>超過一行變省略號</a-typography-title><a-typography-paragraph ellipsis>該報出版亞洲版（1976年）、歐洲版（1983年）、網絡版（1996年）等，覆蓋面廣泛且歷史悠久，其讀者每天超2000萬人。《華爾街日報》是美國的高端報紙，讀者群的平均家庭年收入達15萬美元。針對不同的用戶群體有不同的營銷策略，為忠實用戶推出專業并具有深度的優質新聞內容，為潛在用戶提供免費內容資源，獨家新聞采取收費。</a-typography-paragraph></a-typography>
</template>
案例：段落可編輯
核心代碼：
<a-typography-paragraph v-model:content="editableStr" editable />
vue3示例：
<script setup="">
import {ref} from "vue";const msg = ref("可編輯的文本，不信你試試")
</script>
<template><a-typography><a-typography-title>可編輯的文本</a-typography-title><a-typography-paragraph v-model:content="msg" editable></a-typography-paragraph></a-typography>
</template>
<style scoped></style>
案例：段落可復制
核心代碼：
<a-typography-paragraph :copyable="{ tooltip: false }">Hide Copy tooltips.
</a-typography-paragraph>
vue3示例：
<script setup="">
import {ref} from "vue";const msg=ref("可編輯的文本")
</script>
<template>
<a-typography><a-typography-title>可復制的文本</a-typography-title><a-typography-paragraph copyable>這個文本可以被復制，不信你試試</a-typography-paragraph><a-typography-paragraph v-model:content="msg" editable/>
</a-typography>
</template>
<style scoped></style>
案例：文本樣式
核心代碼：
<template><a-space direction="vertical"><a-typography-text>Ant Design Vue (default)</a-typography-text><a-typography-text type="secondary">Ant Design Vue (secondary)</a-typography-text><a-typography-text type="success">Ant Design Vue (success)</a-typography-text><a-typography-text type="warning">Ant Design Vue (warning)</a-typography-text><a-typography-text type="danger">Ant Design Vue (danger)</a-typography-text><a-typography-text disabled>Ant Design Vue (disabled)</a-typography-text><a-typography-text mark>Ant Design Vue (mark)</a-typography-text><a-typography-text code>Ant Design Vue (code)</a-typography-text><a-typography-text keyboard>Ant Design Vue (keyboard)</a-typography-text><a-typography-text underline>Ant Design Vue (underline)</a-typography-text><a-typography-text delete>Ant Design Vue (delete)</a-typography-text><a-typography-text strong>Ant Design Vue (strong)</a-typography-text><a-typography-link href="https://antdv.com" target="_blank">Ant Design Vue (Link)</a-typography-link></a-space>
</template>
vue3示例：
<script setup="">
</script>
<template><a-typography><a-typography-title>文本樣式</a-typography-title><a-typography-paragraph><a-typography-text>默認樣式</a-typography-text></a-typography-paragraph><a-typography-paragraph><a-typography-text type="secondary">secondary 樣式</a-typography-text></a-typography-paragraph><a-typography-paragraph><a-typography-text type="warning">warning 樣式</a-typography-text></a-typography-paragraph><a-typography-paragraph><a-typography-text type="success">success 樣式</a-typography-text></a-typography-paragraph><a-typography-paragraph><a-typography-text type="danger">danger 樣式</a-typography-text></a-typography-paragraph></a-typography>
</template>
<style scoped></style>
案例：文本劃線
核心代碼：
<a-typography-text underline>Ant Design Vue (underline)</a-typography-text>
<a-typography-text delete>Ant Design Vue (delete)</a-typography-text>
vue3示例：
<script setup="">
</script>
<template><a-typography><a-typography-title>文本下劃線和中劃線</a-typography-title><a-typography-paragraph><a-typography-text underline>下劃線</a-typography-text></a-typography-paragraph><a-typography-paragraph><a-typography-text delete>中劃線，刪除線</a-typography-text></a-typography-paragraph></a-typography>
</template>
<style scoped></style>
案例：文本高亮
核心代碼：
<a-typography-text mark>Ant Design Vue (mark)</a-typography-text>
vue3示例：
<script setup="">
</script>
<template><a-typography><a-typography-title>文本高亮</a-typography-title><a-typography-paragraph>該報出版亞洲版（1976年）、歐洲版（1983年）、網絡版（1996年）等，覆蓋面廣泛且歷史悠久，其讀者每天超2000萬人。<a-typography-text mark>《華爾街日報》是美國的高端報紙</a-typography-text>，讀者群的平均家庭年收入達15萬美元。針對不同的用戶群體有不同的營銷策略，為忠實用戶推出專業并具有深度的優質新聞內容，為潛在用戶提供免費內容資源，獨家新聞采取收費。</a-typography-paragraph></a-typography>
</template>
<style scoped></style>
API
Typography.Text
| 參數 | 說明 | 類型 | 默認值 | 版本 |
|---|---|---|---|---|
| code | 添加代碼樣式 | boolean | false | |
| content(v-model) | 當使用 ellipsis 或 editable 時，使用 content 代替 children | string | - | |
| copyable | 是否可拷貝，為對象時可進行各種自定義 | boolean | copyable | false | copyable |
| delete | 添加刪除線樣式 | boolean | false | |
| disabled | 禁用文本 | boolean | false | |
| editable | 是否可編輯，為對象時可對編輯進行控制 | boolean | editable | false | editable |
| ellipsis | 自動溢出省略 | boolean | false | |
| keyboard | 添加鍵盤樣式 | boolean | false | |
| mark | 添加標記樣式 | boolean | false | |
| strong | 是否加粗 | boolean | false | |
| type | 文本類型 | secondary | success | warning |
| underline | 添加下劃線樣式 | boolean | false |
Typography.Title
| 參數 | 說明 | 類型 | 默認值 | 版本 |
| code | 添加代碼樣式 | boolean | false | |
| content(v-model) | 當使用 ellipsis 或 editable 時，使用 content 代替 children | string | - | |
| 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 | |
| mark | 添加標記樣式 | boolean | false | |
| type | 文本類型 | secondary | success | warning |
| underline | 添加下劃線樣式 | boolean | false |
Typography.Paragraph
| 參數 | 說明 | 類型 | 默認值 | 版本 |
| code | 添加代碼樣式 | boolean | false | |
| content(v-model) | 當使用 ellipsis 或 editable 時，使用 content 代替 children | string | - | |
| copyable | 是否可拷貝，為對象時可進行各種自定義 | boolean | copyable | false | copyable |
| delete | 添加刪除線樣式 | boolean | false | |
| disabled | 禁用文本 | boolean | false | |
| editable | 是否可編輯，為對象時可對編輯進行控制 | boolean | editable | false | editable |
| ellipsis | 自動溢出省略，為對象時可設置省略行數、是否可展開、添加后綴等 | boolean | ellipsis | false | ellipsis |
| mark | 添加標記樣式 | boolean | false | |
| strong | 是否加粗 | boolean | false | |
| type | 文本類型 | secondary | success | warning |
| underline | 添加下劃線樣式 | boolean | false |
slots
| 名稱 | 說明 | 參數 | 默認值 | 版本 |
|---|---|---|---|---|
| copyableIcon | 自定義拷貝圖標 | { copied: boolean } | copied ? <CheckOutlined /> : <CopyOutlined /> | |
| copyableTooltip | 自定義提示文案，當 copyable.tooltip = false 時關閉 | { copied: boolean } | copied ? '復制成功' : '復制' | |
| editableIcon | 自定義編輯圖標 | - | ||
| editableTooltip | 自定義提示文本，當 editable.tooltip = false 時關閉 | - | 編輯 | |
| ellipsisSymbol | 自定義展開描述文案 | - | - | |
| ellipsisTooltip | 省略時，展示提示信息 | - | - | |
| enterEnterIcon | 在編輯段中自定義“enter”圖標 | {className: string} | <EnterOutlined /> | 3.0 |
copyable
{text: string,onCopy: function(event),tooltip: false,}
| 參數 | 說明 | 類型 | 默認值 | 版本 |
|---|---|---|---|---|
| text | 拷貝到剪切板里的文本 | string | - | |
| tooltip | 是否展示提示文本 | boolean | true | |
| onCopy | 拷貝成功的回調函數 | function | - |
editable
{tooltip: boolean,editing: boolean,maxlength: number,autoSize: boolean | { minRows: number, maxRows: number },onStart: function,onChange: function(string),onCancel: function,onEnd: function,triggerType: ('icon' | 'text')[],}
| 參數 | 說明 | 類型 | 默認值 | 版本 |
|---|---|---|---|---|
| autoSize | 自動 resize 文本域 | boolean | { minRows: number, maxRows: number } | - | |
| editing | 控制是否是編輯中狀態 | boolean | false | |
| maxlength | 編輯中文本域最大長度 | number | - | |
| tooltip | 是否展示提示文本 | boolean | true | |
| triggerType | 編輯模式觸發器類型，圖標、文本或者兩者都設置（不設置圖標作為觸發器時它會隱藏） | Array<icon | text> | [icon] |
| onCancel | 按 ESC 退出編輯狀態時觸發 | function | - | |
| onChange | 文本域編輯時觸發 | function(event) | - | |
| onEnd | 按 ENTER 結束編輯狀態時觸發 | function | - | |
| onStart | 進入編輯中狀態時觸發 | function | - |
ellipsis
{rows: number,expandable: boolean,suffix: string,symbol: string,tooltip: boolean,onExpand: function(event),onEllipsis: function(ellipsis),}
| 參數 | 說明 | 類型 | 默認值 | 版本 |
|---|---|---|---|---|
| expandable | 是否可展開 | boolean | - | |
| rows | 最多顯示的行數 | number | - | |
| suffix | 自定義省略內容后綴 | string | - | |
| symbol | 自定義展開描述文案 | string | 展開 | |
| tooltip | 省略時，展示提示信息 | boolean | string | - | |
| onEllipsis | 觸發省略時的回調 | function(ellipsis) | - | |
| onExpand | 點擊展開時的回調 | function(event) | - |
——多表關系介紹)
