Device
@sushindustries/uiA phone, a tablet or a laptop in CSS 3D, chosen by the stylesheet rather than by JavaScript, with a real screen in it.
Props
| Prop | Type | Default | Does |
|---|---|---|---|
children | ReactNode | - | The desktop. It scrolls on its own and chains at the end. |
kind? | DeviceKind | - | Which machine to draw. Left off, the stylesheet decides from the width of the window: a phone, a tablet from 720px, a laptop from 1080px. Set it and that choice wins everywhere, which is what a Settings panel writes and what a showcase uses to put all three on one page. |
wallpaper? | ReactNode | - | Drawn behind the desktop, and never in the way of a click. |
title? | string | - | Shown in the strip at the top of the screen. |
toolbar? | ReactNode | - | Also in the strip, right-aligned. A search field, a clock, a count. |
dock? | ReactNode | - | Pinned along the bottom of the screen, below the scrolling desktop. |
Notes
title and toolbar share one strip: with both unset, no strip renders at
all, rather than an empty bar. wallpaper sits behind children and is
marked aria-hidden, so it never intercepts a click meant for the desktop in
front of it.
kind does not change what gets rendered, only which CSS rule wins - every
piece of chrome for every machine is always in the DOM. Leaving it unset is
not "undecided", it means "let the media query decide", which is the only
mode that has no purely-client behaviour to hydrate into.