Tablet
tablet平板外壳 · iPad 系机身(model 预设尺寸/比例·token themeable) + RSC
用法
基础用法
iPad 系平板外壳包裹屏幕内容，默认机型 iPad Pro 11。
瑚琏 App平板屏
tsx
<Tablet>
<img src="/app.png" alt="" />
</Tablet>选择机型
model 切换预设机型，决定默认宽度与机身比例。
瑚琏 App平板屏
tsx
<Tablet model="ipad-pro-13">
<img src="/app.png" alt="" />
</Tablet>自定义宽度
width 显式传入时优先覆盖机型预设宽度（机身比例仍随机型）。
瑚琏 App平板屏
tsx
<Tablet model="ipad-mini" width={200}>
<img src="/app.png" alt="" />
</Tablet>图片内容
传 imageSrc 直接渲染 App 截图（优先于 children）。
瑚琏 App平板屏
tsx
<Tablet model="ipad-pro-11" imageSrc="/app.png" />何时用
把 App / 网页截图包进 iPad 系平板机身框做展示，覆盖 iPad Pro / Air / mini 系机型（各机型纵横比不同）。要手机机身用 iPhone/Android，要浏览器窗口框用 Safari/Chrome。
导入
ts
import { Tablet, TABLET_MODELS } from "@hulianui/ui"Props
继承 ComponentPropsWithoutRef<"div">。TABLET_MODELS 导出机型→{ width, aspectRatio } 映射常量。
| 名称 | 类型 | 默认 | 说明 |
|---|---|---|---|
| model | "ipad-pro-13" | "ipad-pro-11" | "ipad-air-11" | "ipad-10" | "ipad-mini" | "ipad-pro-11"(showcase) | 预设机型，决定默认宽度与机身比例。 |
| width | number | model 预设，无 model 则 320 | 设备宽度(px)，显式传入时优先覆盖宽度。 |
| imageSrc | string | — | 屏幕内容图片地址，优先于 children。 |
Slots
| 插槽 | 类型 | 说明 |
|---|---|---|
| children | ReactNode | 屏幕内容自定义节点。 |
禁忌 / 坑
- 与 iPhone/Android 不同：平板机型纵横比各异，
aspectRatio由model决定；width显式传入只覆盖宽度，比例仍随 model。不传 model 时回退默认宽 320 但无机型专属比例。 imageSrc与children同传时imageSrc优先。
相关
Playground
瑚琏 App平板屏
<Tablet model="ipad-pro-11">
<img src="/app.png" />
</Tablet>