基础 · Typography
版式
文字,图片,段落的基本格式。

使用场景

  • 对文章、博客、日志等的文本内容进行展示时。
  • 对文本进行复制和省略等基础操作时。

代码演示

如何引入

标题组件

通过设置 heading 可以展示不同级别的标题。

文本组件

内置不同样式的文本。可以通过 icon 属性传入图标,这种方式传入的图标默认与文本有间距,同时在链接文本的情况不会出现下划线符合设计规范。
链接文本支持传入 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 elementspan
code是否被 code 元素包裹boolean-
copyable是否可拷贝boolean | object:Copyable Configfalse0.27.0
delete添加删除线样式booleanfalse0.27.0
disabled禁用文本booleanfalse0.27.0
ellipsis设置自动溢出省略boolean|object:Ellipsis Configfalse0.34.0
icon前缀图标ReactNode-0.27.0
link是否为链接,传object时,属性将透传给a标签boolean|objectfalse0.27.0
mark添加标记样式booleanfalse0.27.0
size文本大小,可选normalsmallstringnormal0.27.0
strong是否加粗booleanfalse0.27.0
type文本类型,可选 primary, secondary, warning, danger, tertiary(v>=1.2.0), quaternary(v>=1.2.0), success(v>=1.7.0)stringprimary0.27.0
underline添加下划线样式booleanfalse0.27.0

Typography.Title

属性说明类型默认值版本
component自定义渲染元素,默认由 heading 决定html elementh1~h6
copyable是否可拷贝boolean | object:Copyable Configfalse0.27.0
delete添加删除线样式booleanfalse0.27.0
disabled禁用文本booleanfalse0.27.0
ellipsis设置自动溢出省略boolean|object:Ellipsis Configfalse0.34.0
heading标题级别,可选1, 2, 3,4,5,6,对应相应的标题number10.27.0
link是否为链接,传object时,属性将透传给a标签boolean|objectfalse0.27.0
mark添加标记样式booleanfalse0.27.0
type文本类型,可选 primary, secondary, warning, danger, tertiary(v>=1.2.0), quaternary(v>=1.2.0), success(v>=1.7.0)stringprimary0.27.0
underline添加下划线样式booleanfalse0.27.0

Typography.Paragraph

属性说明类型默认值版本
component自定义渲染元素html elementp
copyable是否可拷贝boolean | object:Copyable Configfalse0.27.0
delete添加删除线样式booleanfalse0.27.0
disabled禁用文本booleanfalse0.27.0
ellipsis设置自动溢出省略boolean|object:Ellipsis Configfalse0.34.0
link是否为链接,传object时,属性将透传给a标签boolean|objectfalse0.27.0
mark添加标记样式booleanfalse0.27.0
size文本大小,可选normalsmallstringnormal0.27.0
spacing行距大小,可选normalextendedstringnormal0.27.0
strong是否加粗booleanfalse0.27.0
type文本类型,可选 primary, secondary, warning, danger, tertiary(v>=1.2.0), quaternary(v>=1.2.0), success(v>=1.7.0)stringprimary0.27.0
underline添加下划线样式booleanfalse0.27.0

Ellipsis Config

v >= 0.34.0
属性说明类型默认值
collapseText折叠的展示文本string收起
collapsible是否支持折叠booleanfalse
expandText展开的展示文本string展开
expandable是否支持展开booleanfalse
pos省略截断的位置,支持末尾和中间截断:end, middlestringend
rows省略溢出行数number1
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

设计变量

© 2021 Semi Design. All rights reserved.

京ICP备19058139号-13浙公网安备 33011002016131号

Designed & Developed with love by Douyin FE & MED