iPhone
iphoneFrames content inside an iPhone-style shell with a Dynamic Island.
Usage
Basic usage
The iPhone casing with Smart Island wraps the screen content, the default model is 15 Pro.
<IPhone>
<img src="/app.png" alt="" />
</IPhone>Select model
model Switch the default model and determine the default width.
<IPhone model="16-pro-max">
<img src="/app.png" alt="" />
</IPhone>Custom width
width takes precedence over the model default width when passed in explicitly.
<IPhone width={220}>
<img src="/app.png" alt="" />
</IPhone>Picture content
Pass imageSrc and directly render the App screenshot (priority to children).
<IPhone model="15-pro" imageSrc="/app.png" />When to Use
Wrap App screenshots/mobile pages into the iPhone body (Smart Island) frame for display. It is commonly used for landing pages and AppStore images. If you want an Android punch-hole screen body, use Android, if you want a tablet, use Tablet, if you want a browser window frame, use Safari/Chrome.
Import
import { IPhone, IPHONE_MODELS } from "@hulianui/ui"Props
Inherited from ComponentPropsWithoutRef<"div">. IPHONE_MODELS Export model→width mapping constant.
| Name | Type | Default | Description |
|---|---|---|---|
| model | "16-pro-max" | "16-pro" | "16-plus" | "16" | "15-pro" | "13-mini" | "15-pro"(showcase) | Default model, determines the default width. |
| width | number | model default, if there is no model, 280 | Device width (px), when passed in explicitly, it takes precedence over model. |
| imageSrc | string | - | Screen content image address, taking precedence over children. |
Slots
| Slot | Type | Description |
|---|---|---|
| children | ReactNode | Screen content customization node. |
Usage Guidelines
- Body height is derived from the screen ratio and the border, never a hard-coded `aspectRatio`. The border is a fixed pixel value while the screen scales with the width, so the body ratio is not a constant: the same device drawn at 280px and at 360px has two different body ratios. A hard-coded ratio therefore skews the inner screen at some widths, and PreviewSandbox
fitscaling leaves a white band on the short edge (#117). The logical screen resolution and border width live inlib/device-metrics, and a unit test locks the invariant that the inner screen ratio always equals the declaredscreenratio.
modelandwidthchange only the body width; the height follows from the screen ratio, so the body aspect ratio shifts slightly with width. That is correct behaviour, because the border does not scale. Clip at an outer layer if you need a different shape.- When both
imageSrcandchildrenare provided,imageSrctakes precedence.
Related
Playground
<IPhone model="15-pro">
<img src="/app.png" />
</IPhone>