Typography 排版
Typography 采用常见业务排版组件的组织方式,提供Text、Link、Title、Paragraph这组复合 API。
它使用 Rue 当前轻量、类名直连的风格,同时也成为 Text Rotate 等组件的语义文本底座。
# Inline text states
Use Text and Link for tone, emphasis and inline semantic content
# Title and paragraph composition
Organize headings, body copy and inline emphasis in one consistent text system
Release notes that stay readable
Use Text for emphasis, code for commands, and Typography.Link for inline actions.
Paragraph keeps the reading rhythm while letting inline semantics stay expressive.
# Heading levels
Map Title level to h1 through h5 while keeping Rue's typography rhythm
Heading 1
Heading 2
Heading 3
Heading 4
Heading 5
# Compose with Text Rotate
The semantic API is shared, so static copy and rotating words feel like one family
Ship better UI for design systemsdocs sitesteam workflows
TextRotate items reuse the same semantic API, so headings, body copy and rotating words stay in one typography system.
ReadableReviewableDeployableAPI
API 按根组件、内联语义组件和排版语义组件拆分,便于先搭内容结构,再补细粒度的强调方式。
根组件适合承接完整文案区块,本身不强加复杂布局,只提供稳定的文本基底。
这组组件偏内联表达,适合补 tone、强调状态、代码语义和链接能力。
用于标题层级和正文节奏,适合和其他业务组件组合成完整的内容模块。
Typography
根组件负责承接一整段排版内容,适合包裹标题、正文和其他语义文本节点。
| 属性 | 说明 | 类型 | 默认值 |
|---|---|---|---|
as | 根节点标签,适合在 div、section、article 之间切换。 | 'div' | 'section' | 'article' | 'div' |
className / style | 补充根节点样式;默认带有 rue-typography 与基础文本颜色。 | string / any | - |
children | 放置 Text、Link、Title、Paragraph 或任意可组合内容。 | any | - |
Typography.Text / Typography.Link
内联子组件负责 tone、强调和链接表达,适合放进句子、描述和其他组件的插槽里复用。
| 属性 | 说明 | 类型 | 默认值 |
|---|---|---|---|
as | 仅 Typography.Text 支持,用于指定输出标签。 | 'span' | 'div' | 'p' | 'span' |
type | 文本语气,默认普通文本,其余映射到语义颜色。 | TypographyTone | 'default' |
disabled | 禁用交互并弱化视觉,同时补充 aria-disabled。 | boolean | false |
mark / code / keyboard | 将内容包装成高亮、代码片段或键帽样式。 | boolean | false |
underline / delete / strong / italic | 控制下划线、删除线、加粗和斜体等强调方式。 | boolean | false |
href / target / rel | 仅 Typography.Link 支持的链接属性,target 为 _blank 时默认补 noreferrer。 | string | - |
Typography.Title / Typography.Paragraph
排版子组件负责标题层级和正文节奏,也可以直接和 Text Rotate 之类的组件组合使用。
| 属性 | 说明 | 类型 | 默认值 |
|---|---|---|---|
level | 仅 Typography.Title 支持,映射 h1 到 h5 的标题层级与字号。 | 1 | 2 | 3 | 4 | 5 | 1 |
type | 标题和段落都支持语义色调,便于和正文 tone 保持统一。 | TypographyTone | 'default' |
disabled | 弱化显示并补 aria-disabled,适合只读或禁用态文案。 | boolean | false |
mark / code / keyboard | 允许标题和段落复用高亮、代码和键帽包装能力。 | boolean | false |
underline / delete / strong / italic | 支持强调、删除和斜体等排版修饰。 | boolean | false |
className / style / children | 用于补充样式和传入可组合内容,Paragraph 默认输出段落节点。 | any | - |