示例
直接操作示例，查看组件在具体任务中的状态与反馈。
语义递进
组件质量报告
页面主标题之后，从二级标题开始组织内容。
可用性证据
键盘与焦点记录
语义与外观分离
视觉较大的三级标题
同级但视觉较轻的长标题：发布前仍需完成确定性视觉证据复核
三级标题尺寸
紧凑卡片标题
默认分区标题
强调分区标题
标题语气
组件概览
补充资料
需要处理的问题
使用建议
level 决定文档结构
根据页面中的父子关系选择 level，并保持连续递进，不要为了视觉大小跳过标题级别。
size 只控制视觉强调
同一语义级别可以因场景选择不同 size，但不会因此改变辅助技术读取到的标题层级。
标题独立说明章节
标题应让用户在目录或快速扫读时理解章节内容，避免使用“更多”“详情”等空泛名称。
引入方式
从已验证的公开子路径导入组件；全局样式接入方式见安装指南。
import { BaseHeading } from '@inf-monkeys-tech/monkeys-design/components/base';当前限制
- Heading 不会检查整页是否存在重复 h1、层级跳跃或空标题；完整文档大纲必须由页面作者和审查流程维护。
- Automated axe checks and deterministic browser visual evidence are pending T17/T23.
API
查看组件源码export interface BaseHeadingProps
extends Omit<
HTMLAttributes<HTMLHeadingElement>,
'children' | 'className' | 'style'
> {
level?: BaseHeadingLevel;
children?: ReactNode;
size?: BaseHeadingSize;
tone?: BaseTypographyTone;
appearance?: BaseAppearance;
className?: string;
classNames?: BaseHeadingClassNames;
style?: CSSProperties;
}| 属性 | 说明 | 类型 | 默认值 |
|---|---|---|---|
level | 标题对应的语义层级。 | BaseHeadingLevel | 2 |
children | 在 BaseHeading 内渲染的子内容；支持渲染函数时以对应的 Props 类型为准。 | ReactNode | — |
size | 组件使用的预设尺寸。 | BaseHeadingSize | 'lg' |
tone | 组件使用的语义色调。 | BaseTypographyTone | 'default' |
appearance | 覆盖组件使用的外观令牌或局部样式配置。 | BaseAppearance | — |
className | 追加到组件根元素的 CSS 类名。 | string | — |
classNames | 按组件公开的结构插槽分别追加 CSS 类名。 | BaseHeadingClassNames | — |
style | 追加到组件根元素的内联样式。 | CSSProperties | — |