> ## Documentation Index
> Fetch the complete documentation index at: https://omer-914cc1c6.mintlify.site/llms.txt
> Use this file to discover all available pages before exploring further.

# Frames

> 将图像或其他组件包裹在容器中

使用 Frames 以一致的样式展示图像、示意图或其他视觉内容，并可选配字幕说明。Frames 会将内容居中，并与周围文本形成视觉分隔。

<Frame>
  <img src="https://mintlify-assets.b-cdn.net/yellowstone.jpeg" alt="黄石国家公园中一处被树林环绕的湖泊，远处可见群山的照片。" />
</Frame>

<div id="captions">
  ## 说明文字
</div>

你可以使用可选的 `caption` 属性为图片添加额外的说明。

<Frame caption="优胜美地国家公园每年接待超过 350 万名游客">
  <img src="https://mintlify-assets.b-cdn.net/yosemite.jpg" alt="优胜美地山谷的照片。" />
</Frame>

<div id="properties">
  ## 属性
</div>

<ResponseField name="caption" type="string">
  可选的标题文本，将在组件下方居中显示。
</ResponseField>

<CodeGroup>
  ```mdx Frame theme={null}
  <Frame>
    <img src="/path/image.jpg" alt="Descriptive alt text" />
  </Frame>
  ```

  ```mdx Frame with a caption theme={null}
  <Frame caption="Caption text">
    <img src="/path/image.jpg" alt="Descriptive alt text" />
  </Frame>
  ```
</CodeGroup>