Tablet
tabletFrames content inside a tablet device mockup.
Usage
Basic usage
iPad is a tablet casing that wraps the screen content. The default model is iPad Pro 11.
<Tablet>
<img src="/app.png" alt="" />
</Tablet>Select model
model Switch the default model and determine the default width and body ratio.
<Tablet model="ipad-pro-13">
<img src="/app.png" alt="" />
</Tablet>Custom width
width When passed in explicitly, priority will be given to overwriting the model's default width (the body proportions will still depend on the model).
<Tablet model="ipad-mini" width={200}>
<img src="/app.png" alt="" />
</Tablet>Picture content
Pass imageSrc and directly render the App screenshot (priority to children).
<Tablet model="ipad-pro-11" imageSrc="/app.png" />When to Use
Wrap app/webpage screenshots into iPad series tablet body frames for display, covering iPad Pro/Air/mini series models (the aspect ratios of each model are different). For the phone body, use iPhone/Android, and for the browser window frame, use Safari/Chrome.
Import
import { Tablet, TABLET_MODELS } from "@hulianui/ui"Props
Inherited from ComponentPropsWithoutRef<"div">. TABLET_MODELS export model→{ width, aspectRatio } mapping constant.
| Name | Type | Default | Description |
|---|---|---|---|
| model | "ipad-pro-13" | "ipad-pro-11" | "ipad-air-11" | "ipad-10" | "ipad-mini" | - | Optional model used to select a predefined width and aspect ratio; the showcase uses "ipad-pro-11" |
| width | number | Model width or 320 | Device width in pixels; an explicit value overrides the selected model's width |
| imageSrc | string | - | Screen image URL; takes precedence over children |
Slots
| Slot | Type | Description |
|---|---|---|
| children | ReactNode | Custom screen content |
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.
- Unlike iPhone and Android frames, iPad generations really do differ in aspect ratio, so when `model` is set explicitly the body ratio comes from that model's
aspectRatioandwidthonly overrides the width. Withoutmodel, the default tier derives its height from the screen ratio and the border, and PreviewSandbox never passesmodel, so that is the path it takes. - When both
imageSrcandchildrenare provided,imageSrctakes priority.
Related
Playground
<Tablet model="ipad-pro-11">
<img src="/app.png" />
</Tablet>