使用方法

Heading 用于渲染页面和区块的标题：level 决定语义层级（h1–h6），type 可以在不改变语义的前提下调整视觉样式，两者搭配能同时照顾文档结构与视觉设计。从独立入口导入即可，结构样式会随组件自动加载：

<script setup lang="ts">
import { Heading } from '@astryx-vue/core/Heading'
</script>

<template>
  <Heading :level="1">
    页面标题
  </Heading>
  <Heading :level="2" type="display-2">
    数据概览
  </Heading>
</template>

最佳实践

指引	实践
推荐	按文档大纲选择 level，保持层级连贯、不跳级，屏幕阅读器和搜索引擎才能正确理解页面结构。
推荐	需要营销页或大号展示效果时，用 type="display-*" 覆盖视觉样式，同时保留语义正确的 level。
推荐	层级较低的次要标题可以使用 color="secondary"，让它在视觉上退后一步，主要标题更突出。
避免	为了视觉大小而选用与页面结构不符的 level：视觉样式交给 type 控制，语义层级仍由 level 决定。
避免	在标题中塞入长段落：标题应简短概括内容，详细说明放到正文里。

示例

层级

Level 1 heading

Level 2 heading

Level 3 heading

Heading 渲染 h1–h6 语义元素，默认按层级设置字号。

展示标题

Display 1

Display 2

Display 3

display-1、display-2、display-3 提供更大的展示字号。