Heading

Heading 组件用于创建各级标题，提供一致的排版样式和灵活的定制选项。该组件适用于需要清晰层次结构的内容页面，如文档、博客和产品介绍等。

基础用法

最基本的标题用法，支持 1-6 级标题：

一级标题

二级标题

三级标题

四级标题

五级标题

六级标题

---
import { Heading } from '@coffic/cosy-ui';
---

<Heading level={1}>一级标题</Heading>
<Heading level={2}>二级标题</Heading>
<Heading level={3}>三级标题</Heading>
<Heading level={4}>四级标题</Heading>
<Heading level={5}>五级标题</Heading>
<Heading level={6}>六级标题</Heading>

自定义样式

通过 color 和 underline 属性自定义标题样式：

主色调标题

次要色调标题

强调色标题

柔和色标题

带下划线的标题

---
import { Heading } from '@coffic/cosy-ui';
---

<Heading level={2} color="primary">主色调标题</Heading>
<Heading level={2} color="secondary">次要色调标题</Heading>
<Heading level={2} color="accent">强调色标题</Heading>
<Heading level={2} color="muted">柔和色标题</Heading>
<Heading level={2} underline>带下划线的标题</Heading>

对齐方式

通过 align 属性控制标题的对齐方式：

左对齐标题

居中对齐标题

右对齐标题

---
import { Heading } from '@coffic/cosy-ui';
---

<Heading level={3} align="left">左对齐标题</Heading>
<Heading level={3} align="center">居中对齐标题</Heading>
<Heading level={3} align="right">右对齐标题</Heading>

带锚点的标题

通过 id 和 anchor 属性创建带锚点的标题：

带锚点的标题

---
import { Heading } from '@coffic/cosy-ui';
---

<Heading level={2} id="section-example" anchor>带锚点的标题</Heading>

Props

属性	说明	类型	默认值
level	标题级别	1 \| 2 \| 3 \| 4 \| 5 \| 6	2
id	标题的 ID	string	-
anchor	是否显示锚点链接图标	boolean	false
underline	是否显示下划线	boolean	false
align	文本对齐方式	’left’ \| ‘center’ \| ‘right'	'left’
color	标题颜色	’default’\|‘primary’\|‘secondary’\|‘accent’\|‘muted'	'default’
class	自定义 CSS 类名	string	-

插槽

default：标题内容