狼と香辛料
電撃文庫，2006 年 2 月 10 日刊行。
第一卷 启航
第一章 港口的清晨
<script setup lang="ts">
import { Heading, Stack, Text } from '@hina-ui/vue'
</script>
<template>
<Stack class="max-w-lg">
<Heading :level="1">狼と香辛料</Heading>
<Text tone="muted">電撃文庫，2006 年 2 月 10 日刊行。</Text>
<Heading :level="2">第一卷 启航</Heading>
<Heading :level="3">第一章 港口的清晨</Heading>
</Stack>
</template>
vue
用法
import { Heading } from '@hina-ui/vue'
ts
level 决定渲染成 h1 到 h6 中的哪一个，默认为 2。字号默认跟随层级，因此通常只需要设置 level。
章节标题
<script setup lang="ts">
import { Heading } from '@hina-ui/vue'
</script>
<template>
<Heading :level="2">章节标题</Heading>
</template>
vue
示例
层级
六个层级对应六档字号，从 30 像素递减到 14 像素。xl 及以上的字号会收紧字距。
一级标题
二级标题
三级标题
四级标题
五级标题
六级标题
<script setup lang="ts">
import { Heading, Stack } from '@hina-ui/vue'
</script>
<template>
<Stack class="max-w-lg">
<Heading :level="1">一级标题</Heading>
<Heading :level="2">二级标题</Heading>
<Heading :level="3">三级标题</Heading>
<Heading :level="4">四级标题</Heading>
<Heading :level="5">五级标题</Heading>
<Heading :level="6">六级标题</Heading>
</Stack>
</template>
vue
语义与视觉分开
size 单独指定字号，不改变标签。页面的标题结构由内容决定，视觉大小由版面决定，两者不必一致。
三级标题，一级字号
一级标题，正文字号
<script setup lang="ts">
import { Heading, Stack } from '@hina-ui/vue'
</script>
<template>
<Stack class="max-w-lg">
<Heading :level="3" size="2xl">三级标题，一级字号</Heading>
<Heading :level="1" size="base">一级标题，正文字号</Heading>
</Stack>
</template>
vue
字重
默认为 semibold。版面需要更轻的标题时可以改为 medium 或 normal。
半粗，默认字重
中等字重
常规字重
<script setup lang="ts">
import { Heading, Stack } from '@hina-ui/vue'
</script>
<template>
<Stack class="max-w-lg">
<Heading :level="3" weight="semibold">半粗，默认字重</Heading>
<Heading :level="3" weight="medium">中等字重</Heading>
<Heading :level="3" weight="normal">常规字重</Heading>
</Stack>
</template>
vue
截断
设置 truncate 后，超出容器宽度的标题在末尾显示省略号，标题不换行。
很长很长的章节标题会在容器边界处截断并显示省略号
<script setup lang="ts">
import { Heading } from '@hina-ui/vue'
</script>
<template>
<Heading :level="3" truncate class="max-w-xs">
很长很长的章节标题会在容器边界处截断并显示省略号
</Heading>
</template>
vue
正文中的标题
Prose 会为其中的原生 h1 到 h6 应用同一套字号。渲染 Markdown 或富文本时不需要替换标签。
正文中的标题
渲染 Markdown 时不需要替换标签。
下一层标题
层级与字号的对应关系与组件一致。
<script setup lang="ts">
import { Prose } from '@hina-ui/vue'
</script>
<template>
<Prose class="max-w-lg">
<h2>正文中的标题</h2>
<p>渲染 Markdown 时不需要替换标签。</p>
<h3>下一层标题</h3>
<p>层级与字号的对应关系与组件一致。</p>
</Prose>
</template>
vue
无障碍
- 一个页面只应有一个
h1，其余标题按内容层级依次递进，不要为了字号跳级。需要更大或者更小的字时改size。 - 屏幕阅读器可以按标题跳转浏览，层级正确才能形成可用的大纲。
API
Props
| 属性 | 类型 | 默认值 | 说明 |
|---|---|---|---|
level | 1 | 2 | 3 | 4 | 5 | 6 | 2 | 渲染的标题标签 |
size | 'xs' | 'sm' | 'base' | 'md' | 'lg' | 'xl' | '2xl' | 跟随 level | 字号 |
weight | 'normal' | 'medium' | 'semibold' | 'semibold' | 字重 |
truncate | boolean | false | 是否单行截断并显示省略号 |
class | string | — | 追加至根元素的类名 |
Slots
| 插槽 | 说明 |
|---|---|
default | 标题文字 |