iPhone
iphone手机外壳 · 灵动岛机身包裹屏幕(token themeable) + RSC
用法
基础用法
含灵动岛的 iPhone 外壳包裹屏幕内容，默认机型 15 Pro。
瑚琏 App屏幕内容
tsx
<IPhone>
<img src="/app.png" alt="" />
</IPhone>选择机型
model 切换预设机型，决定默认宽度。
瑚琏 App屏幕内容
tsx
<IPhone model="16-pro-max">
<img src="/app.png" alt="" />
</IPhone>自定义宽度
width 显式传入时优先于机型预设宽度。
瑚琏 App屏幕内容
tsx
<IPhone width={220}>
<img src="/app.png" alt="" />
</IPhone>图片内容
传 imageSrc 直接渲染 App 截图（优先于 children）。
瑚琏 App屏幕内容
tsx
<IPhone model="15-pro" imageSrc="/app.png" />何时用
把 App 截图 / 移动端页面包进 iPhone 机身（灵动岛）框做展示，落地页、AppStore 配图常用。要安卓打孔屏机身用 Android，要平板用 Tablet，要浏览器窗口框用 Safari/Chrome。
导入
ts
import { IPhone, IPHONE_MODELS } from "@hulianui/ui"Props
继承 ComponentPropsWithoutRef<"div">。IPHONE_MODELS 导出机型→宽度映射常量。
| 名称 | 类型 | 默认 | 说明 |
|---|---|---|---|
| model | "16-pro-max" | "16-pro" | "16-plus" | "16" | "15-pro" | "13-mini" | "15-pro"(showcase) | 预设机型，决定默认宽度。 |
| width | number | model 预设，无 model 则 280 | 设备宽度(px)，显式传入时优先于 model。 |
| imageSrc | string | — | 屏幕内容图片地址，优先于 children。 |
Slots
| 插槽 | 类型 | 说明 |
|---|---|---|
| children | ReactNode | 屏幕内容自定义节点。 |
禁忌 / 坑
- 机身比例由组件内
aspectRatio统一固定，model/width只改宽度不改纵横比；想要别的比例需自行外层裁切。 imageSrc与children同传时imageSrc优先。
相关
Playground
瑚琏 App屏幕内容
<IPhone model="15-pro">
<img src="/app.png" />
</IPhone>