Prose 富文本

富文本容器，统一接管其中的原生标签。

狼と香辛料

这是一段来自后端的富文本。段落、标题、列表与引用都由容器统一接管，调用方不需要为每个标签指定样式。

书页翻动的声音，是图书馆唯一允许的喧哗。

第一卷启航
第二卷远洋

<script setup lang="ts">
  import { Prose } from '@hina-ui/vue'
</script>

<template>
  <Prose class="max-w-xl">
    <h2>狼と香辛料</h2>
    <p>
      这是一段来自后端的富文本。段落、标题、列表与引用都由容器统一接管，调用方不需要为每个标签指定样式。
    </p>
    <blockquote>书页翻动的声音，是图书馆唯一允许的喧哗。</blockquote>
    <ul>
      <li>第一卷 启航</li>
      <li>第二卷 远洋</li>
    </ul>
  </Prose>
</template>

vue

用法

import { Prose } from '@hina-ui/vue'

把一段 HTML 放入容器，其中的原生标签自动获得排版样式。渲染 Markdown、接口返回的富文本或编辑器产出的内容时使用它。

<script setup lang="ts">
  import { Prose } from '@hina-ui/vue'
</script>

<template>
  <Prose class="max-w-lg" v-html="'<h3>标题</h3><p>一段来自接口的 HTML。</p>'" />
</template>

vue

示例

接管的标签

标题、段落、列表、描述列表、引用、代码、表格、分隔线、标记与按键都在接管范围内，呈现与对应组件一致。

段落中可以有加粗、链接、 行内代码 、标记与 Ctrl 按键。

有序列表
与组件的呈现一致

格式: EPUB、PDF

卷次	页数
第一卷	288

<script setup lang="ts">
  import { Prose } from '@hina-ui/vue'
</script>

<template>
  <Prose class="max-w-xl">
    <p>
      段落中可以有
      <strong>加粗</strong>
      、
      <a href="#elements">链接</a>
      、
      <code>行内代码</code>
      、
      <mark>标记</mark>
      与
      <kbd>Ctrl</kbd>
      按键。
    </p>
    <ol>
      <li>有序列表</li>
      <li>与组件的呈现一致</li>
    </ol>
    <dl>
      <dt>格式</dt>
      <dd>EPUB、PDF</dd>
    </dl>
    <hr />
    <table>
      <thead>
        <tr>
          <th>卷次</th>
          <th>页数</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>第一卷</td>
          <td>288</td>
        </tr>
      </tbody>
    </table>
  </Prose>
</template>

vue

容器标签

as 指定渲染成哪个标签，默认为 div。整篇文章可以用 article。

渲染为 article

容器标签由 as 决定，正文样式不变。

<script setup lang="ts">
  import { Prose } from '@hina-ui/vue'
</script>

<template>
  <Prose as="article" class="max-w-lg">
    <h3>渲染为 article</h3>
    <p>容器标签由 as 决定，正文样式不变。</p>
  </Prose>
</template>

vue

首尾外边距

元素之间有纵向间距，但容器内第一个元素的上外边距与最后一个元素的下外边距会被清除，因此放入卡片时不会多出一段空白。

首尾不留外边距

容器内第一个与最后一个元素的外边距被清除，因此贴合卡片的内边距。

<script setup lang="ts">
  import { Card, Prose } from '@hina-ui/vue'
</script>

<template>
  <Card padded class="w-full max-w-lg">
    <Prose>
      <h3>首尾不留外边距</h3>
      <p>容器内第一个与最后一个元素的外边距被清除，因此贴合卡片的内边距。</p>
    </Prose>
  </Card>
</template>

vue

行为

行高为 1.7，长单词与长链接会换行，不会撑破容器。
接管只作用于容器内的原生标签，容器外不受影响。

API

Props

属性	类型	默认值	说明
`as`	`string \| Component`	`'div'`	渲染的元素或组件
`asChild`	`boolean`	`false`	不渲染自身，合并至唯一的子元素
`class`	`string`	—	追加至根元素的类名

Slots

插槽	说明
`default`	富文本的内容