Heading标题
语义级别与视觉尺寸独立；level 必填并决定实际 h1–h6。
用正确的 heading level 组织内容，并按页面层次选择大小。
引入
import { Heading } from "@cwa-design/react";
import "@cwa-design/react/styles.css"; // 应用入口引入一次当前通过源码 workspace 使用。查看有效安装步骤 →
交互示例
可切换示例主题、开启实色降级并重置状态。应用根部需要 CwaProvider。
Heading 基础用法
可运行示例 · 与复制源码同源
正在准备交互示例…
heading-basic
查看与复制源码
// 应用入口引入 @cwa-design/react/styles.css，并将此示例置于 CwaProvider 内。
import { Heading, Stack } from "@cwa-design/react";
export default function Example() {
return (
<Stack gap={2}>
<Heading level={2}>清晰的信息层级</Heading>
<Heading level={3} visualSize="body">
语义与视觉尺寸独立
</Heading>
</Stack>
);
}
在应用根部引入 styles.css 并配置 CwaProvider。源码 SHA-256：b0f87b98d939
API
下表读取本版本组件契约。原生与 Base UI 继承属性的完整定义保留在 TypeScript 声明中。
类型：HeadingProps · 继承 React.HTMLAttributes<HTMLHeadingElement> · 候选源类型 ↗
| 属性 | 说明 | 类型 | 默认值 |
|---|---|---|---|
level必填 | 见类型定义 | 1 | 2 | 3 | 4 | 5 | 6 | — |
visualSize | 见类型定义 | "display" | "title" | "body" | level ≤ 2 为 display，其他为 title |
children | ReactNode；内容由调用方提供 | ReactNode；内容由调用方提供 | — |
材质与状态
继承父级表面
材质规则来自源 metadata。覆盖玻璃区域的浮层按实际重叠关系选择较厚或实色材质。
无背景；按所在表面保证文本对比度。
适用的状态与行为见示例及本页 API；系统减少透明与显式 solid 配置会启用回退。
阅读材质指南 →关联 Token
以下变量从组件源样式的实际引用生成。共享光学规则还使用全局玻璃 Token。
--cwa-design-font-family--cwa-design-font-size-display--cwa-design-font-leading-display--cwa-design-font-tracking-display--cwa-design-font-size-title--cwa-design-font-leading-body--cwa-design-font-size-body无障碍与使用约束
semantic-heading-level-required
这些是组件契约与使用要求。具体业务页面仍需验证标签、阅读顺序与实际背景下的对比度。
查看无障碍使用指南 →