R后悔药 Rue.js
  • 首页
    • 深度指南
    • 实战例子
    • 快速上手
    • 路由指南
    • 术语表
    • 错误代码参考
  • API
    • 合作伙伴
    • 插件
    • 组件库
    • 工具链
    • Text.js
    • 新闻简报
    • 常见问题
    • 团队
    • 版本发布
    • 社区指南
    • 行为规范
    • 隐私政策
  • 赞助
  • 合作伙伴
设置
目录统计
总条目
  • 按钮 Button
  • 排版 Typography
  • 时间选择器 TimePicker
  • 下拉菜单 Dropdown
  • 悬浮操作按钮 FAB
  • 模态框 Modal
  • 切换 Swap
  • 主题控制器 Theme Controller
  • 手风琴 Accordion
  • 头像 Avatar
  • 徽标 Badge
  • 卡片 Card
  • 轮播 Carousel
  • 聊天气泡 Chat
  • 折叠面板 Collapse
  • 倒计时 Countdown
  • 描述列表 Descriptions
  • 对比 Diff
  • 二维码 QRCode
  • 悬浮 3D 卡片 Hover 3D
  • 悬浮画廊 Hover Gallery
  • 键盘提示 Kbd
  • 列表 List
  • 统计 Stat
  • 状态 Status
  • 表格 Table
  • 文本轮播 Text Rotate
  • 时间线 Timeline
  • 锚点 Anchor
  • 固钉 Affix
  • 面包屑 Breadcrumbs
  • 底部导航 Dock
  • 链接 Link
  • 菜单 Menu
  • 导航栏 Navbar
  • 分页 Pagination
  • 步骤 Steps
  • 选项卡 Tabs
  • 提示 Alert
  • 结果页 Result
  • 空状态 Empty
  • 加载 Loading
  • 全局提示 Message
  • 进度条 Progress
  • 环形进度 Radial Progress
  • 骨架屏 Skeleton
  • 通知提醒框 Notification
  • 轻提示 Toast
  • 气泡确认框 Popconfirm
  • 气泡卡片 Popover
  • 工具提示 Tooltip
  • 日历 Calendar
  • 颜色选择器 ColorPicker
  • 复选框 Checkbox
  • 字段集 Fieldset
  • 表单 Form
  • 文件输入 File Input
  • 筛选器 Filter
  • 标签 Label
  • 单选框 Radio
  • 范围选择 Range
  • 评分 Rating
  • 分段选择 Segmented
  • 自动完成 AutoComplete
  • 选择器 Select
  • 树选择 TreeSelect
  • 树控件 Tree
  • 提及输入 Mentions
  • 穿梭框 Transfer
  • 漫游引导 Tour
  • 输入框 Input
  • 数字输入 InputNumber
  • 文本域 Textarea
  • 开关 Toggle
  • 校验器 Validator
  • 分隔线 Divider
  • 弹性布局 Flex
  • 分割面板 Splitter
  • 抽屉侧边栏 Drawer
  • 页脚 Footer
  • 栅格 Grid
  • 瀑布流 Masonry
  • 布局 Layout
  • 主视觉区 Hero
  • 指示器 Indicator
  • 组合项 Join
  • 蒙版 Mask
  • 水印 Watermark
  • 间距 Space
  • 堆叠 Stack
  • 浏览器样机 Mockup Browser
  • 代码样机 Mockup Code
  • 手机样机 Mockup Phone
  • 窗口样机 Mockup Window
目录统计
总条目
  • 按钮 Button
  • 排版 Typography
  • 时间选择器 TimePicker
  • 下拉菜单 Dropdown
  • 悬浮操作按钮 FAB
  • 模态框 Modal
  • 切换 Swap
  • 主题控制器 Theme Controller
  • 手风琴 Accordion
  • 头像 Avatar
  • 徽标 Badge
  • 卡片 Card
  • 轮播 Carousel
  • 聊天气泡 Chat
  • 折叠面板 Collapse
  • 倒计时 Countdown
  • 描述列表 Descriptions
  • 对比 Diff
  • 二维码 QRCode
  • 悬浮 3D 卡片 Hover 3D
  • 悬浮画廊 Hover Gallery
  • 键盘提示 Kbd
  • 列表 List
  • 统计 Stat
  • 状态 Status
  • 表格 Table
  • 文本轮播 Text Rotate
  • 时间线 Timeline
  • 锚点 Anchor
  • 固钉 Affix
  • 面包屑 Breadcrumbs
  • 底部导航 Dock
  • 链接 Link
  • 菜单 Menu
  • 导航栏 Navbar
  • 分页 Pagination
  • 步骤 Steps
  • 选项卡 Tabs
  • 提示 Alert
  • 结果页 Result
  • 空状态 Empty
  • 加载 Loading
  • 全局提示 Message
  • 进度条 Progress
  • 环形进度 Radial Progress
  • 骨架屏 Skeleton
  • 通知提醒框 Notification
  • 轻提示 Toast
  • 气泡确认框 Popconfirm
  • 气泡卡片 Popover
  • 工具提示 Tooltip
  • 日历 Calendar
  • 颜色选择器 ColorPicker
  • 复选框 Checkbox
  • 字段集 Fieldset
  • 表单 Form
  • 文件输入 File Input
  • 筛选器 Filter
  • 标签 Label
  • 单选框 Radio
  • 范围选择 Range
  • 评分 Rating
  • 分段选择 Segmented
  • 自动完成 AutoComplete
  • 选择器 Select
  • 树选择 TreeSelect
  • 树控件 Tree
  • 提及输入 Mentions
  • 穿梭框 Transfer
  • 漫游引导 Tour
  • 输入框 Input
  • 数字输入 InputNumber
  • 文本域 Textarea
  • 开关 Toggle
  • 校验器 Validator
  • 分隔线 Divider
  • 弹性布局 Flex
  • 分割面板 Splitter
  • 抽屉侧边栏 Drawer
  • 页脚 Footer
  • 栅格 Grid
  • 瀑布流 Masonry
  • 布局 Layout
  • 主视觉区 Hero
  • 指示器 Indicator
  • 组合项 Join
  • 蒙版 Mask
  • 水印 Watermark
  • 间距 Space
  • 堆叠 Stack
  • 浏览器样机 Mockup Browser
  • 代码样机 Mockup Code
  • 手机样机 Mockup Phone
  • 窗口样机 Mockup Window

Typography 排版

Typography 采用常见业务排版组件的组织方式,提供Text、Link、Title、Paragraph这组复合 API。

它使用 Rue 当前轻量、类名直连的风格,同时也成为 Text Rotate 等组件的语义文本底座。

# Inline text states

Use Text and Link for tone, emphasis and inline semantic content

RueSecondarySuccessHighlightpnpm devEscDanger Link

# 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.

ReadableReviewableDeployable

API

API 按根组件、内联语义组件和排版语义组件拆分,便于先搭内容结构,再补细粒度的强调方式。

Typography Root

根组件适合承接完整文案区块,本身不强加复杂布局,只提供稳定的文本基底。

Text / Link

这组组件偏内联表达,适合补 tone、强调状态、代码语义和链接能力。

Title / Paragraph

用于标题层级和正文节奏,适合和其他业务组件组合成完整的内容模块。

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。booleanfalse
mark / code / keyboard将内容包装成高亮、代码片段或键帽样式。booleanfalse
underline / delete / strong / italic控制下划线、删除线、加粗和斜体等强调方式。booleanfalse
href / target / rel仅 Typography.Link 支持的链接属性,target 为 _blank 时默认补 noreferrer。string-

Typography.Title / Typography.Paragraph

排版子组件负责标题层级和正文节奏,也可以直接和 Text Rotate 之类的组件组合使用。

属性说明类型默认值
level仅 Typography.Title 支持,映射 h1 到 h5 的标题层级与字号。1 | 2 | 3 | 4 | 51
type标题和段落都支持语义色调,便于和正文 tone 保持统一。TypographyTone'default'
disabled弱化显示并补 aria-disabled,适合只读或禁用态文案。booleanfalse
mark / code / keyboard允许标题和段落复用高亮、代码和键帽包装能力。booleanfalse
underline / delete / strong / italic支持强调、删除和斜体等排版修饰。booleanfalse
className / style / children用于补充样式和传入可组合内容,Paragraph 默认输出段落节点。any-
页内导航
页内导航
文档
  • 深度指南
  • 实战例子
  • 快速上手
  • 术语表
  • 错误码参照表
关于
  • 常见问题
  • 团队
  • 版本发布
  • 社区指南
生态
  • 插件
  • 组件库
  • 路由指南
  • Text.js
© 2024-2026 Xiangmin Liu
Rue.JS