Frame

带边框和内边距的截图与媒体包装器——可选配标题说明。

安装

npx @cloudflare/nimbus-docs add frame

yarn dlx @cloudflare/nimbus-docs add frame

pnpm dlx @cloudflare/nimbus-docs add frame

bunx @cloudflare/nimbus-docs add frame

预览

Nimbus 展示页面

<Frame caption="Nimbus 展示页面">
<img src="/assets/showcase.png" alt="组件展示页面的截图" />
</Frame>

示例

宽高比

将 Frame 锁定为固定宽高比。常用选择：16/9（视频）、4/3（经典）、1/1（正方形）、21/9（超宽）。

16 / 9

4 / 3

1 / 1

21 / 9

<Frame aspect="16/9" caption="16 / 9">
<img src="/assets/hero.png" alt="主视觉" />
</Frame>

<Frame aspect="4/3" caption="4 / 3">
<img src="/assets/screenshot.png" alt="截图" />
</Frame>

<Frame aspect="1/1" caption="1 / 1">
<img src="/assets/avatar.png" alt="头像" />
</Frame>

<Frame aspect="21/9" caption="21 / 9">
<img src="/assets/banner.png" alt="横幅" />
</Frame>

API 参考

组件接受的全部属性，均源自单一声明。

Prop	Type
`caption`	`string`
`aspect`	`string`
`src`	`ImageMetadata \| string`
`alt`	`string`