Material Next
Home Install Components Marketing hub API Roadmap Changelog

Marketing hub elements

Prototype layout

The prototype page's frame: the inspector panel on the leading side and a stage for the live screen.

Experimental<mnw-prototype-layout>

import 'material-next-web-components/marketing.js';
On this page

Overview

<mnw-prototype-layout> is a two-column page: a 360px panel slot on the leading side (usually an mnw-screen-inspector) and a stage slot for the live screen. The stage is sticky, fills the window's height and scrolls if its content is larger. Below 1000px the two stack, panel first.

mountScreenPrototype() renders it. Both slots stay in light DOM, so the app's CSS reaches the screen on the stage.

Live demo

The sample app's prototype page. Change the window, open Compare, or use the screen's own controls.

Capture view opens the bare screen, as a capture script loads it.
<mnw-prototype-layout>
  <mnw-screen-inspector slot="panel"></mnw-screen-inspector>
  <div slot="stage"><!-- the screen hosts render here --></div>
</mnw-prototype-layout>

API

The prototype page's frame: a side panel on the leading side, where the back button and the controls start, and a stage for the live screen.

<mnw-prototype-layout> slots
SlotDescription
stageLight-DOM container the screen hosts render into.
panelUsually an mnw-screen-inspector.

Accessibility

  • The panel is an <aside> and comes first in the page, so keyboard users reach "All screens" and the controls before the screen.
  • The stage is a <section> named "Screen preview".

Limitations

  • It is a full page (min-height: 100vh) with a stage sized to the viewport; it does not fit inside another layout.
 mail