文案规范
相关组件
更多通用文案规范见 文案规范指南。
Typography
排版家族：Title / Text / Paragraph / Numeral，统一文本样式与语义色（严格对齐 Semi）。
如何引入
import { Typography, Typography.Title, Typography.Text, Typography.Paragraph, Typography.Numeral } from '@chenzy-design/svelte';标题组件
通过 heading 展示 h1~h6 六级标题。
h1. chenzy Design
h2. chenzy Design
h3. chenzy Design
h4. chenzy Design
h5. chenzy Design
h6. chenzy Design
文本组件
内置不同样式的文本：语义色 type，以及 strong / underline / delete / mark / code / disabled 等修饰。
Text Secondary Tertiary Quaternary Warning Danger Success Disabled Default Mark Deleted Strong
Example Code Underline 链接文本
通过 link prop 渲染链接（传 object 属性透传到 <a>），可配合 icon 前置图标与 underline 下划线。
段落组件
通过 spacing="extended" 使用更宽松的行距，配合 Title 小标题。
默认行距
chenzy Design 是一套基于 Svelte 5 runes 构建、遵循 headless 与渲染分层理念的设计系统。 设计系统包含设计语言以及一整套可复用的前端组件，帮助设计师与开发者更容易地打造高质量的、 用户体验一致的、符合设计规范的 Web 应用。
宽松行距
chenzy Design 是一套基于 Svelte 5 runes 构建、遵循 headless 与渲染分层理念的设计系统。 设计系统包含设计语言以及一整套可复用的前端组件，帮助设计师与开发者更容易地打造高质量的、 用户体验一致的、符合设计规范的 Web 应用。
文本大小
通过 size 控制 normal / small 两档字号；嵌套时内层设 size="inherit" 继承外层尺寸。
正常文本
小文本
这是一段文本，样式为 small 这是一段链接，设置 size 为 inherit 继承外部样式设置
chenzy Design 是一套基于 Svelte 5 runes 构建、遵循 headless 与渲染分层理念的设计系统。 设计系统包含设计语言以及一整套可复用的前端组件，帮助设计师与开发者更容易地打造高质量的、 用户体验一致的、符合设计规范的 Web 应用。
小文本
chenzy Design 是一套基于 Svelte 5 runes 构建、遵循 headless 与渲染分层理念的设计系统。 设计系统包含设计语言以及一整套可复用的前端组件，帮助设计师与开发者更容易地打造高质量的、 用户体验一致的、符合设计规范的 Web 应用。
这是一段文本，样式为 small 这是一段链接，设置 size 为 inherit 继承外部样式设置
可复制文本
通过 copyable 开启复制：默认图标、自定义 content、onCopy 回调、自定义 icon 与 render 完全接管渲染。
点击右边的图标复制文本。
点击复制自定义内容。
点击右边的图标复制文本并触发回调（已复制 0 次）。
自定义复制图标节点
自定义复制渲染
省略文本
通过 ellipsis 配置单行/多行省略、showTooltip 悬浮显示全文（Tooltip/Popover/自定义浮层）、中间截断 pos、后缀 suffix 与展开收起。
这是一个很长很长很长很长很长的 5 号标题
可以自定义浮层里的展示内容试试看吧 是一个很长很长很长很长的链接文本有后缀的情况：chenzy Design 是一套基于 Svelte 5 runes 构建、遵循 headless 与渲染分层理念的设计系统。
这是一个多行截断的例子：chenzy Design 是一套基于 Svelte 5 runes 构建、遵循 headless 与渲染分层理念的设计系统。 设计系统包含设计语言以及一整套可复用的前端组件，帮助设计师与开发者更容易地打造高质量的、 用户体验一致的、符合设计规范的 Web 应用。
多行截断，展示 Popover：chenzy Design 是一套基于 Svelte 5 runes 构建、遵循 headless 与渲染分层理念的设计系统。 设计系统包含设计语言以及一整套可复用的前端组件，帮助设计师与开发者更容易地打造高质量的、 用户体验一致的、符合设计规范的 Web 应用。
支持展开和折叠：chenzy Design 是一套基于 Svelte 5 runes 构建、遵循 headless 与渲染分层理念的设计系统。 设计系统包含设计语言以及一整套可复用的前端组件，帮助设计师与开发者更容易地打造高质量的、 用户体验一致的、符合设计规范的 Web 应用。
这是一个自定义弹出层组件的省略文本
数值组件
使用 Numeral 按 rule 格式化文本中的数字：取整、百分比、十进制/二进制字节、科学计数等。
点赞量：1.6111e1 K
播放量: 2.4444e2 K
好评率: 0.915 这场比赛我的胜率是 0.6，输的概率是 0.4 已使用: 1000 未使用: 2000000000000 10000数值自定义解析
通过 parser 自定义数值解析规则（千分位），并演示 link 链接样式的 Numeral。
chenzy Design 重视我们的用户，加入并助力我们不断完善
现已服务 100000 用户，前往官网 >>Stars：7100
Fork：560
Downloads：5000000
Contributors：100
API 参考
Typography
Events
| 事件 | 载荷 | 说明 |
|---|---|---|
onCopy | (e: MouseEvent, content: string, res: boolean) | 复制回调（对齐 Semi） |
onExpand | (expanded: boolean, e: MouseEvent) | ellipsis 展开/收起切换 |
Slots
| 名称 | 说明 |
|---|---|
children | 文本内容 |
icon | 前置图标（Text/Numeral） |
copyable.icon / copyable.render | 自定义复制控件 |
Typography.Title <h1..h6>
Props
| 属性 | 说明 | 类型 | 默认值 |
|---|---|---|---|
heading | — | 1|2|3|4|5|6 | 1 |
weight | 字重：字符串枚举走类，数字走内联 style（对齐 Semi） | 'light'|'regular'|'medium'|'semibold'|'bold'|'default'|number | undefined |
id | 透传根元素 id（供 aria-labelledby 关联） | string | undefined |
type | 语义色（对齐 Semi） | 'primary'|'secondary'|'tertiary'|'quaternary'|'warning'|'danger'|'success' | 'primary' |
disabled | — | boolean | false |
mark | <mark> 高亮背景 | boolean | false |
underline | <u> 下划线 | boolean | false |
delete | <del> 删除线 | boolean | false |
code | <code> 等宽代码样式 | boolean | false |
strong | <strong> 加粗 | boolean | false |
link | 链接：true 或透传给 <a> 的属性对象（对齐 Semi link） | boolean | AnchorAttrs | false |
ellipsis | 省略：单行/多行(rows)截断、expandable 展开、suffix、pos、showTooltip。CSS clamp 为默认路径，expandable/suffix/showTooltip/pos≠end 触发 ResizeObserver 测量路径。 | boolean | EllipsisConfig | false |
copyable | 复制：尾部复制按钮 + 成功反馈 + live announce，可自定义 content/copyTip/successTip/icon/render，onCopy(e,content,res) 回调。 | boolean | CopyableConfig | false |
component | 覆盖渲染标签 | string | 各自默认 |
class | — | string | '' |
style | 自定义内联样式（对齐 Semi style） | string | undefined |
Typography.Text <span>
Props
| 属性 | 说明 | 类型 | 默认值 |
|---|---|---|---|
size | 字号档；inherit 继承外层 Typography size（对齐 Semi） | 'normal'|'small'|'inherit' | 'normal' |
weight | 字重（数字，走内联 style） | number | undefined |
icon | 前置图标（对齐 Semi） | Snippet | undefined |
type | 语义色（对齐 Semi） | 'primary'|'secondary'|'tertiary'|'quaternary'|'warning'|'danger'|'success' | 'primary' |
disabled | — | boolean | false |
mark | <mark> 高亮背景 | boolean | false |
underline | <u> 下划线 | boolean | false |
delete | <del> 删除线 | boolean | false |
code | <code> 等宽代码样式 | boolean | false |
strong | <strong> 加粗 | boolean | false |
link | 链接：true 或透传给 <a> 的属性对象（对齐 Semi link） | boolean | AnchorAttrs | false |
ellipsis | 省略：单行/多行(rows)截断、expandable 展开、suffix、pos、showTooltip。CSS clamp 为默认路径，expandable/suffix/showTooltip/pos≠end 触发 ResizeObserver 测量路径。 | boolean | EllipsisConfig | false |
copyable | 复制：尾部复制按钮 + 成功反馈 + live announce，可自定义 content/copyTip/successTip/icon/render，onCopy(e,content,res) 回调。 | boolean | CopyableConfig | false |
component | 覆盖渲染标签 | string | 各自默认 |
class | — | string | '' |
style | 自定义内联样式（对齐 Semi style） | string | undefined |
Typography.Paragraph <p>
Props
| 属性 | 说明 | 类型 | 默认值 |
|---|---|---|---|
size | — | 'normal'|'small' | 'normal' |
spacing | 行距（对齐 Semi） | 'normal'|'extended' | 'normal' |
type | 语义色（对齐 Semi） | 'primary'|'secondary'|'tertiary'|'quaternary'|'warning'|'danger'|'success' | 'primary' |
disabled | — | boolean | false |
mark | <mark> 高亮背景 | boolean | false |
underline | <u> 下划线 | boolean | false |
delete | <del> 删除线 | boolean | false |
code | <code> 等宽代码样式 | boolean | false |
strong | <strong> 加粗 | boolean | false |
link | 链接：true 或透传给 <a> 的属性对象（对齐 Semi link） | boolean | AnchorAttrs | false |
ellipsis | 省略：单行/多行(rows)截断、expandable 展开、suffix、pos、showTooltip。CSS clamp 为默认路径，expandable/suffix/showTooltip/pos≠end 触发 ResizeObserver 测量路径。 | boolean | EllipsisConfig | false |
copyable | 复制：尾部复制按钮 + 成功反馈 + live announce，可自定义 content/copyTip/successTip/icon/render，onCopy(e,content,res) 回调。 | boolean | CopyableConfig | false |
component | 覆盖渲染标签 | string | 各自默认 |
class | — | string | '' |
style | 自定义内联样式（对齐 Semi style） | string | undefined |
Typography.Numeral <span>
数值格式化文本（对齐 Semi）：遍历 children 文本节点按规则格式化其中数字。复用 Text 全部样式 props。
Props
| 属性 | 说明 | 类型 | 默认值 |
|---|---|---|---|
rule | 解析规则 | 'text'|'numbers'|'bytes-decimal'|'bytes-binary'|'percentages'|'exponential' | 'text' |
precision | 保留小数位数 | number | 0 |
truncate | 小数截断取整方式 | 'ceil'|'floor'|'round' | 'round' |
parser | 自定义解析函数（优先于 rule） | (raw: string) => string | undefined |
size | — | 'normal'|'small'|'inherit' | 'normal' |
icon | — | Snippet | undefined |
type | 语义色（对齐 Semi） | 'primary'|'secondary'|'tertiary'|'quaternary'|'warning'|'danger'|'success' | 'primary' |
disabled | — | boolean | false |
mark | <mark> 高亮背景 | boolean | false |
underline | <u> 下划线 | boolean | false |
delete | <del> 删除线 | boolean | false |
code | <code> 等宽代码样式 | boolean | false |
strong | <strong> 加粗 | boolean | false |
link | 链接：true 或透传给 <a> 的属性对象（对齐 Semi link） | boolean | AnchorAttrs | false |
ellipsis | 省略：单行/多行(rows)截断、expandable 展开、suffix、pos、showTooltip。CSS clamp 为默认路径，expandable/suffix/showTooltip/pos≠end 触发 ResizeObserver 测量路径。 | boolean | EllipsisConfig | false |
copyable | 复制：尾部复制按钮 + 成功反馈 + live announce，可自定义 content/copyTip/successTip/icon/render，onCopy(e,content,res) 回调。 | boolean | CopyableConfig | false |
component | 覆盖渲染标签 | string | 各自默认 |
class | — | string | '' |
style | 自定义内联样式（对齐 Semi style） | string | undefined |
EllipsisConfig
| 属性 | 类型 | 默认值 | 说明 |
|---|---|---|---|
rows | number | 1 | — |
expandable | boolean | false | — |
collapsible | boolean | false | — |
expandText / collapseText | string | i18n | — |
suffix | string | undefined | — |
pos | 'end'|'middle'|'start' | 'end' | — |
showTooltip | boolean | { type?: 'tooltip'|'popover'; opts?: { content?; title?; theme?; placement?; position?; maxWidth? }; renderTooltip?: Snippet<[fullText, trigger]> } | false | — |
onExpand | (expanded: boolean, e: MouseEvent) => void | undefined | — |
CopyableConfig
| 属性 | 类型 | 默认值 | 说明 |
|---|---|---|---|
content | string | 节点文本 | 复制到剪贴板的内容 |
copyTip | string | i18n copy | 复制图标 tooltip 文案 |
successTip | string | i18n copied | 复制成功提示 |
icon | Snippet | 内置图标 | 自定义复制图标 |
onCopy | (e: MouseEvent, content: string, res: boolean) => void | undefined | — |
render | Snippet<[copied, doCopy, config]> | undefined | 完全接管复制控件渲染 |
设计变量
| 变量 | 默认值 | 用法 |
|---|---|---|
--cd-color-typography-code-bg-default | var(--cd-color-fill-1) | 代码文本背景颜色 |
--cd-color-typography-code-border-default | var(--cd-color-border) | 代码文本描边颜色 |
--cd-color-typography-code-text-default | var(--cd-color-text-2) | 代码文本颜色 |
--cd-color-typography-copied-icon-success | var(--cd-color-success) | 可复制文本复制成功图标颜色 |
--cd-color-typography-copied-text-success | var(--cd-color-text-2) | 可复制文本颜色 |
--cd-color-typography-danger-text-default | var(--cd-color-danger) | 错误文本颜色 |
--cd-color-typography-default-text-default | var(--cd-color-text-0) | 默认文本颜色 |
--cd-color-typography-disabled-text-default | var(--cd-color-disabled-text) | 禁用文本颜色 |
--cd-color-typography-link-text-active | var(--cd-color-link-active) | 链接文本颜色 - 激活 |
--cd-color-typography-link-text-default | var(--cd-color-link) | 链接文本颜色 - 默认 |