Frames

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

说明文字

使用可选的 caption 属性为图像添加额外的说明信息。说明文字会显示在图像下方的框中。

图注中的 Markdown

图注支持 Markdown 格式，包括链接和粗体文本。

黄石国家公园中一座被树林环绕、远处群山环抱的湖泊照片。 — 重要：请查看公园网站了解当前情况。

提示

使用可选的 hint 属性添加显示在框架前面的文本。提示会显示在框架上方。

如果你计划前往优胜美地国家公园，请在出发前先办好许可。

黄石国家公园中，一座被树木环绕、远处群山相映的湖泊照片。 — 优胜美地国家公园每年接待超过 350 万名游客。

视频

当你将带有 autoPlay 的 video 元素放入框架中时，框架会自动添加 playsInline、loop 和 muted 属性。

Video with autoPlay

<Frame caption="Product demo">
  <video autoPlay src="/path/to/video.mp4" />
</Frame>

未设置 autoPlay 的视频不会被自动添加任何额外属性。

属性

caption

string

作为框架一部分显示的文本，居中显示在内容下方。支持 Markdown 格式，包括链接和加粗文本。

hint

string

显示在框架前面的文本。

<Frame>
  <img src="/path/image.jpg" alt="Descriptive alt text" />
</Frame>

<Frame caption="Caption text">
  <img src="/path/image.jpg" alt="Descriptive alt text" />
</Frame>

<Frame caption="Visit the [documentation](/docs) for more details">
  <img src="/path/image.jpg" alt="Descriptive alt text" />
</Frame>

<Frame caption="**Note:** See the [official guide](https://example.com) for setup instructions">
  <img src="/path/image.jpg" alt="Descriptive alt text" />
</Frame>

<Frame hint="Hint text">
  <img src="/path/image.jpg" alt="Descriptive alt text" />
</Frame>

<Frame hint="Hint text" caption="Caption text">
  <img src="/path/image.jpg" alt="Descriptive alt text" />
</Frame>

字段

图标

快速入门

组织

自定义

创建内容

编写 API 文档

部署

优化

说明文字

图注中的 Markdown

提示

视频

属性

​说明文字

​图注中的 Markdown

​提示

​视频

​属性

说明文字

图注中的 Markdown

提示

视频

属性