Skip to content
Mintlify
Mintlify
组件

Frames

使用 frame 组件为图片、视频和其他内容添加样式化边框、说明文字和视觉强调效果。

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

黄石国家公园内,一座被树林环绕的湖泊,远处群山环抱的照片。

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

优胜美地山谷的照片。
优胜美地国家公园每年有超过 350 万人到访。

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

优胜美地山谷的照片。
进一步了解 [优胜美地国家公园](https://www.nps.gov/yose/index.htm),并规划你的行程。
黄石国家公园中一座被树林环绕、远处群山环抱的湖泊照片。
**重要:** 请查看 [公园网站](https://www.nps.gov/yose/index.htm) 了解当前情况。

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

黄石国家公园中,一座被树木环绕、远处群山相映的湖泊照片。
优胜美地国家公园每年接待超过 350 万名游客。
如果你计划前往优胜美地国家公园,请在出发前先办好许可。

当你将带有 autoPlayvideo 元素放入框架中时,框架会自动添加 playsInlineloopmuted 属性。

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

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

captionstring

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

hintstring

显示在框架前面的文本。

<Frame>
  <img src="/path/image.jpg" alt="Descriptive alt text" />
</Frame>
Was this page helpful?Suggest editsRaise issue