Typography 排版

Chi UI 提供了一些带有基本格式的文本组件。

注意

示例样式受 vitepress 样式影响与实际有所出入，计划将重写 vitepress 主题以更好地展示案例。

代码示例

基础用法

Chi UI 内置了一些与标签同名的组件，用以快速应用组件库的样式。

Chi UI

Chi UI 提供了一系列开箱即用的组件。每个组件几乎所有的属性默认值均可以通过注入配置快速修改（除了值和选项属性），轻松实现定制化。同时，组件代码的编写非常注重减低源码阅读的门槛，代码的排布尽可能地贴近平时的业务代码的习惯，避免让人眼花缭乱的封装。

特性

为网站开发助力，希望能提高点效率
开箱即用的高质量 Vue 3 组件
遵循直觉的设计，代码也尽可能写得直接一些，不拐弯抹角
使用组合式 API 编写，性能与拓展性应该还不错
单元测试，为组件的使用提供良好的基础稳定性

所有组件兼容现代浏览器，尽量保证近两三个版本的支持。

<template>
  <chi-h1 top>Chi UI</chi-h1>
  <chi-p
    >Chi UI
    提供了一系列开箱即用的组件。每个组件几乎所有的<chi-strong>属性默认值</chi-strong>均可以通过注入配置快速修改（除了值和选项属性），轻松实现定制化。同时，组件代码的编写非常注重减低<chi-strong>源码阅读</chi-strong>的门槛，代码的排布尽可能地贴近平时的业务代码的习惯，避免让人眼花缭乱的封装。</chi-p
  >
  <chi-h2>特性</chi-h2>
  <chi-ul>
    <li>为网站开发助力，希望能提高点效率</li>
    <li>开箱即用的高质量 Vue 3 组件</li>
    <li>遵循直觉的设计，代码也尽可能写得直接一些，不拐弯抹角</li>
    <li>使用组合式 API 编写，性能与拓展性应该还不错</li>
    <li>单元测试，为组件的使用提供良好的基础稳定性</li>
  </chi-ul>
  <chi-blockquote>所有组件兼容现代浏览器，尽量保证近两三个版本的支持。</chi-blockquote>
</template>

文本组件

提供了不同样式的文本。

当创建段落或加粗文本时可以使用快捷组件 P 和 Strong。

Default

Primary

Info

Success

Warning

Error

Disabled

Mark Default

Mark Primary

Mark Info

Mark Success

Mark Warning

Mark Error

Mark Default

Mark Primary

Mark Info

Mark Success

Mark Warning

Mark Error

code

Underline

~~Delete~~

Strong

Italic

Keyboard

<script setup>
const types = ['default', 'primary', 'info', 'success', 'warning', 'error']
</script>

<template>
  <chi-space vertical>
    <chi-text v-for="textType in types" :key="textType" :type="textType">
      {{ textType.charAt(0).toLocaleUpperCase() + textType.substring(1) }}
    </chi-text>
    <chi-text disabled>Disabled</chi-text>
    <div v-for="textType in types" :key="textType">
      <chi-text mark :type="textType">
        {{ `Mark ${textType.charAt(0).toLocaleUpperCase()}${textType.substring(1)}` }}
      </chi-text>
    </div>
    <chi-text mark reversed v-for="textType in types" :key="textType" :type="textType">
      {{ `Mark ${textType.charAt(0).toLocaleUpperCase()}${textType.substring(1)}` }}
    </chi-text>
    <chi-text code>code</chi-text>
    <chi-text underline>Underline</chi-text>
    <chi-text delete>Delete</chi-text>
    <chi-text strong>Strong</chi-text>
    <chi-text italic>Italic</chi-text>
    <chi-text keyboard>Keyboard</chi-text>
  </chi-space>
</template>

标题组件

快速创建不同级别的标题，如果你想要更快，可以使用 H1、H2、H3、H4、H5、H6 快捷组件。

一级标题

二级标题

三级标题

四级标题

五级标题

六级标题

有类型的标题

细的标题（此处受 vitepress 样式影响）

<template>
  <chi-title :level="1" top>一级标题</chi-title>
  <chi-title :level="2">二级标题</chi-title>
  <chi-title :level="3">三级标题</chi-title>
  <chi-title :level="4">四级标题</chi-title>
  <chi-title :level="5">五级标题</chi-title>
  <chi-title :level="6">六级标题</chi-title>
  <chi-h5 type="success">有类型的标题</chi-h5>
  <chi-h5 thin>细的标题（此处受 vitepress 样式影响）</chi-h5>
</template>

标题标记

添加 marker 属性可以为标题快速添加一个标记，虽然它可能没什么实质性作用。

默认情况下标记的类型会跟随标题的类型，如果这不满足需求可以用 marker-type 属性指定标记的类型或自定义一个颜色。

标题

<template>
  <div style="position: relative; padding-inline-start: 16px">
    <div
      style="
        position: absolute;
        top: 0;
        bottom: 0;
        inset-inline-start: 0;
        width: 16px;
        background-color: var(--chi-fill-color-humble);
      "
    ></div>
    <chi-h4 marker top>标题</chi-h4>
    <chi-h4 marker type="success">标题</chi-h4>
    <chi-h4 marker aligned type="error">标题</chi-h4>
    <chi-h4 marker aligned marker-type="primary">标题</chi-h4>
    <chi-h4 marker type="info" marker-type="warning">标题</chi-h4>
    <chi-h4 marker marker-type="pink">标题</chi-h4>
  </div>
</template>

API

预设类型

export type TitleLevel = 1 | 2 | 3 | 4 | 5 | 6
export type TypographyType = 'default' | 'primary' | 'info' | 'success' | 'warning' | 'error'

Text 属性

名称	类型	说明	默认值
code	`boolean`	是否为代码，设置后标签为 `<code>`	`false`
delete	`boolean`	是否添加删除线，设置后标签为 `<del>`	`false`
disabled	`boolean`	是否禁用	`false`
italic	`boolean`	是否斜体	`false`
keyboard	`boolean`	是否添加键盘按键样式	`false`
mark	`boolean`	是否添加标记底色	`false`
reversed	`boolean`	字体颜色是否取反色	`false`
strong	`boolean`	是否加粗	`false`
tag	`string`	设置渲染的标签	`'span'`
thin	`boolean`	是否为细字体，与 `strong` 冲突	`false`
type	`TypographyType`	设置文本的类型	`'default'`
underline	`boolean`	是否添加下划线	`false`

其中 P 和 Strong 为 Text 的快捷组件。

Title 属性

名称	类型	说明	默认值
aligned	`boolean`	设置添加标记后是否按标记对齐	`false`
level	`TitleLevel`	设置标题的级别	`5`
marker	`boolean`	是否添加标记	`false`
marker-type	`string`	单独设置标记的类型，支持传入自定义颜色	`null`
thin	`boolean`	是否为细标题	`false`
top	`boolean`	是否为置顶标题，置顶时上外边距为 `0`	`false`
type	`TypographyType`	设置标题的类型	`'default'`

其中 H1、H2、H3、H4、H5、H6 为 Title 的快捷组件。

Blockquote 属性

名称	类型	说明	默认值
type	`TypographyType`	设置块引用的类型	`'default'`

OL 属性

名称	类型	说明	默认值
type	`'a' \| 'A' \| 'i' \| 'A' \| '1'`	设置序号的类型	`'1'`

UL 属性

名称	类型	说明	默认值
list-style	`string`	设置 `li` 的标记类型	`'circle'`

Typography 排版 ​

代码示例 ​

基础用法 ​

Chi UI

特性

文本组件 ​

标题组件 ​