基础

Typography 文本排版

用于文本排版场景的 MoriUI 组件。

资源

组件源码问题反馈

导入 

import { Typography } from 'moriui'

排版类型

MoriUI 提供 h1-h6、body、body-sm、body-xs 与 code 类型，并默认映射到相应语义元素。

RTL

align=start/end 使用逻辑方向，在 RTL 页面中无需手动交换左右对齐。

示例

概览

组合标题、说明与正文。

MoriUI 设计系统

以清晰的信息层级组织 Vue 界面。

Nova 视觉语言

紧凑尺寸、细描边与低调层级，让内容保持主导。

<script setup lang="ts">
  import { Typography } from 'moriui'
</script>

<template>
  <article class="w-full max-w-xl space-y-4">
    <Typography type="h1">
      MoriUI 设计系统
    </Typography><Typography color="muted">
      以清晰的信息层级组织 Vue 界面。
    </Typography><Typography type="h2">
      Nova 视觉语言
    </Typography><Typography>紧凑尺寸、细描边与低调层级，让内容保持主导。</Typography>
  </article>
</template>

h1

页面主标题。

设计系统的核心原则 

<script setup lang="ts">
  import { Typography } from 'moriui'
</script>

<template>
  <Typography type="h1">
    设计系统的核心原则
  </Typography>
</template>

h2

主要章节标题。

组件与模式 

<script setup lang="ts">
  import { Typography } from 'moriui'
</script>

<template>
  <Typography type="h2">
    组件与模式
  </Typography>
</template>

h3

次级章节标题。

清晰的信息层级 

<script setup lang="ts">
  import { Typography } from 'moriui'
</script>

<template>
  <Typography type="h3">
    清晰的信息层级
  </Typography>
</template>

h4

局部内容标题。

实施说明 

<script setup lang="ts">
  import { Typography } from 'moriui'
</script>

<template>
  <Typography type="h4">
    实施说明
  </Typography>
</template>

段落

默认正文排版。

好的界面让用户专注于任务，而不是界面本身。

<script setup lang="ts">
  import { Typography } from 'moriui'
</script>

<template>
  <Typography>好的界面让用户专注于任务，而不是界面本身。</Typography>
</template>

引用

用 as 保留引用语义。

设计不是外观，而是事物如何工作。 
<script setup lang="ts">
  import { Typography } from 'moriui'
</script>

<template>
  <Typography as="blockquote" class="border-l-2 pl-4 italic">
    设计不是外观，而是事物如何工作。
  </Typography>
</template>

表格

表格使用原生语义与 Nova Token。

组件 状态
Button 稳定
Card 稳定 
<script setup lang="ts">
  import { Typography } from 'moriui'
</script>

<template>
  <div class="w-full max-w-md overflow-hidden rounded-lg border">
    <Typography as="table" class="w-full text-sm">
      <thead class="bg-muted">
        <tr>
          <th class="p-2 text-left">
            组件
          </th>
          <th class="p-2 text-left">
            状态
          </th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td class="p-2">
            Button
          </td>
          <td class="p-2">
            稳定
          </td>
        </tr>
        <tr class="border-t">
          <td class="p-2">
            Card
          </td>
          <td class="p-2">
            稳定
          </td>
        </tr>
      </tbody>
    </Typography>
  </div>
</template>

列表

用 as 渲染语义列表。

  • 可靠的无障碍行为
  • 可维护的 Token 架构
  • 克制的 Nova 视觉
<script setup lang="ts">
  import { Typography } from 'moriui'
</script>

<template>
  <Typography as="ul" class="list-disc space-y-2 pl-6">
    <li>可靠的无障碍行为</li><li>可维护的 Token 架构</li><li>克制的 Nova 视觉</li>
  </Typography>
</template>

行内代码

code 类型展示代码片段。

使用 pnpm typecheck 验证类型。 

<script setup lang="ts">
  import { Typography } from 'moriui'
</script>

<template>
  <Typography>
    使用 <Typography as="code" type="code">
      pnpm typecheck
    </Typography> 验证类型。
  </Typography>
</template>

导语

通过公开 class 形成导语层级。

一套面向 Vue 的完整组件语言。 

<script setup lang="ts">
  import { Typography } from 'moriui'
</script>

<template>
  <Typography class="text-xl" color="muted">
    一套面向 Vue 的完整组件语言。
  </Typography>
</template>

大号文字

强调短文本。

重要说明 

<script setup lang="ts">
  import { Typography } from 'moriui'
</script>

<template>
  <Typography weight="semibold" class="text-lg">
    重要说明
  </Typography>
</template>

小号文字

body-sm 用于辅助信息。

更新于今天 13:48 

<script setup lang="ts">
  import { Typography } from 'moriui'
</script>

<template>
  <Typography type="body-sm">
    更新于今天 13:48
  </Typography>
</template>

弱化文字

color=muted 降低视觉层级。

这是一段次要说明文字。 

<script setup lang="ts">
  import { Typography } from 'moriui'
</script>

<template>
  <Typography color="muted">
    这是一段次要说明文字。
  </Typography>
</template>

RTL

逻辑方向对齐适配 RTL。

نظام تصميم واضح

مكونات Vue باتجاه من اليمين إلى اليسار. 

<script setup lang="ts">
  import { Typography } from 'moriui'
</script>

<template>
  <div dir="rtl" class="w-full max-w-xl space-y-3">
    <Typography type="h2">
      نظام تصميم واضح
    </Typography><Typography color="muted">
      مكونات Vue باتجاه من اليمين إلى اليسار.
    </Typography>
  </div>
</template>

API

属性 类型 默认值 说明
type'body' | 'body-sm' | 'body-xs' | 'code' | 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6''body'排版类型与默认语义元素。
align'start' | 'center' | 'end' | 'justify''start'文字逻辑方向对齐。
color'default' | 'muted''default'文字颜色层级。
weight'normal' | 'medium' | 'semibold' | 'bold'undefined字重。
truncatebooleanfalse单行截断溢出内容。
as / asChildstring | Component / boolean按 type 推导 / false覆盖默认语义元素或合并到唯一子元素。

无障碍说明

优先让 type 与真实标题层级一致；使用 as 覆盖时仍要维护页面大纲。不要仅用字重或颜色表达层级，RTL 内容应设置正确 lang/dir。

关联组件

内容卡片方向容器