Material Next
Home Install Components Marketing hub API Roadmap Changelog

Marketing hub elements

Preview controls

The hub's preview settings toolbar: theme, system navigation, palette and device frame, with a reset.

Experimental<mnw-preview-controls>

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

Overview

<mnw-preview-controls> holds the hub's preview settings. It shows the current PreviewSettings with Material Web components (segmented buttons for theme and navigation, a select for the palette, a switch for the device frame) and a Reset action once anything differs from defaults. The marketing shell shows one in a panel opened by the Preview settings button (tune) in its top app bar, with layout="stacked": one control per row, as wide as the panel. The default layout="bar" is one wrapping row, for a custom hub page.

Live demo





The page owns the settings: each settings-change is applied and passed back.




<mnw-preview-controls></mnw-preview-controls>
<pre class="demo-log" aria-live="polite"></pre>
import {DEFAULT_PREVIEW_SETTINGS} from 'material-next-web-components/marketing.js';
import type {MaterialNextPreviewControls} from 'material-next-web-components/marketing.js';

export default (root: HTMLElement) => {
  const controls = root.querySelector<MaterialNextPreviewControls>(
    'mnw-preview-controls'
  )!;
  const log = root.querySelector('.demo-log')!;
  controls.palettes = ['ocean', 'clay'];
  controls.defaults = DEFAULT_PREVIEW_SETTINGS;
  controls.settings = DEFAULT_PREVIEW_SETTINGS;
  log.textContent = JSON.stringify(controls.settings);
  // Controlled: the element reports a choice, the page owns the settings.
  controls.addEventListener('settings-change', (event) => {
    controls.settings = event.detail;
    log.textContent = `settings-change ${JSON.stringify(event.detail)}`;
  });
};


Settings


PreviewSettings is:






Field
Type
Default






theme
'system' | 'light' | 'dark'
'system'




navType
'gesture' | 'buttons'
'gesture'




palette
string: a palette name, or 'captured' for each screen's own
'captured'




deviceFrame
boolean
false






settings-change carries the complete new settings, not a patch. Reset sends defaults. The palette select appears only when palettes is not empty, and always offers "As captured" first.


API


The hub-wide preview settings: theme, system navigation, palette and the
device frame, with a reset once anything differs from the defaults.
<mnw-preview-controls> properties
PropertyAttributeTypeDefaultDescription
settingsProperty onlyPreviewSettingsDEFAULT_PREVIEW_SETTINGSThe settings to show.
defaultsProperty onlyPreviewSettingsDEFAULT_PREVIEW_SETTINGSSettings that Reset sends; Reset shows while settings differ from them.
layoutlayout'bar' | 'stacked''bar'bar: one wrapping row. stacked: one control per row, full width, for a panel.
palettesProperty onlyreadonly string[][]The app's palette names; "As captured" is always offered first.
<mnw-preview-controls> events
EventDescription
settings-changeThe new settings, as detail.


Accessibility


    

  • The bar is a toolbar named "Preview settings"; every group has a visible label over a 40px control.
    • 

  • The segmented buttons and the select are named ("Preview theme", "System navigation", "Palette"), and the switch "Device frame".
    • 



Limitations


    

  • Window size (phone, fold, desktop) is a prototype-page setting, in the screen inspector, not here.
    • 




  

  


        

      
      
        
        
        
        
        mail