Chrome
chrome浏览器外壳 · 标签页+工具栏(前进/后退/刷新+地址栏)包裹截图 + RSC
用法
基础用法
Chrome 外壳带标签页条 + 工具栏，包裹任意内容。
hulian.design
hulian.design
你的网页截图放这里
tsx
<Chrome url="hulian.design" style={{ width: 375 }}>
<img src="/screenshot.png" alt="" />
</Chrome>自定义标签标题
title 设置标签页标题，缺省时回退取 url。
瑚琏 Hulian
hulian.design
你的网页截图放这里
tsx
<Chrome url="hulian.design" title="瑚琏 Hulian" style={{ width: 375 }}>
<img src="/screenshot.png" alt="" />
</Chrome>图片截图
传 imageSrc 直接渲染网页截图（优先于 children）。
hulian.design
hulian.design
你的网页截图放这里
tsx
<Chrome url="hulian.design" imageSrc="/screenshot.png" style={{ width: 375 }} />何时用
把网页截图 / live 内容包进一个 Chrome 风格窗口框，带标签页标题和前进/后退/刷新工具栏，比 Safari 信息更丰富，适合强调「浏览器内运行」的产品截图。只要红绿灯+地址栏的极简框用 Safari，命令行风格用 Terminal，移动端机身用 iPhone/Android/Tablet。
导入
ts
import { Chrome } from "@hulianui/ui"Props
继承 ComponentPropsWithoutRef<"div">（className、style 等照常透传，常用 style={{ width }} 控宽）。
| 名称 | 类型 | 默认 | 说明 |
|---|---|---|---|
| url | string | "hulian.design" | 地址栏文本。 |
| title | string | 取 url | 标签页标题。 |
| imageSrc | string | — | 内容区图片地址，优先于 children。 |
Slots
| 插槽 | 类型 | 说明 |
|---|---|---|
| children | ReactNode | 内容区自定义节点（imageSrc 未传时渲染）。 |
禁忌 / 坑
- 纯展示外壳，不带宽度默认值，需自行用
style={{ width }}或 className 控制尺寸，否则塌缩到内容宽。 imageSrc与children同传时imageSrc优先，children 被忽略。
相关
Playground
瑚琏 Hulian
hulian.design
你的网页截图放这里
<Chrome url="hulian.design" title="瑚琏 Hulian">
<img src="/screenshot.png" />
</Chrome>