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