<mr-panel>
The <mr-panel>
tag creates a 2.5D UI panel.
Currently limited to one UI panel per app
Example
<mr-app>
<mr-panel class="…">
…</mr-panel>
…</mr-app>
Definition and Usage
The <mr-panel>
tag initializes and manages 2D interface elements, such as images, text, and buttons.
Spatial Responsive Design
When viewed on a 2D screen, an mr-panel
positions itself to fill the viewport, rendering itself and behaving like any 2D web app, responding to keyboard and mouse input or touch events.
In mixed-reality, the panel behaves like a floating touch screen, clipping any content that extends beyond its boundaries.
2.5D UI
MRjs supports 2.5D UI, adding a bit of depth to buttons, and incorporating 3D content such as the <mr-model>
tag.
<mr-panel>
<mr-model src="…"></mr-model>
<mr-button onclick="…">Click me</mr-button>
</mr-panel>