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>

<script setup lang="ts">
import { Heading } from "@coffic/cosy-ui/vue";
</script>
<template>
  <Heading :level="1">一级标题</Heading>
</template>

<script setup lang="ts">
import { Heading } from "@coffic/cosy-ui/vue";
</script>
<template>
  <Heading :level="2">二级标题</Heading>
</template>

<script setup lang="ts">
import { Heading } from "@coffic/cosy-ui/vue";
</script>
<template>
  <Heading :level="3">三级标题</Heading>
</template>

<script setup lang="ts">
import { Heading } from "@coffic/cosy-ui/vue";
</script>
<template>
  <Heading :level="4">四级标题</Heading>
</template>

<script setup lang="ts">
import { Heading } from "@coffic/cosy-ui/vue";
</script>
<template>
  <Heading :level="5">五级标题</Heading>
</template>

<script setup lang="ts">
import { Heading } from "@coffic/cosy-ui/vue";
</script>
<template>
  <Heading :level="6">六级标题</Heading>
</template>

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>

<script setup lang="ts">
import { Heading } from "@coffic/cosy-ui/vue";
</script>
<template>
  <Heading :level="2" align="left">左对齐标题</Heading>
</template>

<script setup lang="ts">
import { Heading } from "@coffic/cosy-ui/vue";
</script>
<template>
  <Heading :level="2" align="center">居中对齐标题</Heading>
</template>

<script setup lang="ts">
import { Heading } from "@coffic/cosy-ui/vue";
</script>
<template>
  <Heading :level="2" align="right">右对齐标题</Heading>
</template>

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>

<script setup lang="ts">
import { Heading } from "@coffic/cosy-ui/vue";
</script>
<template>
  <Heading :level="2" color="default">默认颜色标题</Heading>
</template>

<script setup lang="ts">
import { Heading } from "@coffic/cosy-ui/vue";
</script>
<template>
  <Heading :level="2" color="primary">主要颜色标题</Heading>
</template>

<script setup lang="ts">
import { Heading } from "@coffic/cosy-ui/vue";
</script>
<template>
  <Heading :level="2" color="secondary">次要颜色标题</Heading>
</template>

<script setup lang="ts">
import { Heading } from "@coffic/cosy-ui/vue";
</script>
<template>
  <Heading :level="2" color="accent">强调颜色标题</Heading>
</template>

<script setup lang="ts">
import { Heading } from "@coffic/cosy-ui/vue";
</script>
<template>
  <Heading :level="2" color="muted">静音颜色标题</Heading>
</template>

<script setup lang="ts">
import { Heading } from "@coffic/cosy-ui/vue";
</script>
<template>
  <Heading :level="2" color="info">信息颜色标题</Heading>
</template>

<script setup lang="ts">
import { Heading } from "@coffic/cosy-ui/vue";
</script>
<template>
  <Heading :level="2" color="success">成功颜色标题</Heading>
</template>

<script setup lang="ts">
import { Heading } from "@coffic/cosy-ui/vue";
</script>
<template>
  <Heading :level="2" color="warning">警告颜色标题</Heading>
</template>

<script setup lang="ts">
import { Heading } from "@coffic/cosy-ui/vue";
</script>
<template>
  <Heading :level="2" color="error">错误颜色标题</Heading>
</template>

<script setup lang="ts">
import { Heading } from "@coffic/cosy-ui/vue";
</script>
<template>
  <Heading :level="2" color="base-content">基础内容颜色标题</Heading>
</template>

<script setup lang="ts">
import { Heading } from "@coffic/cosy-ui/vue";
</script>
<template>
  <Heading :level="2" color="neutral-content">中性内容颜色标题</Heading>
</template>

external

Create external link headings using the external property.

外部链接标题

GitHub 链接

---



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>

<script setup lang="ts">
import { Heading } from "@coffic/cosy-ui/vue";
</script>
<template>
  <Heading :level="1">一级标题</Heading>
</template>

<script setup lang="ts">
import { Heading } from "@coffic/cosy-ui/vue";
</script>
<template>
  <Heading :level="2">二级标题</Heading>
</template>

<script setup lang="ts">
import { Heading } from "@coffic/cosy-ui/vue";
</script>
<template>
  <Heading :level="3">三级标题</Heading>
</template>

<script setup lang="ts">
import { Heading } from "@coffic/cosy-ui/vue";
</script>
<template>
  <Heading :level="4">四级标题</Heading>
</template>

<script setup lang="ts">
import { Heading } from "@coffic/cosy-ui/vue";
</script>
<template>
  <Heading :level="5">五级标题</Heading>
</template>

<script setup lang="ts">
import { Heading } from "@coffic/cosy-ui/vue";
</script>
<template>
  <Heading :level="6">六级标题</Heading>
</template>

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>

<script setup lang="ts">
import { Heading } from "@coffic/cosy-ui/vue";
</script>
<template>
  <Heading :level="2" margin="none">无外边距的标题</Heading>
</template>

<script setup lang="ts">
import { Heading } from "@coffic/cosy-ui/vue";
</script>
<template>
  <Heading :level="2" margin="sm">小外边距的标题</Heading>
</template>

<script setup lang="ts">
import { Heading } from "@coffic/cosy-ui/vue";
</script>
<template>
  <Heading :level="2" margin="md">中等外边距的标题</Heading>
</template>

<script setup lang="ts">
import { Heading } from "@coffic/cosy-ui/vue";
</script>
<template>
  <Heading :level="2" margin="lg">大外边距的标题</Heading>
</template>

<script setup lang="ts">
import { Heading } from "@coffic/cosy-ui/vue";
</script>
<template>
  <Heading :level="2" margin="xl">超大外边距的标题</Heading>
</template>

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>

weight

Control heading font weight using the weight property.

细体标题

轻体标题

正常标题

中等标题

半粗体标题

粗体标题

特粗体标题

超粗体标题

细体标题

轻体标题

正常标题

中等标题

半粗体标题

粗体标题

特粗体标题

超粗体标题

---



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

<Heading level={2} weight="thin">细体标题</Heading>

---



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

<Heading level={2} weight="light">轻体标题</Heading>

---



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

<Heading level={2} weight="normal">正常标题</Heading>

---



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

<Heading level={2} weight="medium">中等标题</Heading>

---



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

<Heading level={2} weight="semibold">半粗体标题</Heading>

---



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

<Heading level={2} weight="bold">粗体标题</Heading>

---



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

<Heading level={2} weight="extrabold">特粗体标题</Heading>

---



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

<Heading level={2} weight="black">超粗体标题</Heading>

<script setup lang="ts">
import { Heading } from "@coffic/cosy-ui/vue";
</script>
<template>
  <Heading :level="2" weight="thin">细体标题</Heading>
</template>

<script setup lang="ts">
import { Heading } from "@coffic/cosy-ui/vue";
</script>
<template>
  <Heading :level="2" weight="light">轻体标题</Heading>
</template>

<script setup lang="ts">
import { Heading } from "@coffic/cosy-ui/vue";
</script>
<template>
  <Heading :level="2" weight="normal">正常标题</Heading>
</template>

<script setup lang="ts">
import { Heading } from "@coffic/cosy-ui/vue";
</script>
<template>
  <Heading :level="2" weight="medium">中等标题</Heading>
</template>

<script setup lang="ts">
import { Heading } from "@coffic/cosy-ui/vue";
</script>
<template>
  <Heading :level="2" weight="semibold">半粗体标题</Heading>
</template>

<script setup lang="ts">
import { Heading } from "@coffic/cosy-ui/vue";
</script>
<template>
  <Heading :level="2" weight="bold">粗体标题</Heading>
</template>

<script setup lang="ts">
import { Heading } from "@coffic/cosy-ui/vue";
</script>
<template>
  <Heading :level="2" weight="extrabold">特粗体标题</Heading>
</template>

<script setup lang="ts">
import { Heading } from "@coffic/cosy-ui/vue";
</script>
<template>
  <Heading :level="2" weight="black">超粗体标题</Heading>
</template>

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>

<script setup lang="ts">
import { Heading } from "@coffic/cosy-ui/vue";
</script>
<template>
  <Heading :level="1">一级标题</Heading>
</template>

<script setup lang="ts">
import { Heading } from "@coffic/cosy-ui/vue";
</script>
<template>
  <Heading :level="2">二级标题</Heading>
</template>

<script setup lang="ts">
import { Heading } from "@coffic/cosy-ui/vue";
</script>
<template>
  <Heading :level="3">三级标题</Heading>
</template>

<script setup lang="ts">
import { Heading } from "@coffic/cosy-ui/vue";
</script>
<template>
  <Heading :level="4">四级标题</Heading>
</template>

<script setup lang="ts">
import { Heading } from "@coffic/cosy-ui/vue";
</script>
<template>
  <Heading :level="5">五级标题</Heading>
</template>

<script setup lang="ts">
import { Heading } from "@coffic/cosy-ui/vue";
</script>
<template>
  <Heading :level="6">六级标题</Heading>
</template>