mirror of
https://github.com/mintlify/docs.git
synced 2026-09-14 13:35:46 +08:00
locadex-agent[bot]
c3f6c65103
Co-authored-by: locadex-agent[bot] <217277504+locadex-agent[bot]@users.noreply.github.com>
70 lines
2.1 KiB
Plaintext
70 lines
2.1 KiB
Plaintext
---
|
||
title: "Frames"
|
||
description: "通过为图像和其他组件添加样式化边框来增强视觉强调。"
|
||
keywords: ["image frames", "visual emphasis", "captions", "border"]
|
||
---
|
||
|
||
使用 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="hints">
|
||
## 提示
|
||
</div>
|
||
|
||
使用可选的 `hint` 属性添加显示在框架前面的文本。提示会显示在框架上方。
|
||
|
||
<Frame hint="如果你计划前往优胜美地国家公园，请在出发前先办好许可。" caption="优胜美地国家公园每年接待超过 350 万名游客。">
|
||
<img src="https://mintlify-assets.b-cdn.net/yellowstone.jpeg" alt="黄石国家公园中，一座被树木环绕、远处群山相映的湖泊照片。" />
|
||
</Frame>
|
||
|
||
<div id="properties">
|
||
## 属性
|
||
</div>
|
||
|
||
<ResponseField name="caption" type="string">
|
||
作为框架一部分显示的文本，居中显示在内容下方。
|
||
</ResponseField>
|
||
|
||
<ResponseField name="hint" type="string">
|
||
显示在框架前面的文本。
|
||
</ResponseField>
|
||
|
||
<CodeGroup>
|
||
|
||
```mdx Frame
|
||
<Frame>
|
||
<img src="/path/image.jpg" alt="Descriptive alt text" />
|
||
</Frame>
|
||
```
|
||
|
||
```mdx Frame with a caption
|
||
<Frame caption="Caption text">
|
||
<img src="/path/image.jpg" alt="Descriptive alt text" />
|
||
</Frame>
|
||
```
|
||
|
||
```mdx Frame with a hint
|
||
<Frame hint="Hint text">
|
||
<img src="/path/image.jpg" alt="Descriptive alt text" />
|
||
</Frame>
|
||
```
|
||
|
||
```mdx Frame with both hint and caption
|
||
<Frame hint="Hint text" caption="Caption text">
|
||
<img src="/path/image.jpg" alt="Descriptive alt text" />
|
||
</Frame>
|
||
```
|
||
</CodeGroup> |