组件
排版 Typography
Typography:排版组件,为正文提供可按名称使用的文字层级。display 和 heading 使用宋体衬线,其余使用黑体。这里没有装饰,层级由字号、字重和留白构成。
#基础用法
以光为影
The paper-and-ink system
Interfaces are warm paper, content is ink, hierarchy is light.
Surfaces are never pure white; the ground rests in ambient shade. Primary actions default to ink — monochrome, solemn — with mineral-pigment accents switchable by theme.
Revised autumn 2026 · Typeset in the eastern studio
SECTION IV — MOTION GRAMMAR
<script setup lang="ts">
import { Typography } from "@bysages/vue";
</script>
<template>
<div class="grid gap-4 max-w-144">
<Typography.Display>以光为影</Typography.Display>
<Typography.Heading>The paper-and-ink system</Typography.Heading>
<Typography.Lead>
Interfaces are warm paper, content is ink, hierarchy is light.
</Typography.Lead>
<Typography.Body>
Surfaces are never pure white; the ground rests in ambient shade. Primary actions default to
ink — monochrome, solemn — with mineral-pigment accents switchable by theme.
</Typography.Body>
<Typography.Muted>Revised autumn 2026 · Typeset in the eastern studio</Typography.Muted>
<Typography.Label>SECTION IV — MOTION GRAMMAR</Typography.Label>
</div>
</template>
#属性
#TypographyDisplay
纯造型的部件——自身没有属性,沿用部件结构的共享样式。
#TypographyHeading
纯造型的部件——自身没有属性,沿用部件结构的共享样式。
#TypographyLead
纯造型的部件——自身没有属性,沿用部件结构的共享样式。
#TypographyBody
纯造型的部件——自身没有属性,沿用部件结构的共享样式。
#TypographyMuted
纯造型的部件——自身没有属性,沿用部件结构的共享样式。
#TypographyLabel
纯造型的部件——自身没有属性,沿用部件结构的共享样式。