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
- The proportion of the fuselage is uniformly fixed by
aspectRatioin the component.model/widthonly changes the width but not the aspect ratio; if you want other proportions, you need to cut the outer layer yourself. - When both
imageSrcandchildrenare provided,imageSrctakes precedence.
Related
Playground
<IPhone model="15-pro">
<img src="/app.png" />
</IPhone>