Blockquote

基础排版

基于 Bootstrap 5 的引用组件，用于展示引述内容，提供 Blockquote 与 BlockquoteFooter 子组件，支持标注出处、居中引用与自定义结构

Component Demo

Basic usage and examples of the Blockquote component

基础用法

一个被版面分散注意力的读者，将无法专注于排版本身。

标注出处

一个被版面分散注意力的读者，将无法专注于排版本身。

居中引用

一个被版面分散注意力的读者，将无法专注于排版本身。

自定义结构

通过 as 与 className 可以自定义根元素与样式。
作者dafengzhen

API Documentation

Complete API reference for the Blockquote component

Props

Blockquote

属性名	类型	默认值	描述
`as`	`ElementType`	`'blockquote'`	渲染的根元素类型
`children`	`ReactNode`	-	引用内容，通常为 p 元素文本
`className`	`string`	-	自定义类名，作用于 blockquote 元素
`...rest`	`HTMLAttributes`	-	根元素的所有原生属性（如 `style`、`aria-*` 等）

BlockquoteFooter

属性名	类型	默认值	描述
`as`	`ElementType`	`'figcaption'`	渲染的根元素类型，通常配合 figure 使用
`children`	`ReactNode`	-	标注内容，如「Someone famous in」
`className`	`string`	-	自定义类名
`source`	`ReactNode`	-	出处名称，渲染在 cite 元素内
`sourceTitle`	`string`	-	出处的 title 提示，透传给 cite 元素
`...rest`	`HTMLAttributes`	-	根元素的所有原生属性

Type Definitions

BlockquoteFooterProps

引用出处组件属性接口

export interface BlockquoteFooterProps extends HTMLAttributes<HTMLElement> {
  as?: ElementType;
  children?: ReactNode;
  className?: string;
  source?: ReactNode;
  sourceTitle?: string;
}

BlockquoteProps

引用组件属性接口

export interface BlockquoteProps extends HTMLAttributes<HTMLElement> {
  as?: ElementType;
  children?: ReactNode;
  className?: string;
}