Typography 排版
面向标题、正文与行内代码的语义化排版原语，基于 React Aria Components 的 Text 构建。
引入
import {Typography} from "@heroui/react";
用法
HeroUI 示例
默认情况下，Typography 会将视觉上的 type 映射到对应的语义化元素。
子组件
HeroUI 示例
Typography.Heading将level={1..6}映射为type="h1"至type="h6"。Typography.Paragraph将size="base" | "sm" | "xs"映射为正文样式。Typography.Code映射为行内代码样式。Typography.Prose为以常规 HTML 子节点传入的富文本内容提供排版样式。
Prose
HeroUI 示例
Render Prop
HeroUI 示例
需要自定义实际渲染的元素时，可使用 React Aria Components 风格的 render prop。
CSS 类名
基础类
.typography- 排版基础原语.typography-prose- 富文本文章体容器
类型类
.typography--h1至.typography--h6.typography--body、.typography--body-sm、.typography--body-xs.typography--code
修饰类
.typography--align-start、.typography--align-center、.typography--align-end、.typography--align-justify.typography--color-default、.typography--color-muted.typography--truncate.typography--weight-normal、.typography--weight-medium、.typography--weight-semibold、.typography--weight-bold
API 参考
Typography 属性
| 属性 | 类型 | 默认值 | 说明 |
|---|---|---|---|
type | 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | 'body' | 'body-sm' | 'body-xs' | 'code' | 'body' | 语义化排版样式。 |
align | 'start' | 'center' | 'end' | 'justify' | 'start' | 文本对齐。 |
color | 'default' | 'muted' | 'default' | 文本颜色。 |
weight | 'normal' | 'medium' | 'semibold' | 'bold' | - | 字重覆盖。 |
truncate | boolean | - | 将文本截断为单行并显示省略号。 |
render | DOMRenderFunction | - | 来自 React Aria 的自定义渲染函数。 |
children | ReactNode | - | 文本内容。 |
本地来源: vendor/zh/react/components/(typography)/typography.mdx
文档根据 HeroUI v3 固定提交生成，已调整内部链接与交互预览以适配 JGuang。