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

使用场景

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

代码演示

如何引入

标题组件

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

文本组件

内置不同样式的文本。可以通过 icon 属性传入图标,这种方式传入的图标默认与文本有间距,同时在链接文本的情况不会出现下划线符合设计规范。
链接文本支持传入 object,将对应的属性挂在 <a> 标签上。
v>=1.0 后默认不再有下划线,可以配合 underline 属性在 hover,active 态增加下划线的样式。

段落组件

段落组件拥有两种行距,可以通过设置 spacing='extended' 使用更宽松的行距。

数值组件

Numeral 组件在Text组件的基础上,添加了属性: rule, precision, truncate, parser, 以提供需要单独处理文本中数值的能力。
注意
Numeral 组件会递归遍历 Children 检测其中所有的数字文本进行转换展示,请注意控制渲染结构层级。
precision 可以设置小数点后保留位数, 用于设置精度
truncate 小数点后保留位截段取整方式,可选 ceil, floor, round,作用与 Math.ceil、Math.floor、Math.round 对齐
rule 用于设置解析规则
  • 设为 percentages 会将数字自动转换为百分比形式展示
  • 设为 bytes-decimal 会将数字自动换算为字节对应的单位展示, 1 KB 定义为等于 1000 字节,(B, KB, MB, GB, TB, PB, EB, ZB, YB)
  • 设为 bytes-binary 会将数字自动换算为字节对应的单位展示,1 KiB 定义为等于 1024字节,(B, KiB, MiB, GiB, TiB, PiB, EiB, ZiB, YiB)
  • 设为 text时,仅自动对数字进行取整,根据 precisiontruncate 属性
  • 设为 numbers时,会将非数字字符进行过滤,仅展示数字
  • 设为 exponential 时,会将数字自动转换为科学计数法形式展示
可以通过 parser 自定义解析规则

文本大小

段落组件和文本组件支持两种尺寸,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

Typography.Numeral

属性说明类型默认值版本
rule解析规则,可选 text, numbers, bytes-decimal, bytes-binary, percentages, exponentialstringtext2.22.0
precision可以设置小数点后保留位数, 用于设置精度number02.22.0
truncate小数点后保留位截段取整方式,可选 ceil, floor, round,作用与 Math.ceil、Math.floor、Math.round 对齐stringround2.22.0
parser自定义数值解析函数(str: string) => string-2.22.0
component自定义渲染元素html elementspan2.22.0
code是否被 code 元素包裹boolean-2.22.0
copyable是否可拷贝boolean | object:Copyable Configfalse2.22.0
delete添加删除线样式booleanfalse2.22.0
disabled禁用文本booleanfalse2.22.0
ellipsis设置自动溢出省略boolean| object:Ellipsis Configfalse2.22.0
icon前缀图标ReactNode-2.22.0
link是否为链接,传object时,属性将透传给a标签boolean|objectfalse2.22.0
mark添加标记样式booleanfalse2.22.0
size文本大小,可选normalsmallstringnormal2.22.0
strong是否加粗booleanfalse2.22.0
type文本类型,可选 primary, secondary, warning, danger, tertiary, quaternary, successstringprimary2.22.0
underline添加下划线样式booleanfalse2.22.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

文案规范

  • Link
    • 文字链接需要清晰且可预测,用户应该能够预测他们点击链接时会发生什么
    • 切勿通过错误标记链接来误导用户
    • 避免使用“Click here”或“Here”作为独立链接
✅ 推荐用法❌ 不推荐用法
No spaces yet? Create space No spaces yet? Click here
  • 避免将整个句子作为可点击的文字链接,而是将描述具体去向的文字作为链接内容
✅ 推荐用法❌ 不推荐用法
Views user documentation for detailsView user documentation for details
  • 使用短术语或词作为链接文本会更有利于国际化,以避免由于不同的语言的语法和语序不同,而出现链接文字被拆分的问题
✅ 推荐用法❌ 不推荐用法
Manage notifications toManage notifications to
  • 以文字链接结尾时,不需要跟随标点符号,除了问号“?”
✅ 推荐用法❌ 不推荐用法
No spaces yet? Create space No spaces yet? Click here
Forgot password ?Forgot password
  • 链接文字不要包含冠词“the, a, an”
✅ 推荐用法❌ 不推荐用法
View user documentation for detailsView the user documentation for details

设计变量