logo
English

导航菜单

Documents

Heading

Introduction

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. It supports link functionality - when the href property is provided, the heading becomes a clickable link.

Examples

一级标题

二级标题

三级标题

四级标题

五级标题
六级标题
---
import { Heading } from '@coffic/cosy-ui';
---

<Heading level={1}>一级标题</Heading>

一级标题

二级标题

三级标题

四级标题

五级标题
六级标题
---
import { Heading } from '@coffic/cosy-ui';
---

<Heading level={2}>二级标题</Heading>

一级标题

二级标题

三级标题

四级标题

五级标题
六级标题
---
import { Heading } from '@coffic/cosy-ui';
---

<Heading level={3}>三级标题</Heading>

一级标题

二级标题

三级标题

四级标题

五级标题
六级标题
---
import { Heading } from '@coffic/cosy-ui';
---

<Heading level={4}>四级标题</Heading>

一级标题

二级标题

三级标题

四级标题

五级标题
六级标题
---
import { Heading } from '@coffic/cosy-ui';
---

<Heading level={5}>五级标题</Heading>

一级标题

二级标题

三级标题

四级标题

五级标题
六级标题
---
import { Heading } from '@coffic/cosy-ui';
---

<Heading level={6}>六级标题</Heading>

Props

align

Control heading alignment using the align property.

左对齐标题

居中对齐标题

右对齐标题

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

<Heading level={2} align="left">左对齐标题</Heading>

左对齐标题

居中对齐标题

右对齐标题

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

<Heading level={2} align="center">居中对齐标题</Heading>

左对齐标题

居中对齐标题

右对齐标题

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

<Heading level={2} align="right">右对齐标题</Heading>

anchor

Create headings with anchor links using the id and anchor properties.

带锚点的标题

子章节标题 

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

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

带锚点的标题

子章节标题 

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

<Heading level={3} id="subsection-1" anchor>子章节标题</Heading>

background

Add background colors to headings using the background property.

浅灰背景标题

主要背景色标题

强调背景色标题

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

<Heading level={2} background="base-300" padding="sm">浅灰背景标题</Heading>

浅灰背景标题

主要背景色标题

强调背景色标题

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

<Heading level={2} background="primary" padding="sm">主要背景色标题</Heading>

浅灰背景标题

主要背景色标题

强调背景色标题

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

<Heading level={2} background="accent" padding="sm">强调背景色标题</Heading>

class

Customize heading styles using the class property.

自定义样式标题

带边框和背景的标题

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

<Heading level={2} class="cosy:mb-8 cosy:text-blue-600">自定义样式标题</Heading>

自定义样式标题

带边框和背景的标题

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

<Heading
  level={3}
  class="cosy:mt-4 cosy:px-4 cosy:py-2 cosy:bg-gray-100 cosy:rounded"
  >带边框和背景的标题</Heading
>

color

Customize heading colors using the color property.

默认颜色标题

主色调标题

次要色调标题

强调色标题

柔和色标题

信息色标题

成功色标题

警告色标题

错误色标题

基础内容色标题

中性内容色标题

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

<Heading level={2} color="default">默认颜色标题</Heading>

默认颜色标题

主色调标题

次要色调标题

强调色标题

柔和色标题

信息色标题

成功色标题

警告色标题

错误色标题

基础内容色标题

中性内容色标题

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

<Heading level={2} color="primary">主色调标题</Heading>

默认颜色标题

主色调标题

次要色调标题

强调色标题

柔和色标题

信息色标题

成功色标题

警告色标题

错误色标题

基础内容色标题

中性内容色标题

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

<Heading level={2} color="secondary">次要色调标题</Heading>

默认颜色标题

主色调标题

次要色调标题

强调色标题

柔和色标题

信息色标题

成功色标题

警告色标题

错误色标题

基础内容色标题

中性内容色标题

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

<Heading level={2} color="accent">强调色标题</Heading>

默认颜色标题

主色调标题

次要色调标题

强调色标题

柔和色标题

信息色标题

成功色标题

警告色标题

错误色标题

基础内容色标题

中性内容色标题

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

<Heading level={2} color="muted">柔和色标题</Heading>

默认颜色标题

主色调标题

次要色调标题

强调色标题

柔和色标题

信息色标题

成功色标题

警告色标题

错误色标题

基础内容色标题

中性内容色标题

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

<Heading level={2} color="info">信息色标题</Heading>

默认颜色标题

主色调标题

次要色调标题

强调色标题

柔和色标题

信息色标题

成功色标题

警告色标题

错误色标题

基础内容色标题

中性内容色标题

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

<Heading level={2} color="success">成功色标题</Heading>

默认颜色标题

主色调标题

次要色调标题

强调色标题

柔和色标题

信息色标题

成功色标题

警告色标题

错误色标题

基础内容色标题

中性内容色标题

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

<Heading level={2} color="warning">警告色标题</Heading>

默认颜色标题

主色调标题

次要色调标题

强调色标题

柔和色标题

信息色标题

成功色标题

警告色标题

错误色标题

基础内容色标题

中性内容色标题

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

<Heading level={2} color="error">错误色标题</Heading>

默认颜色标题

主色调标题

次要色调标题

强调色标题

柔和色标题

信息色标题

成功色标题

警告色标题

错误色标题

基础内容色标题

中性内容色标题

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

<Heading level={2} color="base-content">基础内容色标题</Heading>

默认颜色标题

主色调标题

次要色调标题

强调色标题

柔和色标题

信息色标题

成功色标题

警告色标题

错误色标题

基础内容色标题

中性内容色标题

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

<Heading level={2} color="neutral-content">中性内容色标题</Heading>

external

Create external link headings using the external property.

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

<Heading level={2} href="https://example.com" external>外部链接标题</Heading>

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

<Heading level={3} href="https://github.com" external>GitHub 链接</Heading>

href

Create clickable link headings using the href property.

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

<Heading level={2} href="/about">关于我们</Heading>

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

<Heading level={3} href="/contact">联系我们</Heading>

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

<Heading level={4} href="/products">产品介绍</Heading>

id

Add unique identifiers to headings using the id property.

主标题

介绍章节

详细说明

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

<Heading level={2} id="main-title">主标题</Heading>

主标题

介绍章节

详细说明

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

<Heading level={3} id="section-intro">介绍章节</Heading>

主标题

介绍章节

详细说明

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

<Heading level={4} id="subsection-details">详细说明</Heading>

level

Set heading levels using the level property.

一级标题

二级标题

三级标题

四级标题

五级标题
六级标题
---
import { Heading } from '@coffic/cosy-ui';
---

<Heading level={1}>一级标题</Heading>

一级标题

二级标题

三级标题

四级标题

五级标题
六级标题
---
import { Heading } from '@coffic/cosy-ui';
---

<Heading level={2}>二级标题</Heading>

一级标题

二级标题

三级标题

四级标题

五级标题
六级标题
---
import { Heading } from '@coffic/cosy-ui';
---

<Heading level={3}>三级标题</Heading>

一级标题

二级标题

三级标题

四级标题

五级标题
六级标题
---
import { Heading } from '@coffic/cosy-ui';
---

<Heading level={4}>四级标题</Heading>

一级标题

二级标题

三级标题

四级标题

五级标题
六级标题
---
import { Heading } from '@coffic/cosy-ui';
---

<Heading level={5}>五级标题</Heading>

一级标题

二级标题

三级标题

四级标题

五级标题
六级标题
---
import { Heading } from '@coffic/cosy-ui';
---

<Heading level={6}>六级标题</Heading>

margin

Control heading margins using the margin property.

无外边距标题

小外边距标题

中等外边距标题

大外边距标题

超大外边距标题

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

<Heading level={2} margin="none">无外边距标题</Heading>

无外边距标题

小外边距标题

中等外边距标题

大外边距标题

超大外边距标题

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

<Heading level={2} margin="sm">小外边距标题</Heading>

无外边距标题

小外边距标题

中等外边距标题

大外边距标题

超大外边距标题

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

<Heading level={2} margin="md">中等外边距标题</Heading>

无外边距标题

小外边距标题

中等外边距标题

大外边距标题

超大外边距标题

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

<Heading level={2} margin="lg">大外边距标题</Heading>

无外边距标题

小外边距标题

中等外边距标题

大外边距标题

超大外边距标题

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

<Heading level={2} margin="xl">超大外边距标题</Heading>

padding

Control heading padding using the padding property (only effective when background is set).

无内边距标题

小内边距标题

中等内边距标题

大内边距标题

超大内边距标题

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

<Heading level={2} background="base-300" padding="none">无内边距标题</Heading>

无内边距标题

小内边距标题

中等内边距标题

大内边距标题

超大内边距标题

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

<Heading level={2} background="base-300" padding="sm">小内边距标题</Heading>

无内边距标题

小内边距标题

中等内边距标题

大内边距标题

超大内边距标题

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

<Heading level={2} background="base-300" padding="md">中等内边距标题</Heading>

无内边距标题

小内边距标题

中等内边距标题

大内边距标题

超大内边距标题

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

<Heading level={2} background="base-300" padding="lg">大内边距标题</Heading>

无内边距标题

小内边距标题

中等内边距标题

大内边距标题

超大内边距标题

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

<Heading level={2} background="base-300" padding="xl">超大内边距标题</Heading>

underline

Add underlines to headings using the underline property.

带下划线的标题

带下划线的子标题

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

<Heading level={2} underline>带下划线的标题</Heading>

带下划线的标题

带下划线的子标题

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

<Heading level={3} underline>带下划线的子标题</Heading>

Slots

default

Heading content slot for placing heading text content.

一级标题

二级标题

三级标题

四级标题

五级标题
六级标题
---
import { Heading } from '@coffic/cosy-ui';
---

<Heading level={1}>一级标题</Heading>

一级标题

二级标题

三级标题

四级标题

五级标题
六级标题
---
import { Heading } from '@coffic/cosy-ui';
---

<Heading level={2}>二级标题</Heading>

一级标题

二级标题

三级标题

四级标题

五级标题
六级标题
---
import { Heading } from '@coffic/cosy-ui';
---

<Heading level={3}>三级标题</Heading>

一级标题

二级标题

三级标题

四级标题

五级标题
六级标题
---
import { Heading } from '@coffic/cosy-ui';
---

<Heading level={4}>四级标题</Heading>

一级标题

二级标题

三级标题

四级标题

五级标题
六级标题
---
import { Heading } from '@coffic/cosy-ui';
---

<Heading level={5}>五级标题</Heading>

一级标题

二级标题

三级标题

四级标题

五级标题
六级标题
---
import { Heading } from '@coffic/cosy-ui';
---

<Heading level={6}>六级标题</Heading>

搜索