---
title: 框架
description: >-
  Frame 将图片和演示内容包裹在带边框的容器中，并可添加标题，让文档视觉保持一致。
---

> **For AI agents:** the complete documentation index is at [llms.txt](/docs/llms.txt). Append `.md` to any page URL for its markdown version.

Frame 将图片和演示内容包裹在带边框的容器中，并可添加标题。

屏幕截图显示的是英文界面。

使用 Frame 的场景：
- 让屏幕截图和 UI 图片呈现完整美观的效果
- 添加标题，解释读者看到的内容
- 区分演示输出和常规内容
- 保持整个文档的视觉一致性

## 用法

```mdx
<Frame caption="Architecture diagram">
  ![Diagram](/images/city-skyline.jpg)
</Frame>
```

## 基本 Frame

<Frame>
  ![城市天际线](/images/city-skyline.webp)
</Frame>

```mdx
<Frame>
  ![City skyline](/images/city-skyline.webp)
</Frame>
```

## 添加标题

在框架下方添加标题：

<Frame caption="黄昏时的纽约市">
  ![城市天际线](/images/city-skyline.webp)
</Frame>

```mdx
<Frame caption="New York City at dusk">
  ![City skyline](/images/city-skyline.webp)
</Frame>
```

## 包裹其他内容

Frame 不仅适用于图片，也适用于任何内容：

<Frame caption="示例代码输出">
```
✓ Build completed successfully
✓ 42 pages generated
✓ Deployed to production
```
</Frame>

## 不应使用 Frame 的场景

- **内联装饰图片** - 插图使用常规 Markdown 图片即可
- **图标或小型图形** - Frame 会增加不必要的视觉负担
- **随文本排列的图片** - Frame 会形成视觉分隔；独立展示的视觉内容更适合使用 Frame

## 最佳实践

- **保持标题简洁** - 用一句话解释读者看到的内容
- **保持一致** - 如果为一个屏幕截图使用 Frame，就为所有屏幕截图使用 Frame，以保持视觉一致性
- **不要过度使用 Frame** - 仅为重要的视觉内容保留 Frame，不要为页面上的每张图片都使用

## 属性

<ParamField name="caption" type="string">
  框架下方的可选文本。
</ParamField>

## 下一步？

<Columns cols={2}>
  <Card title="组件概览" icon="puzzle-piece" href="/cn/components/overview">
    浏览所有可用组件
  </Card>
  <Card title="MDX 基础" icon="file-code" href="/cn/content/mdx-basics">
    了解如何在 MDX 中使用组件
  </Card>
</Columns>