跳到主要内容

Text / Heading 文字Text · Heading

Text 把字阶、颜色、省略这几件事收成属性；Heading 是带语义级别的标题，级别和大小可以分开选。两者都只是给元素加上 .ok-t-* 类名，不想用组件时直接写类名效果一样。

Text

字阶

body-l：导语，比正文大一档body：正文（默认）label：标签与按钮文字caption：说明、辅助信息micro · overlinemono：⌘K 240ms

颜色

neutral 是次要色；subtle 是三级色，对比度不足 4.5:1，不要用在需要读的文字上。状态色用的是各自的 -text 档，深浅主题下都够对比度。

default：跟随父级neutral：次要文字subtle：三级色，只用于装饰性文字accentsuccesswarningdangerinfo

省略

拖动滑块改变容器宽度。

单行省略：这是一段比较长的文字，容器放不下的时候末尾会变成省略号。

多行省略：这是一段更长的文字，最多显示两行。超过两行的部分会被截断，并在第二行的末尾加上省略号，适合卡片里的摘要。

渲染成别的元素

默认是 span。用 as 换成 p、strong、em、code 等；类型上只接受通用的 HTML 属性。

渲染成 strong、em 或者code 都可以。

Text 属性

属性类型默认值说明
variant'display' | 'h1' | 'h2' | 'h3' | 'body-l' | 'body' | 'label' | 'caption' | 'micro' | 'mono''body'字体样式，对应 .ok-t-*。
asElementType'span'渲染成什么元素。
tone'default' | 'subtle' | 'neutral' | 'accent' | 'success' | 'warning' | 'danger' | 'info''default'文字颜色。default 跟随父级。
truncatebooleanfalse单行省略。
lineClampnumber—多行省略的行数。
align'start' | 'center' | 'end'—文字对齐。

Heading

level 决定渲染成 h1–h4，variant 决定视觉大小（默认跟随 level）。display、h1、h2 三档在窄屏上会按视口宽度缩小。

display

h1 的大小

h2（level 默认 2）

h3

h4

h3 的语义、h4 的大小

Heading 属性

属性类型默认值说明
level1 | 2 | 3 | 42语义层级，渲染成 h1–h4。
variant'display' | 'h1' | 'h2' | 'h3' | 'h4'—视觉大小；默认跟随 level。
toneTextTone'default'同 Text。
truncatebooleanfalse单行省略。
align'start' | 'center' | 'end'—文字对齐。

无障碍

  • 标题级别按文档结构选，不按大小选：每页一个 h1，往下逐级，不跳级。想要别的大小用 variant。
  • 被 truncate / lineClamp 截掉的文字读屏仍然能读到；但看得见的用户读不到，重要信息不要放在可能被截掉的位置。
  • 不要用 tone="subtle" 写需要阅读的内容。