logo
简体中文

导航菜单

文档

Heading

简介

Heading 组件用于创建各级标题，提供一致的排版样式和灵活的定制选项。该组件适用于需要清晰层次结构的内容页面，如文档、博客和产品介绍等。支持链接功能，当传入 href 属性时，标题会变成可点击的链接。

案例

一级标题

二级标题

三级标题

四级标题

五级标题
六级标题
---
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

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

左对齐标题

居中对齐标题

右对齐标题

---
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

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

带锚点的标题

子章节标题 

---
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

通过 background 属性为标题添加背景色。

浅灰背景标题

主要背景色标题

强调背景色标题

---
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

通过 class 属性自定义标题样式。

自定义样式标题

带边框和背景的标题

---
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

通过 color 属性自定义标题颜色。

默认颜色标题

主色调标题

次要色调标题

强调色标题

柔和色标题

信息色标题

成功色标题

警告色标题

错误色标题

基础内容色标题

中性内容色标题

---
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

通过 external 属性创建外部链接标题。

---
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

通过 href 属性创建可点击的链接标题。

---
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

通过 id 属性为标题添加唯一标识。

主标题

介绍章节

详细说明

---
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

通过 level 属性设置标题级别。

一级标题

二级标题

三级标题

四级标题

五级标题
六级标题
---
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

通过 margin 属性控制标题的外边距。

无外边距标题

小外边距标题

中等外边距标题

大外边距标题

超大外边距标题

---
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

通过 padding 属性控制标题的内边距（仅在设置背景色时生效）。

无内边距标题

小内边距标题

中等内边距标题

大内边距标题

超大内边距标题

---
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

通过 underline 属性为标题添加下划线。

带下划线的标题

带下划线的子标题

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

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

带下划线的标题

带下划线的子标题

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

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

Slots

default

标题内容插槽，用于放置标题文本内容。

一级标题

二级标题

三级标题

四级标题

五级标题
六级标题
---
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>

搜索