使用场景
- 对文章、博客、日志等的文本内容进行展示时。
- 对文本进行复制和省略等基础操作时。
代码演示
如何引入
标题组件
通过设置 heading 可以展示不同级别的标题。
文本组件
内置不同样式的文本。可以通过
icon 属性传入图标，这种方式传入的图标默认与文本有间距，同时在链接文本的情况不会出现下划线符合设计规范。链接文本支持传入
v>=1.0 后默认不再有下划线，可以配合 underline 属性在 hover，active 态增加下划线的样式。
object，将对应的属性挂在 <a> 标签上。v>=1.0 后默认不再有下划线，可以配合 underline 属性在 hover，active 态增加下划线的样式。
段落组件
段落组件拥有两种行距，可以通过设置
spacing='extended' 使用更宽松的行距。文本大小
段落组件和文本组件支持两种尺寸，
small（12px） 和 normal（14px），默认为normal。可交互文本
支持文本的复制。
省略文本
支持文本的省略，可以通过
ellipsis 配置相关参数，具体参考 Ellipsis Config。目前只支持纯文本的截断
注意事项
当发生超长文本在弹出的 tooltip 没有换行时，请手动设置一下 word-break。我们没有内置的原因是不同语言内容（纯英文、中文、中英文混合）对 word-break 的需求不太一致，所以组件层没有做这个预设。
API参考
Typography.Text
| 属性 | 说明 | 类型 | 默认值 | 版本 |
|---|---|---|---|---|
| component | 自定义渲染元素 | html element | span | |
| code | 是否被 code 元素包裹 | boolean | - | |
| copyable | 是否可拷贝 | boolean | object:Copyable Config | false | 0.27.0 |
| delete | 添加删除线样式 | boolean | false | 0.27.0 |
| disabled | 禁用文本 | boolean | false | 0.27.0 |
| ellipsis | 设置自动溢出省略 | boolean|object:Ellipsis Config | false | 0.34.0 |
| icon | 前缀图标 | ReactNode | - | 0.27.0 |
| link | 是否为链接，传object时，属性将透传给a标签 | boolean|object | false | 0.27.0 |
| mark | 添加标记样式 | boolean | false | 0.27.0 |
| size | 文本大小，可选normal，small | string | normal | 0.27.0 |
| strong | 是否加粗 | boolean | false | 0.27.0 |
| type | 文本类型，可选 primary, secondary, warning, danger, tertiary(v>=1.2.0), quaternary(v>=1.2.0), success(v>=1.7.0) | string | primary | 0.27.0 |
| underline | 添加下划线样式 | boolean | false | 0.27.0 |
Typography.Title
| 属性 | 说明 | 类型 | 默认值 | 版本 |
|---|---|---|---|---|
| component | 自定义渲染元素，默认由 heading 决定 | html element | h1~h6 | |
| copyable | 是否可拷贝 | boolean | object:Copyable Config | false | 0.27.0 |
| delete | 添加删除线样式 | boolean | false | 0.27.0 |
| disabled | 禁用文本 | boolean | false | 0.27.0 |
| ellipsis | 设置自动溢出省略 | boolean|object:Ellipsis Config | false | 0.34.0 |
| heading | 标题级别，可选1， 2， 3，4，5，6，对应相应的标题 | number | 1 | 0.27.0 |
| link | 是否为链接，传object时，属性将透传给a标签 | boolean|object | false | 0.27.0 |
| mark | 添加标记样式 | boolean | false | 0.27.0 |
| type | 文本类型，可选 primary, secondary, warning, danger, tertiary(v>=1.2.0), quaternary(v>=1.2.0), success(v>=1.7.0) | string | primary | 0.27.0 |
| underline | 添加下划线样式 | boolean | false | 0.27.0 |
Typography.Paragraph
| 属性 | 说明 | 类型 | 默认值 | 版本 |
|---|---|---|---|---|
| component | 自定义渲染元素 | html element | p | |
| copyable | 是否可拷贝 | boolean | object:Copyable Config | false | 0.27.0 |
| delete | 添加删除线样式 | boolean | false | 0.27.0 |
| disabled | 禁用文本 | boolean | false | 0.27.0 |
| ellipsis | 设置自动溢出省略 | boolean|object:Ellipsis Config | false | 0.34.0 |
| link | 是否为链接，传object时，属性将透传给a标签 | boolean|object | false | 0.27.0 |
| mark | 添加标记样式 | boolean | false | 0.27.0 |
| size | 文本大小，可选normal，small | string | normal | 0.27.0 |
| spacing | 行距大小，可选normal，extended | string | normal | 0.27.0 |
| strong | 是否加粗 | boolean | false | 0.27.0 |
| type | 文本类型，可选 primary, secondary, warning, danger, tertiary(v>=1.2.0), quaternary(v>=1.2.0), success(v>=1.7.0) | string | primary | 0.27.0 |
| underline | 添加下划线样式 | boolean | false | 0.27.0 |
Ellipsis Config
v >= 0.34.0
| 属性 | 说明 | 类型 | 默认值 |
|---|---|---|---|
| collapseText | 折叠的展示文本 | string | 收起 |
| collapsible | 是否支持折叠 | boolean | false |
| expandText | 展开的展示文本 | string | 展开 |
| expandable | 是否支持展开 | boolean | false |
| pos | 省略截断的位置，支持末尾和中间截断：end, middle | string | end |
| rows | 省略溢出行数 | number | 1 |
| showTooltip | 是否展示 tooltip 及相关配置: type，浮层内容承载的组件，支持 Tooltip| Popover；opts，其他需要透传给浮层组件的属性 | boolean|{type: 'tooltip'|'popover', opts: object} | false |
| suffix | 始终展示的后缀 | string | - |
| onExpand | 展开/收起的回调 | function(expanded: bool, Event: e) | - |
Copyable Config
| 属性 | 说明 | 类型 | 默认值 | 版本 |
|---|---|---|---|---|
| content | 复制出的文本 | string | - | 0.27.0 |
| copyTip | 复制图标的 tooltip 展示内容 | React.node | - | 1.0.0 |
| successTip | 复制成功的展示内容 | React.node | - | 0.33.0 |
| onCopy | 复制回调 | Function(e:Event, content:string, res:boolean) | - | 0.27.0 |
