Typography 排版
用于展示标题、段落、文本和链接等排版内容。
标题级别
使用 level 属性来定义标题级别，支持 h1 - h6。
一级标题 h1
二级标题 h2
三级标题 h3
四级标题 h4
五级标题 h5
六级标题 h6
标题级别
文本类型
使用 type 属性来定义文本的语义颜色。
默认文本主要成功警告危险信息次要
文本类型
文本装饰
通过 bold、italic、underline、delete、mark、code、keyboard 等属性控制文本样式。
加粗文本斜体文本下划线文本删除线文本标记文本
代码风格键盘风格文本装饰
文本尺寸
使用 size 属性来设置文本大小。
小号文本默认文本大号文本
文本尺寸
段落
段落组件支持 type 语义颜色和 align 对齐方式。
YH-UI 是一个基于 Vue 3 的现代化 UI 组件库，提供了丰富的组件和工具函数。 通过组合式 API 和 TypeScript 的强类型支持，为开发者提供极致的开发体验。
本段落使用了次要色彩类型，适用于辅助说明和提示信息的场景。
段落
链接
链接组件支持 href、target、type、underline、disabled 等属性。
省略
标题和段落支持 ellipsis 属性。Title 设置布尔值控制单行省略，Paragraph 设置数字控制多行省略。
这是一段很长的标题文字，当容器宽度不足时会自动显示省略号来截断溢出的内容，保持界面整洁。
省略
在 Nuxt 中使用
Typography 组件完全支持 Nuxt 3/4 的 SSR 渲染。在 Nuxt 项目中使用时，组件会自动导入，无需手动注册。以下示例演示结合 useAsyncData 展示异步加载状态。
Nuxt 中使用
SSR 注意事项：
- ✅ 所有 Props 和样式完全支持
- ✅ 语义化标签 (h1-h6, p, span, a) 完美渲染
- ✅ 插槽内容完整渲染
- ✅ 省略号样式正确输出
- ✅ 文本装饰、类型颜色等状态类正常工作
SSR 安全性
Typography 所有子组件均已通过 SSR 测试，确保服务端和客户端渲染完全一致，Hydration 无错误。
API
Typography.Title Props
| 属性名 | 说明 | 类型 | 默认值 |
|---|---|---|---|
| level | 标题级别 | 1 | 2 | 3 | 4 | 5 | 6 | 1 |
| type | 文本类型 | 'primary' | 'success' | 'warning' | 'danger' | 'info' | 'secondary' | — |
| bold | 是否加粗 | boolean | true |
| delete | 删除线 | boolean | false |
| underline | 下划线 | boolean | false |
| italic | 斜体 | boolean | false |
| mark | 标记高亮 | boolean | false |
| code | 代码风格 | boolean | false |
| ellipsis | 省略 | boolean | false |
| tag | 自定义标签名 | string | — |
| themeOverrides | 主题覆盖变量 | ComponentThemeVars | — |
Typography.Text Props
| 属性名 | 说明 | 类型 | 默认值 |
|---|---|---|---|
| type | 文本类型 | 'primary' | 'success' | 'warning' | 'danger' | 'info' | 'secondary' | — |
| size | 字体大小 | 'small' | 'default' | 'large' | — |
| bold | 加粗 | boolean | false |
| delete | 删除线 | boolean | false |
| underline | 下划线 | boolean | false |
| italic | 斜体 | boolean | false |
| mark | 标记 | boolean | false |
| code | 代码风格 | boolean | false |
| keyboard | 键盘风格 | boolean | false |
| ellipsis | 省略 | boolean | false |
| tag | 自定义标签名 | string | 'span' |
| themeOverrides | 主题覆盖变量 | ComponentThemeVars | — |
Typography.Paragraph Props
| 属性名 | 说明 | 类型 | 默认值 |
|---|---|---|---|
| type | 文本类型 | 'primary' | 'success' | 'warning' | 'danger' | 'info' | 'secondary' | — |
| align | 对齐方式 | 'left' | 'center' | 'right' | 'justify' | — |
| spacing | 段落间距 | 'compact' | 'default' | 'loose' | 'default' |
| bold | 加粗 | boolean | false |
| delete | 删除线 | boolean | false |
| italic | 斜体 | boolean | false |
| mark | 标记 | boolean | false |
| ellipsis | 省略 (布尔=单行, 数字=多行) | boolean | number | false |
| themeOverrides | 主题覆盖变量 | ComponentThemeVars | — |
Typography.Link Props
| 属性名 | 说明 | 类型 | 默认值 |
|---|---|---|---|
| href | 链接地址 | string | — |
| target | 打开方式 | '_blank' | '_self' | '_parent' | '_top' | '_self' |
| type | 链接类型 | 'primary' | 'success' | 'warning' | 'danger' | 'info' | — |
| underline | 下划线 | boolean | false |
| disabled | 禁用 | boolean | false |
| themeOverrides | 主题覆盖变量 | ComponentThemeVars | — |
Slots
所有 Typography 子组件均支持 default 默认插槽。
主题变量
Typography 组件支持通过覆盖以下 CSS 变量来自定义局部样式：
| 变量名 | 说明 | 默认值 |
|---|---|---|
--yh-typography-title-color | 标题颜色 | var(--yh-text-color-primary, #303133) |
--yh-typography-title-weight | 标题字重 | 600 |
--yh-typography-h1-size | h1 字号 | 32px |
--yh-typography-h2-size | h2 字号 | 28px |
--yh-typography-h3-size | h3 字号 | 24px |
--yh-typography-h4-size | h4 字号 | 20px |
--yh-typography-h5-size | h5 字号 | 16px |
--yh-typography-h6-size | h6 字号 | 14px |
--yh-typography-text-color | 文本颜色 | var(--yh-text-color-regular, #606266) |
--yh-typography-text-size | 文本字号 | 14px |
--yh-typography-line-height | 行高 | 1.5 |
--yh-typography-paragraph-line-height | 段落行高 | 1.8 |
--yh-typography-link-color | 链接颜色 | var(--yh-color-primary, #409eff) |
--yh-typography-link-hover-color | 链接悬浮色 | var(--yh-color-primary-light-3, #79bbff) |
--yh-typography-mark-bg | 标记背景色 | #ffe58f |
--yh-font-family-monospace | 等宽字体 | 'SFMono-Regular', Consolas, monospace |