Blockquote 引用

引用他处的整段文字，并标明出处。

どこで生れたかとんと見当がつかぬ。
—— 夏目漱石

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

<template>
  <Blockquote cite="夏目漱石" class="max-w-lg">どこで生れたかとんと見当がつかぬ。</Blockquote>
</template>

vue

用法

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

组件渲染为原生的 blockquote，起始一侧带一条竖线，文字使用次级颜色，与正文拉开距离。

设计的第一要务不是让人注意到它，而是让人顺利地完成手上的事。

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

<template>
  <Blockquote class="max-w-lg">
    设计的第一要务不是让人注意到它，而是让人顺利地完成手上的事。
  </Blockquote>
</template>

vue

示例

标明出处

cite 会在引用的下方生成一行落款，颜色比引用文字更淡。出处可以是人名、书名或者来源链接的说明。

吾輩は猫である。名前はまだ無い。
—— 夏目漱石《吾輩は猫である》

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

<template>
  <Blockquote cite="夏目漱石《吾輩は猫である》" class="max-w-lg">
    吾輩は猫である。名前はまだ無い。
  </Blockquote>
</template>

vue

多段引用

默认插槽可以容纳多个段落，段落之间的间距由调用方决定。

最初的版本只有一个输入框，我们花了三个月才承认它不够用。
后来加进去的每一项功能，都要先回答一个问题：它替谁省下了时间。
—— 访谈记录

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

<template>
  <Blockquote cite="访谈记录" class="flex max-w-lg flex-col gap-3">
    <Text>最初的版本只有一个输入框，我们花了三个月才承认它不够用。</Text>
    <Text>后来加进去的每一项功能，都要先回答一个问题：它替谁省下了时间。</Text>
  </Blockquote>
</template>

vue

正文中的引用

Prose 会为其中的原生 blockquote 应用同一套样式。渲染 Markdown 或者富文本时不需要替换标签。

正文中的引用不需要单独引入组件。

写在文章里的引用块，会自动获得同样的样式。

它与组件的呈现完全一致。

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

<template>
  <Prose class="max-w-lg">
    <p>正文中的引用不需要单独引入组件。</p>
    <blockquote>写在文章里的引用块，会自动获得同样的样式。</blockquote>
    <p>它与组件的呈现完全一致。</p>
  </Prose>
</template>

vue

API

Props

属性	类型	默认值	说明
`cite`	`string`	—	出处，显示为落款
`class`	`string`	—	追加至根元素的类名

Slots

插槽	说明
`default`	引用的正文

用法

示例

标明出处

多段引用

正文中的引用

无障碍

API

Props

Slots