Safari
safari浏览器外壳 · 顶栏红绿灯+地址栏包裹截图 + RSC
用法
基础用法
用 Safari 外壳包裹任意内容（网页截图、组件预览等）。
hulian.design
你的网页截图放这里
tsx
<Safari url="hulian.design" style={{ width: 375 }}>
<img src="/screenshot.png" alt="" />
</Safari>自定义地址栏
通过 url 设置地址栏文本。
app.hulian.design/dashboard
你的网页截图放这里
tsx
<Safari url="app.hulian.design/dashboard" style={{ width: 375 }}>
<img src="/screenshot.png" alt="" />
</Safari>图片截图
传 imageSrc 直接渲染网页截图（优先于 children）。
hulian.design
你的网页截图放这里
tsx
<Safari url="hulian.design" imageSrc="/screenshot.png" style={{ width: 375 }} />何时用
把网页截图 / live 内容包进一个 macOS Safari 风格的窗口框，用于落地页展示、文档配图。它只有红绿灯+地址栏的极简顶栏；要带标签页 + 前进/后退/刷新工具栏用 Chrome，要命令行风格用 Terminal，要手机/平板机身用 iPhone/Tablet。
导入
ts
import { Safari } from "@hulianui/ui"Props
继承 ComponentPropsWithoutRef<"div">（className、style 等照常透传，常用 style={{ width }} 控宽）。
| 名称 | 类型 | 默认 | 说明 |
|---|---|---|---|
| url | string | "hulian.design" | 地址栏文本。 |
| imageSrc | string | — | 内容区图片地址，优先于 children。 |
Slots
| 插槽 | 类型 | 说明 |
|---|---|---|
| children | ReactNode | 内容区自定义节点（imageSrc 未传时渲染）。 |
禁忌 / 坑
- 纯展示外壳，不带宽度默认值，需自行用
style={{ width }}或 className 控制尺寸，否则塌缩到内容宽。 imageSrc与children同传时imageSrc优先，children 被忽略。
相关
Playground
hulian.design
你的网页截图放这里
<Safari url="hulian.design">
<img src="/screenshot.png" />
</Safari>