<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.

Welcome to my app

You will be asked a few questions.

Get started

mr-panel { background-color: white; display: flex; flex-flow: column nowrap; align-items: center; justify-content: center; width: 100vw; height: 100vh; } .title { font-size: 150%; font-weight: 700; letter-spacing: 1px; } .subtitle { font-size: 100%; font-weight: 400; margin-bottom: 20px; }

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>