组件 · 通用
Typography 排版
排版套件：TypographyTitle/Text/Paragraph/Link 等；本条目以 TypographyText 为代表性导出。
使用建议
- 避免：把按钮文案用 TypographyLink 冒充导航
- 限制：属性与导出以 @selrux/ui 对应子路径 d.ts/源码为准，禁止臆造
引入
import {
TypographyCode,
TypographyCopy,
TypographyEditable,
TypographyEllipsis,
TypographyKbd,
TypographyLink,
// …共 19 个导出
} from '@selrux/ui/typography';演练场
调节下方可实现的字面量属性，实时预览真实组件。函数、Portal、样式逃生口等见代码演示与 API 表。
代码演示
标题
level 1–6 对应 h1–h6。
二级标题
三级标题
带前缀条的四级标题
文本与语气
tone 表示语义色，strong / italic / underline / strike 为排版修饰。
段落与行内元素
Code、Kbd、Mark 可嵌入段落。
运行 pnpm build 构建产物，按 Ctrl + K 打开搜索，高亮表示命中词。
语气色与文字修饰
tone 取主题角色色；strong / italic / underline / strike；color 支持自定义颜色或渐变；Title 的 barColor 为左侧色条。
季度经营报告
标题也支持修饰
info
success
warning
error
secondary
已作废的条款（strong + italic + underline + strike）
size="lg" 的文本链接
TypographyLink 支持 tone、size、strong / italic / underline / strike 与自定义 color（含渐变）。
列表、引用与长文
TypographyList 的 ordered / type 编号样式、tone、color；TypographyQuote 引用；TypographyProse 的 leading / flow 设定行高与段距。
- 提交申请
- 部门审批
- 财务复核
- 支持暗色模式
- 按需加载样式
好的中后台界面，应该让人专注于数据本身。
第一段：Prose 为一段富文本设置统一的行高与段距。
第二段：适合帮助文档、公告详情。
省略
TypographyEllipsis 的 lines 行数、mode（end / middle / start）、suffix 后缀、expandable 展开收起（expanded / onExpandedChange 受控）、tooltip 溢出提示、tone、size。
复制与可编辑
TypographyCopy 复制 text，label 为按钮名称；TypographyEditable 行内编辑（value / onValueChange、editing / onEditingChange 受控，onCancel、pending、maxLength、multiline、size）。
sk-live-8f3a…行内元素尺寸
TypographyCode / Kbd / Mark 的 size。
npm i ⌘K 重点npm i ⌘K 重点npm i ⌘K 重点API
属性覆盖：示例用到 69 / 72 个自有属性（95.8%）
由 scripts/demo-coverage.mjs 统计，不含 className / style / 原生透传属性与纯转发事件。
TypographyLink.referrerPolicy：原生 <a> 属性透传TypographyLink.ping：原生 <a> 属性透传
TypographyCode
行内代码外观。
| 属性 | 说明 | 类型 | 默认值 |
|---|---|---|---|
size | - | "xs" | "sm" | "md" | "lg" | "xl" | "2xl" | - |
另有 279 项原生属性与事件继承自 HTMLAttributes，原样透传。
TypographyCopy
复制按钮外观。
| 属性 | 说明 | 类型 | 默认值 |
|---|---|---|---|
text * | 写入剪贴板的纯文本。 | string | - |
onCopy | 成功后通知一次。 | (() => void) | - |
onCopyError | 失败后通知一次。 | ((error: unknown) => void) | - |
label | 覆盖可访问名称。 | string | - |
size | - | "xs" | "sm" | "md" | "lg" | "xl" | "2xl" | - |
另有 287 项原生属性与事件继承自 ButtonHTMLAttributes / HTMLAttributes，原样透传。
TypographyEditable
可编辑文本外观。
| 属性 | 说明 | 类型 | 默认值 |
|---|---|---|---|
label * | 编辑器可访问名称，必填。 | string | - |
multiline | 多行编辑；默认 false。 | boolean | false |
pending | 异步保存中禁止重复提交。 | boolean | - |
maxLength | 原生 maxLength；提交时同步校验。 | number | - |
onCommit | - | ((next: string) => void) | - |
onCancel | - | (() => void) | - |
onValueChange | - | ((next: string) => void) | - |
onEditingChange | - | ((next: boolean) => void) | - |
value | - | string | - |
defaultValue | - | string | - |
editing | - | boolean | - |
defaultEditing | - | boolean | - |
size | - | "xs" | "sm" | "md" | "lg" | "xl" | "2xl" | - |
另有 278 项原生属性与事件继承自 HTMLAttributes，原样透传。
TypographyEllipsis
省略外观；仅文本触发器组合 Tooltip，展开按钮保持兄弟节点。
| 属性 | 说明 | 类型 | 默认值 |
|---|---|---|---|
text * | 唯一正文；不裁切 ReactNode。 | string | - |
lines | 正整数行数；默认 1。middle/start 按单行测量。 | number | 1 |
mode | 裁切模式；默认 end。 | "middle" | "start" | "end" | end |
suffix | 截断后固定后缀。 | string | - |
expandable | 是否提供展开/收起。 | boolean | - |
onExpandedChange | - | ((next: boolean) => void) | - |
expanded | - | boolean | - |
defaultExpanded | - | boolean | - |
size | - | "xs" | "sm" | "md" | "lg" | "xl" | "2xl" | - |
tone | 主题角色色；默认 default（foreground）。 | "default" | "info" | "success" | "warning" | "error" | "primary" | "carbon" | "secondary" | "accent" | - |
tooltip | 溢出时自动 Tooltip；默认 true。 | boolean | true |
另有 278 项原生属性与事件继承自 HTMLAttributes，原样透传。
TypographyKbd
键盘按键外观。
| 属性 | 说明 | 类型 | 默认值 |
|---|---|---|---|
size | - | "xs" | "sm" | "md" | "lg" | "xl" | "2xl" | - |
另有 279 项原生属性与事件继承自 HTMLAttributes，原样透传。
TypographyLink
可识别链接样式；默认 tone=primary（主题主色）。
| 属性 | 说明 | 类型 | 默认值 |
|---|---|---|---|
color | 自定义文字色或 CSS 渐变。 传入后覆盖 tone；渐变使用 background-clip:text。 | string | - |
referrerPolicy | - | "" | "no-referrer" | "no-referrer-when-downgrade" | "origin" | "origin-when-cross-origin" | "same-origin" | "strict-origin" | "strict-origin-when-cross-origin" | "unsafe-url" | - |
ping | - | string | - |
size | - | "xs" | "sm" | "md" | "lg" | "xl" | "2xl" | - |
tone | 主题角色色；默认 default（foreground）。 | "default" | "info" | "success" | "warning" | "error" | "primary" | "carbon" | "secondary" | "accent" | - |
strong | - | boolean | - |
italic | - | boolean | - |
underline | - | boolean | - |
strike | - | boolean | - |
另有 284 项原生属性与事件继承自 ，原样透传。
TypographyList
列表外观。
| 属性 | 说明 | 类型 | 默认值 |
|---|---|---|---|
color | 自定义文字色或 CSS 渐变。 传入后覆盖 tone；渐变使用 background-clip:text。 | string | - |
type | - | "a" | "i" | "1" | "A" | "I" | - |
ordered | - | boolean | - |
size | - | "xs" | "sm" | "md" | "lg" | "xl" | "2xl" | - |
tone | 主题角色色；默认 default（foreground）。 | "default" | "info" | "success" | "warning" | "error" | "primary" | "carbon" | "secondary" | "accent" | - |
另有 280 项原生属性与事件继承自 ，原样透传。
TypographyListItem
列表项外观。
无自有属性；其余 280 项原生属性继承自 HTMLAttributes / LiHTMLAttributes。
TypographyMark
高亮标记外观。
| 属性 | 说明 | 类型 | 默认值 |
|---|---|---|---|
size | - | "xs" | "sm" | "md" | "lg" | "xl" | "2xl" | - |
另有 279 项原生属性与事件继承自 HTMLAttributes，原样透传。
TypographyParagraph
段落外观。
| 属性 | 说明 | 类型 | 默认值 |
|---|---|---|---|
size | - | "xs" | "sm" | "md" | "lg" | "xl" | "2xl" | - |
tone | 主题角色色；默认 default（foreground）。 | "default" | "info" | "success" | "warning" | "error" | "primary" | "carbon" | "secondary" | "accent" | - |
strong | - | boolean | - |
italic | - | boolean | - |
underline | - | boolean | - |
strike | - | boolean | - |
另有 279 项原生属性与事件继承自 HTMLAttributes，原样透传。
TypographyProse
Typeset 改写：子树原生 HTML 节奏样式容器。
| 属性 | 说明 | 类型 | 默认值 |
|---|---|---|---|
size | - | "xs" | "sm" | "md" | "lg" | "xl" | "2xl" | - |
leading | - | string | number | - |
flow | - | string | number | - |
另有 279 项原生属性与事件继承自 HTMLAttributes，原样透传。
TypographyQuote
引用块外观；默认 tone=carbon 作为主题中性次要文字。
| 属性 | 说明 | 类型 | 默认值 |
|---|---|---|---|
size | - | "xs" | "sm" | "md" | "lg" | "xl" | "2xl" | - |
tone | 主题角色色；默认 default（foreground）。 | "default" | "info" | "success" | "warning" | "error" | "primary" | "carbon" | "secondary" | "accent" | - |
strong | - | boolean | - |
italic | - | boolean | - |
underline | - | boolean | - |
strike | - | boolean | - |
另有 280 项原生属性与事件继承自 BlockquoteHTMLAttributes / HTMLAttributes，原样透传。
TypographyText
行内文本外观。
| 属性 | 说明 | 类型 | 默认值 |
|---|---|---|---|
size | - | "xs" | "sm" | "md" | "lg" | "xl" | "2xl" | - |
tone | 主题角色色；默认 default（foreground）。 | "default" | "info" | "success" | "warning" | "error" | "primary" | "carbon" | "secondary" | "accent" | - |
strong | - | boolean | - |
italic | - | boolean | - |
underline | - | boolean | - |
strike | - | boolean | - |
另有 279 项原生属性与事件继承自 HTMLAttributes，原样透传。
TypographyTitle
标题；barTone/barColor 仅在 prefix="bar" 时生效，自定义 prefix 不染色条。
| 属性 | 说明 | 类型 | 默认值 |
|---|---|---|---|
level | 默认 2，映射到 h1～h6。 | 1 | 2 | 3 | 4 | 5 | 6 | 2 |
prefix | 'bar' 为色条；传 ReactNode（Icon、img 等）渲染在逻辑起始侧。
自定义前缀装饰性隐藏，名称由标题文字提供。 | TypographyTitlePrefix | - |
size | - | "xs" | "sm" | "md" | "lg" | "xl" | "2xl" | - |
tone | 主题角色色；默认 default（foreground）。 | "default" | "info" | "success" | "warning" | "error" | "primary" | "carbon" | "secondary" | "accent" | - |
strong | - | boolean | - |
italic | - | boolean | - |
underline | - | boolean | - |
strike | - | boolean | - |
barTone | - | "default" | "info" | "success" | "warning" | "error" | "primary" | "carbon" | "secondary" | "accent" | - |
barColor | - | string | - |
另有 278 项原生属性与事件继承自 HTMLAttributes，原样透传。
导出类型：TypographyCodeProps、TypographyCopyProps、TypographyEditableProps、TypographyEllipsisMode、TypographyEllipsisProps、TypographyKbdProps、TypographyLinkProps、TypographyListItemProps、TypographyListProps、TypographyMarkProps、TypographyParagraphProps、TypographyProseProps、TypographyQuoteProps、TypographySize、TypographyTextProps、TypographyTitleLevel、TypographyTitlePrefix、TypographyTitleProps、TypographyTone、TypographyVisualProps
函数与常量
| 名称 | 说明 | 签名 / 类型 |
|---|---|---|
isCssGradient | 判断是否为 CSS 渐变值。 | (value: string) => boolean |
resolveTypographyBarStyle | 解析标题 bar 专用色；只写 --_srx-typo-bar-ink，不改标题文字色。
barColor 优先于 barTone。 | (options: { barTone?: TypographyTone; barColor?: string; style?: CSSProperties; }) => { barTone?: TypographyTone; barColorMode?: "custom" | "gradient"; style?: CSSProperties; } |
resolveTypographyColorStyle | 解析文字自定义色/渐变；只影响文字墨水，不写 bar。 | (color: string | undefined, style?: CSSProperties) => { colorMode?: "custom" | "gradient"; style?: CSSProperties; } |
resolveTypographySize | 组件 prop → Provider → md。 | (size: TypographySize | undefined, providerSize: ControlSize | undefined) => TypographySize |
typographySizes | 六档尺寸名。 | readonly ["xs", "sm", "md", "lg", "xl", "2xl"] |
无障碍
摘自源码 JSDoc。
TypographyCopy.label：覆盖可访问名称。TypographyEditable.label：编辑器可访问名称，必填。- 键盘按键外观。