案例:展示标题
焦点代码:
- <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 Street
- Journal)于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 unnecessary
- cost of design differences and implementation and liberate the resources of design and
- front-end development.
- </a-typography-text>
复制代码 vue3示例:
- <template>
- <a-typography>
- <a-typography-title>美国新闻稿发布-华尔街日报</a-typography-title>
- <a-typography-paragraph>
- 媒体介绍:华尔街日报(The Wall Street
- Journal)于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 Street
- Journal)于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 + b
- print(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. Ant
- Design, a design language for background applications, is refined by Ant UED Team. Ant
- Design, a design language for background applications, is refined by Ant UED Team. Ant
- Design, a design language for background applications, is refined by Ant UED Team. Ant
- Design, a design language for background applications, is refined by Ant UED Team. Ant
- Design, 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添加代码样式booleanfalsecontent(v-model)当利用 ellipsis 或 editable 时,利用 content 取代 childrenstring-copyable是否可拷贝,为对象时可举行各种自定义boolean | copyablefalsecopyabledelete添加删除线样式booleanfalsedisabled禁用文本booleanfalseeditable是否可编辑,为对象时可对编辑举行控制boolean | editablefalseeditableellipsis主动溢出省略booleanfalsekeyboard添加键盘样式booleanfalsemark添加标记样式booleanfalsestrong是否加粗booleanfalsetype文本类型secondarysuccesswarningunderline添加下划线样式booleanfalse Typography.Title
参数阐明类型默认值版本code添加代码样式booleanfalsecontent(v-model)当利用 ellipsis 或 editable 时,利用 content 取代 childrenstring-copyable是否可拷贝,为对象时可举行各种自定义boolean | copyablefalsecopyabledelete添加删除线样式booleanfalsedisabled禁用文本booleanfalseeditable是否可编辑,为对象时可对编辑举行控制boolean | editablefalseeditableellipsis主动溢出省略,为对象时可设置省略行数、是否可展开、添加后缀等boolean | ellipsisfalseellipsislevel重要程度,相当于 h1、h2、h3、h4、h5number: 1, 2, 3, 4, 51mark添加标记样式booleanfalsetype文本类型secondarysuccesswarningunderline添加下划线样式booleanfalse Typography.Paragraph
参数阐明类型默认值版本code添加代码样式booleanfalsecontent(v-model)当利用 ellipsis 或 editable 时,利用 content 取代 childrenstring-copyable是否可拷贝,为对象时可举行各种自定义boolean | copyablefalsecopyabledelete添加删除线样式booleanfalsedisabled禁用文本booleanfalseeditable是否可编辑,为对象时可对编辑举行控制boolean | editablefalseeditableellipsis主动溢出省略,为对象时可设置省略行数、是否可展开、添加后缀等boolean | ellipsisfalseellipsismark添加标记样式booleanfalsestrong是否加粗booleanfalsetype文本类型secondarysuccesswarningunderline添加下划线样式booleanfalse 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是否展示提示文本booleantrueonCopy拷贝乐成的回调函数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控制是否是编辑中状态booleanfalsemaxlength编辑中文本域最大长度number-tooltip是否展示提示文本booleantruetriggerType编辑模式触发器类型,图标、文本大概两者都设置(不设置图标作为触发器时它会隐藏)Array<icontext>[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)-
免责声明:如果侵犯了您的权益,请联系站长,我们会及时删除侵权内容,谢谢合作!更多信息从访问主页:qidao123.com:ToB企服之家,中国第一个企服评测及商务社交产业平台。 |