logo
English

导航菜单

Documents
Vue

Heading

Introduction

The Heading component is used to create various levels of headings, providing consistent typography styles and flexible customization options. This component is suitable for content pages that require clear hierarchical structure, such as documentation, blogs, and product introductions. It supports link functionality - when the href property is passed, the heading becomes a clickable link.

Examples

一级标题

二级标题

三级标题

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

Control the alignment of the heading through the align property.

左对齐标题

居中对齐标题

右对齐标题

 
<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

Create headings with anchor points through the id and anchor properties.

带锚点的主标题

带锚点的子章节标题

 
<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

Add background colors to headings through the background property.

基础背景色标题

主要背景色标题

强调背景色标题

 
<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

Customize heading styles through the class property.

自定义底部间距的标题

高级自定义样式的标题

 
<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

Customize heading colors through the color property.

默认颜色标题

主要颜色标题

次要颜色标题

强调颜色标题

静音颜色标题

信息颜色标题

成功颜色标题

警告颜色标题

错误颜色标题

基础内容颜色标题

中性内容颜色标题

 
<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

Create external link headings through the external property.

<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

Create clickable link headings through the href property.

<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

Add unique identifiers to headings through the id property.

主标题

章节标题

子章节标题

 
<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

Set heading levels through the level property.

一级标题

二级标题

三级标题

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

Control the outer margins of headings through the margin property.

无外边距的标题

小外边距的标题

中等外边距的标题

大外边距的标题

超大外边距的标题

 
<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

Control the inner padding of headings through the padding property (only effective when background color is set).

无内边距的标题

小内边距的标题

中等内边距的标题

大内边距的标题

超大内边距的标题

 
<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

Add underlines to headings through the underline property.

带下划线的基础标题

带下划线的子章节标题

 
<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

Heading content slot for placing heading text content.

一级标题

二级标题

三级标题

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

搜索