Blockquote 引用

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

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

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

export default function Demo() {
  return (
    <Blockquote cite="夏目漱石" className="max-w-lg">
      どこで生れたかとんと見当がつかぬ。
    </Blockquote>
  )
}

tsx

用法

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

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

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

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

export default function Demo() {
  return (
    <Blockquote className="max-w-lg">
      设计的第一要务不是让人注意到它，而是让人顺利地完成手上的事。
    </Blockquote>
  )
}

tsx

示例

标明出处

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

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

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

export default function Demo() {
  return (
    <Blockquote cite="夏目漱石《吾輩は猫である》" className="max-w-lg">
      吾輩は猫である。名前はまだ無い。
    </Blockquote>
  )
}

tsx

多段引用

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

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

import { Blockquote, Text } from '@hina-ui/react'

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

tsx

正文中的引用

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

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

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

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

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

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

tsx

API

Props

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

内容属性

属性	说明
`children`	引用的正文

用法

示例

标明出处

多段引用

正文中的引用

无障碍

API

Props

内容属性