Appearance
Panels
The panel is the surface that holds your views. Select the Panel row at the top of the hierarchy to see its settings.
| Setting | Options |
|---|---|
| Size | Hug, Fill, Fixed (width and height in points) |
| Material | System (with a Prominence of Standard or Expressive), Solid (a colour), Transparent |
| Corner Radius | 0–32 pt, default 8 |
| Scrollable | on or off |
| Hide in Captures | on or off – screen-space panels only |
Size
- Hug (the default) – the panel wraps its content. It grows until it is about 1 m wide in the world (1360 pt); past that, labels wrap onto more lines instead of the panel getting wider. A Hug panel is never smaller than 44 × 44 pt.
- Fixed – an exact width and height in points. Switching to Fixed starts at 320 × 200 pt.
- Fill – for a screen-space panel, the panel covers the whole screen. Its background runs edge to edge while its content stays inside the safe area. A panel placed in the world has nothing to fill, so Fill sizes it the same way as Hug.
In the world, 1360 points make about one metre. A 340 pt wide panel is roughly 25 cm across, and a 15 pt label is about 1 cm tall. Pick sizes with the viewing distance in mind: text that is comfortable on a phone screen can be small on a panel two metres away. Scaling the object in the main editor scales the whole panel.
Fixed for steady layouts
A Hug panel re-measures itself whenever its content changes width – a counter gaining a digit, a longer place name. That is often what you want. Choose Fixed when the panel sits beside other content and should keep its outline while its values change.
Material
The material is the panel's background.
- System – a translucent surface that lets the scene behind it show through. Its Prominence is Standard or Expressive.
- Solid – a flat colour you pick, including its opacity.
- Transparent – no background. Only the views themselves are drawn, which suits floating labels and buttons that carry their own fill.
What System looks like depends on where the panel is:
| Placed in the world | Screen space | |
|---|---|---|
| iPhone, iPad, Mac | Frosted glass that blurs the scene behind it | A system blur. Standard is a thin material; Expressive is an ultra-thin, more see-through one |
| Apple Vision Pro | The system's own window glass | – |
Prominence changes only screen-space panels on iPhone, iPad and Mac. A panel in the world uses the same glass for both values.
Panels always render in dark appearance, whatever the device setting: light text on a dark, translucent surface. Choose colours that read well on a dark backdrop, or use a Solid material when you need a light panel.
Corner Radius
Rounds the panel's corners, from 0 to 32 pt. The corners use the same continuous curve as system windows. Views inside the panel are clipped to it.
Scrollable
With Scrollable on, content taller than the panel scrolls vertically – drag on an empty part of the panel to scroll it. Scrolling needs a panel of Fixed size: with Hug or Fill the panel simply grows to fit its content, so there is nothing to scroll.
With Scrollable off, a Fixed panel clips whatever doesn't fit.
Hide in Captures
Shown only when the object uses a Screen Space anchor on at least one device. When on, the panel disappears while someone takes a photo or records a video in the experience, so a shared capture shows the scene without your HUD over it. It reappears as soon as capturing ends.
A panel placed in the world is part of the scene and always appears in captures.
Touches on screen-space panels
A screen-space panel sits above the scene, so its Material also decides what happens to touches that miss a control:
- Transparent – taps and drags on empty areas pass through to the scene behind, so a HUD of a few buttons doesn't stop people moving around.
- System or Solid – the panel is a visible surface and absorbs those touches, like a card.
Controls always receive their own taps. Labels, images and shapes take a tap only when you've given them an event; otherwise touches pass through them.
Interacting with a panel in the world
On iPhone and iPad people tap the panel's controls directly on screen; on Mac they click them; on Vision Pro they look and pinch, or touch the panel directly. Dragging a slider, scrolling a Scrollable panel and typing all work on every device:
- Tapping a text field on iPhone, iPad or Mac opens a text entry prompt with the keyboard. On Vision Pro the field is edited in place.
- A web view inside a world panel takes touches on Vision Pro. On iPhone, iPad and Mac it shows the page but doesn't take touches; put a web page people need to scroll or tap into a screen-space panel there.
A panel in the world is an ordinary object, so everything else in the inspector still applies: object events such as On Tap, gestures, reveal animations, and the Billboard alignment constraint to keep it facing the viewer.