Skip to Content
文档

块引用

用于引用外部来源的文本内容

SourceStorybookRecipe
If anyone thinks he is something when he is nothing, he deceives himself. Each one should test his own actions. Then he can take pride in himself, without comparing himself to anyone else.

用法

¥Usage

import { Blockquote } from "@chakra-ui/react"
<Blockquote.Root>
  <Blockquote.Content cite="https://" />
  <Blockquote.Caption>
    <cite>Uzumaki Naruto</cite>
  </Blockquote.Caption>
</Blockquote.Root>
info

如果你更喜欢封闭的组件组合，请查看 以下代码片段。

¥If you prefer a closed component composition, check out the snippet below.

示例

¥Examples

包含引用

¥With Cite

要提供有关区块引用的参考：

¥To provide reference about the blockquote:

  • 将 cite prop 传递给指向引用 URL 的 Blockquote.Content

  • 渲染 Blockquote.Caption 组件以显示引用作者的名称

If anyone thinks he is something when he is nothing, he deceives himself. Each one should test his own actions. Then he can take pride in himself, without comparing himself to anyone else.
— Uzumaki Naruto

颜色

¥Colors

使用 colorPalette 属性更改引用块的颜色。

¥Use the colorPalette prop to change the color of the blockquote.

gray

If anyone thinks he is something when he is nothing, he deceives himself. Each one should test his own actions. Then he can take pride in himself, without comparing himself to anyone else.
— Uzumaki Naruto

red

If anyone thinks he is something when he is nothing, he deceives himself. Each one should test his own actions. Then he can take pride in himself, without comparing himself to anyone else.
— Uzumaki Naruto

green

If anyone thinks he is something when he is nothing, he deceives himself. Each one should test his own actions. Then he can take pride in himself, without comparing himself to anyone else.
— Uzumaki Naruto

blue

If anyone thinks he is something when he is nothing, he deceives himself. Each one should test his own actions. Then he can take pride in himself, without comparing himself to anyone else.
— Uzumaki Naruto

teal

If anyone thinks he is something when he is nothing, he deceives himself. Each one should test his own actions. Then he can take pride in himself, without comparing himself to anyone else.
— Uzumaki Naruto

pink

If anyone thinks he is something when he is nothing, he deceives himself. Each one should test his own actions. Then he can take pride in himself, without comparing himself to anyone else.
— Uzumaki Naruto

purple

If anyone thinks he is something when he is nothing, he deceives himself. Each one should test his own actions. Then he can take pride in himself, without comparing himself to anyone else.
— Uzumaki Naruto

cyan

If anyone thinks he is something when he is nothing, he deceives himself. Each one should test his own actions. Then he can take pride in himself, without comparing himself to anyone else.
— Uzumaki Naruto

orange

If anyone thinks he is something when he is nothing, he deceives himself. Each one should test his own actions. Then he can take pride in himself, without comparing himself to anyone else.
— Uzumaki Naruto

yellow

If anyone thinks he is something when he is nothing, he deceives himself. Each one should test his own actions. Then he can take pride in himself, without comparing himself to anyone else.
— Uzumaki Naruto

变量

¥Variants

使用 variant 属性更改块引用的视觉样式。

¥Use the variant prop to change the visual style of the blockquote.

If anyone thinks he is something when he is nothing, he deceives himself. Each one should test his own actions. Then he can take pride in himself, without comparing himself to anyone else.
If anyone thinks he is something when he is nothing, he deceives himself. Each one should test his own actions. Then he can take pride in himself, without comparing himself to anyone else.

图标

¥Icon

以下是如何组合 Float 和 BlockquoteIcon 组件以在区块引用上显示图标的示例。默认图标为双引号。

¥Here's an example of how to compose the Float and BlockquoteIcon to show an icon on the blockquote. The default icon is a double quote.

If anyone thinks he is something when he is nothing, he deceives himself. Each one should test his own actions. Then he can take pride in himself, without comparing himself to anyone else.
— Uzumaki Naruto

或者，你可以渲染自定义图标。

¥Alternatively, you can render a custom icon.

If anyone thinks he is something when he is nothing, he deceives himself. Each one should test his own actions. Then he can take pride in himself, without comparing himself to anyone else.
— Uzumaki Naruto

对齐

¥Justify

使用 justify 属性更改块引用的对齐方式。

¥Use the justify prop to change the alignment of the blockquote.

start

If anyone thinks he is something when he is nothing, he deceives himself. Each one should test his own actions. Then he can take pride in himself, without comparing himself to anyone else.
— Uzumaki Naruto

center

If anyone thinks he is something when he is nothing, he deceives himself. Each one should test his own actions. Then he can take pride in himself, without comparing himself to anyone else.
— Uzumaki Naruto

end

If anyone thinks he is something when he is nothing, he deceives himself. Each one should test his own actions. Then he can take pride in himself, without comparing himself to anyone else.
— Uzumaki Naruto

包含头像

¥With Avatar

以下示例展示了如何组合 Blockquote、Avatar 和 Float 组件，以创建令人惊叹的用户评价组件。

¥Here's an example of how to compose the Blockquote, Avatar and Float components to create a stunning testimonial component.

If anyone thinks he is something when he is nothing, he deceives himself. Each one should test his own actions. Then he can take pride in himself, without comparing himself to anyone else.
EJ
Emily Jones

已关闭组件

¥Closed Component

以下示例展示了如何创建封闭式组件组合。

¥Here's an example of how to create a closed component composition

import { Blockquote as ChakraBlockquote } from "@chakra-ui/react"
import * as React from "react"

export interface BlockquoteProps extends ChakraBlockquote.RootProps {
  cite?: React.ReactNode
  citeUrl?: string
  icon?: React.ReactNode
  showDash?: boolean
}

export const Blockquote = React.forwardRef<HTMLDivElement, BlockquoteProps>(
  function Blockquote(props, ref) {
    const { children, cite, citeUrl, showDash, icon, ...rest } = props

    return (
      <ChakraBlockquote.Root ref={ref} {...rest}>
        {icon}
        <ChakraBlockquote.Content cite={citeUrl}>
          {children}
        </ChakraBlockquote.Content>
        {cite && (
          <ChakraBlockquote.Caption>
            {showDash ? <>&mdash;</> : null} <cite>{cite}</cite>
          </ChakraBlockquote.Caption>
        )}
      </ChakraBlockquote.Root>
    )
  },
)

export const BlockquoteIcon = ChakraBlockquote.Icon

如果你想自动将封闭式组件添加到项目中，请运行以下命令：

¥If you want to automatically add the closed component to your project, run the command:

npx @chakra-ui/cli snippet add blockquote

属性

¥Props

根元素

¥Root

PropDefaultType
colorPalette 'gray'
'gray' | 'red' | 'orange' | 'yellow' | 'green' | 'teal' | 'blue' | 'cyan' | 'purple' | 'pink'

The color palette of the component

justify 'start'
'start' | 'center' | 'end'

The justify of the component

variant 'subtle'
'subtle' | 'solid' | 'plain'

The variant of the component

as
React.ElementType

The underlying element to render.

asChild
boolean

Use the provided child element as the default rendered element, combining their props and behavior.

For more details, read our Composition guide.
unstyled
boolean

Whether to remove the component's style.

Previous

换行

Next

代码