使用场景
- 对文章、博客、日志等的文本内容进行展示时。
- 对文本进行复制和省略等基础操作时。
代码演示
如何引入
标题组件
通过设置 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 |