# 引用块

来自其他来源的块级引用。

```jsx
<Blockquote>完美的排版无疑是所有艺术中最难捉摸的。只有石雕在固执上接近它。</Blockquote>
```

## [API 参考](#api-参考)

该组件基于 `blockquote` 元素，并支持 [常见的边距属性](/themes/docs/overview/layout#margin-props)。

| Prop           | Type                                                      | Default          |
| -------------- | --------------------------------------------------------- | ---------------- |
| `asChild`      | `boolean`                                                 | No default value |
| `size`         | `Responsive<enum>`                                        | No default value |
| `weight`       | `Responsive<"light" \| "regular" \| "medium" \| "bold">`  | No default value |
| `color`        | `enum`                                                    | No default value |
| `highContrast` | `boolean`                                                 | No default value |
| `truncate`     | `boolean`                                                 | No default value |
| `wrap`         | `Responsive<"wrap" \| "nowrap" \| "pretty" \| "balance">` | No default value |

## [示例](#示例)

### [尺寸](#尺寸)

使用 `size` 属性来控制尺寸。

```jsx
<Flex direction="column" gap="5">
  <Box maxWidth="300px">
    <Blockquote size="1">完美的排版无疑是所有艺术中最难捉摸的。只有石雕在固执上接近它。</Blockquote>
  </Box>

  <Box maxWidth="350px">
    <Blockquote size="2">完美的排版无疑是所有艺术中最难捉摸的。只有石雕在固执上接近它。</Blockquote>
  </Box>

  <Box maxWidth="400px">
    <Blockquote size="3">完美的排版无疑是所有艺术中最难捉摸的。只有石雕在固执上接近它。</Blockquote>
  </Box>

  <Box maxWidth="450px">
    <Blockquote size="4">完美的排版无疑是所有艺术中最难捉摸的。只有石雕在固执上接近它。</Blockquote>
  </Box>

  <Box maxWidth="500px">
    <Blockquote size="5">完美的排版无疑是所有艺术中最难捉摸的。只有石雕在固执上接近它。</Blockquote>
  </Box>

  <Box maxWidth="550px">
    <Blockquote size="6">完美的排版无疑是所有艺术中最难捉摸的。只有石雕在固执上接近它。</Blockquote>
  </Box>

  <Box maxWidth="600px">
    <Blockquote size="7">完美的排版无疑是所有艺术中最难捉摸的。只有石雕在固执上接近它。</Blockquote>
  </Box>

  <Box maxWidth="650px">
    <Blockquote size="8">完美的排版无疑是所有艺术中最难捉摸的。只有石雕在固执上接近它。</Blockquote>
  </Box>

  <Box maxWidth="1000px">
    <Blockquote size="9">完美的排版无疑是所有艺术中最难捉摸的。只有石雕在固执上接近它。</Blockquote>
  </Box>
</Flex>
```

### [字重](#字重)

使用 `weight` 属性来设置文本的字重。

```jsx
<Flex direction="column" gap="3" maxWidth="500px">
  <Blockquote weight="regular">
    完美的排版无疑是所有艺术中最难捉摸的。只有石雕在固执上接近它。
  </Blockquote>

  <Blockquote weight="medium">
    完美的排版无疑是所有艺术中最难捉摸的。只有石雕在固执上接近它。
  </Blockquote>

  <Blockquote weight="bold">
    完美的排版无疑是所有艺术中最难捉摸的。只有石雕在固执上接近它。
  </Blockquote>
</Flex>
```

### [颜色](#颜色)

使用 `color` 属性来指定特定的 [颜色](/themes/docs/theme/color)。

```jsx
<Flex direction="column" gap="3" maxWidth="500px">
  <Blockquote color="indigo">
    完美的排版无疑是所有艺术中最难捉摸的。只有石雕在固执上接近它。
  </Blockquote>

  <Blockquote color="cyan">
    完美的排版无疑是所有艺术中最难捉摸的。只有石雕在固执上接近它。
  </Blockquote>

  <Blockquote color="orange">
    完美的排版无疑是所有艺术中最难捉摸的。只有石雕在固执上接近它。
  </Blockquote>

  <Blockquote color="crimson">
    完美的排版无疑是所有艺术中最难捉摸的。只有石雕在固执上接近它。
  </Blockquote>
</Flex>
```

### [高对比度](#高对比度)

使用 `highContrast` 属性来增加与背景的颜色对比度。

```jsx
<Flex direction="column" gap="3" maxWidth="500px">
  <Blockquote color="gray">
    完美的排版无疑是所有艺术中最难捉摸的。只有石雕在固执上接近它。
  </Blockquote>

  <Blockquote color="gray" highContrast>
    完美的排版无疑是所有艺术中最难捉摸的。只有石雕在固执上接近它。
  </Blockquote>
</Flex>
```

### [截断](#截断)

使用 `truncate` 属性在文本溢出其容器时使用省略号截断文本。

```jsx
<Flex maxWidth="500px">
  <Blockquote truncate>完美的排版无疑是所有艺术中最难捉摸的。只有石雕在固执上接近它。</Blockquote>
</Flex>
```

<!--$-->

<!--/$-->