logo
简体中文

导航菜单

文档
Vue

Heading

简介

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

案例

一级标题

二级标题

三级标题

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

<script setup lang="ts">
import { Heading } from '@coffic/cosy-ui/vue';
</script>

Props

align

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

左对齐标题

居中对齐标题

右对齐标题

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

<script setup lang="ts">
import { Heading } from '@coffic/cosy-ui/vue';
</script>

anchor

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

带锚点的主标题

带锚点的子章节标题

 
<template>
  <Heading :level="2" id="main-heading" :anchor="true">带锚点的主标题</Heading>
</template>

<script setup lang="ts">
import { Heading } from '@coffic/cosy-ui/vue';
</script>

带锚点的主标题

带锚点的子章节标题

 
<template>
  <Heading :level="3" id="subsection-heading" :anchor="true"
    >带锚点的子章节标题</Heading
  >
</template>

<script setup lang="ts">
import { Heading } from '@coffic/cosy-ui/vue';
</script>

background

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

基础背景色标题

主要背景色标题

强调背景色标题

 
<template>
  <Heading :level="3" background="base-300" padding="sm"
    >基础背景色标题</Heading
  >
</template>

<script setup lang="ts">
import { Heading } from '@coffic/cosy-ui/vue';
</script>

基础背景色标题

主要背景色标题

强调背景色标题

 
<template>
  <Heading :level="3" background="primary" color="base-content" padding="sm"
    >主要背景色标题</Heading
  >
</template>

<script setup lang="ts">
import { Heading } from '@coffic/cosy-ui/vue';
</script>

基础背景色标题

主要背景色标题

强调背景色标题

 
<template>
  <Heading :level="3" background="accent" color="base-content" padding="sm"
    >强调背景色标题</Heading
  >
</template>

<script setup lang="ts">
import { Heading } from '@coffic/cosy-ui/vue';
</script>

class

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

自定义底部间距的标题

高级自定义样式的标题

 
<template>
  <Heading :level="2" class="cosy:mb-8">自定义底部间距的标题</Heading>
</template>

<script setup lang="ts">
import { Heading } from '@coffic/cosy-ui/vue';
</script>

自定义底部间距的标题

高级自定义样式的标题

 
<template>
  <Heading
    :level="2"
    class="cosy:mb-8 cosy:px-4 cosy:py-2 cosy:bg-gray-100 cosy:rounded-lg"
    >高级自定义样式的标题</Heading
  >
</template>

<script setup lang="ts">
import { Heading } from '@coffic/cosy-ui/vue';
</script>

color

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

默认颜色标题

主要颜色标题

次要颜色标题

强调颜色标题

静音颜色标题

信息颜色标题

成功颜色标题

警告颜色标题

错误颜色标题

基础内容颜色标题

中性内容颜色标题

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

<script setup lang="ts">
import { Heading } from '@coffic/cosy-ui/vue';
</script>

external

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

<template>
  <Heading :level="3" href="https://example.com" :external="true"
    >外部链接标题</Heading
  >
</template>

<script setup lang="ts">
import { Heading } from '@coffic/cosy-ui/vue';
</script>

<template>
  <Heading :level="3" href="https://github.com" :external="true"
    >GitHub 项目链接</Heading
  >
</template>

<script setup lang="ts">
import { Heading } from '@coffic/cosy-ui/vue';
</script>

href

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

<template>
  <Heading :level="2" href="/about">关于我们</Heading>
</template>

<script setup lang="ts">
import { Heading } from '@coffic/cosy-ui/vue';
</script>

<template>
  <Heading :level="2" href="/contact">联系我们</Heading>
</template>

<script setup lang="ts">
import { Heading } from '@coffic/cosy-ui/vue';
</script>

<template>
  <Heading :level="2" href="/products">产品介绍</Heading>
</template>

<script setup lang="ts">
import { Heading } from '@coffic/cosy-ui/vue';
</script>

id

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

主标题

章节标题

子章节标题

 
<template>
  <Heading :level="1" id="main-title">主标题</Heading>
</template>

<script setup lang="ts">
import { Heading } from '@coffic/cosy-ui/vue';
</script>

主标题

章节标题

子章节标题

 
<template>
  <Heading :level="2" id="section-title">章节标题</Heading>
</template>

<script setup lang="ts">
import { Heading } from '@coffic/cosy-ui/vue';
</script>

主标题

章节标题

子章节标题

 
<template>
  <Heading :level="3" id="subsection-title">子章节标题</Heading>
</template>

<script setup lang="ts">
import { Heading } from '@coffic/cosy-ui/vue';
</script>

level

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

一级标题

二级标题

三级标题

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

<script setup lang="ts">
import { Heading } from '@coffic/cosy-ui/vue';
</script>

margin

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

无外边距的标题

小外边距的标题

中等外边距的标题

大外边距的标题

超大外边距的标题

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

<script setup lang="ts">
import { Heading } from '@coffic/cosy-ui/vue';
</script>

padding

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

无内边距的标题

小内边距的标题

中等内边距的标题

大内边距的标题

超大内边距的标题

 
<template>
  <Heading :level="3" background="base-300" padding="none"
    >无内边距的标题</Heading
  >
</template>

<script setup lang="ts">
import { Heading } from '@coffic/cosy-ui/vue';
</script>

无内边距的标题

小内边距的标题

中等内边距的标题

大内边距的标题

超大内边距的标题

 
<template>
  <Heading :level="3" background="base-300" padding="sm"
    >小内边距的标题</Heading
  >
</template>

<script setup lang="ts">
import { Heading } from '@coffic/cosy-ui/vue';
</script>

无内边距的标题

小内边距的标题

中等内边距的标题

大内边距的标题

超大内边距的标题

 
<template>
  <Heading :level="3" background="base-300" padding="md"
    >中等内边距的标题</Heading
  >
</template>

<script setup lang="ts">
import { Heading } from '@coffic/cosy-ui/vue';
</script>

无内边距的标题

小内边距的标题

中等内边距的标题

大内边距的标题

超大内边距的标题

 
<template>
  <Heading :level="3" background="base-300" padding="lg"
    >大内边距的标题</Heading
  >
</template>

<script setup lang="ts">
import { Heading } from '@coffic/cosy-ui/vue';
</script>

无内边距的标题

小内边距的标题

中等内边距的标题

大内边距的标题

超大内边距的标题

 
<template>
  <Heading :level="3" background="base-300" padding="xl"
    >超大内边距的标题</Heading
  >
</template>

<script setup lang="ts">
import { Heading } from '@coffic/cosy-ui/vue';
</script>

underline

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

带下划线的基础标题

带下划线的子章节标题

 
<template>
  <Heading :level="2" :underline="true">带下划线的基础标题</Heading>
</template>

<script setup lang="ts">
import { Heading } from '@coffic/cosy-ui/vue';
</script>

带下划线的基础标题

带下划线的子章节标题

 
<template>
  <Heading :level="3" :underline="true">带下划线的子章节标题</Heading>
</template>

<script setup lang="ts">
import { Heading } from '@coffic/cosy-ui/vue';
</script>

Slots

default

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

一级标题

二级标题

三级标题

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

<script setup lang="ts">
import { Heading } from '@coffic/cosy-ui/vue';
</script>

搜索