Heading
The Heading component is used to create headings of various levels, providing consistent typography styles and flexible customization options. This component is suitable for content pages that require a clear hierarchical structure, such as documentation, blogs, and product introductions.
Basic Usage
The most basic usage, supporting heading levels 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>
Custom Styles
Customize heading styles using the color and underline properties:
主色调标题
次要色调标题
强调色标题
柔和色标题
带下划线的标题
---
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>
Alignment
Control heading alignment using the align property:
左对齐标题
居中对齐标题
右对齐标题
---
import { Heading } from '@coffic/cosy-ui';
---
<Heading level={3} align="left">左对齐标题</Heading>
<Heading level={3} align="center">居中对齐标题</Heading>
<Heading level={3} align="right">右对齐标题</Heading>
Heading with Anchor
Create headings with anchor links using the id and anchor properties:
Props
| Property | Description | Type | Default |
|---|---|---|---|
| level | Heading level | 1 | 2 | 3 | 4 | 5 | 6 | 2 |
| id | Heading ID | string | - |
| anchor | Show anchor link icon | boolean | false |
| underline | Show underline | boolean | false |
| align | Text alignment | ’left’ | ‘center’ | ‘right' | 'left’ |
| color | Heading color | ’default’|‘primary’|‘secondary’|‘accent’|‘muted' | 'default’ |
| class | Custom CSS class | string | - |
Slots
default: Heading content