The browser-mockup element

Default Example

Any child html (that is not assigned a slot) will be rendered inside the mockup document.

Assign an element's slot attribute to "tab" to render that child as a tab element.

If a child element is assigned to the tab slot, and has a class of "selected" that tab will appear selected. If no tab has a "selected" class, the first tab will be assigned that class.

Custom URL

Use the url attribute to set the path in the mockup.

Simple Customization Example

"tabs" attribute set to 2:
Two random tabs, with labels
"collapsed-tabs" attribute set to 3:
Three random collapsed tabs, showing only icons
"url" attribute set to "https://shop.mydomain.com":
The mockup url is set to "https://shop.mydomain.com"
"windows" class added to element's "class" attribute:
Mockup winform controls added to the top right.
A child element with the "slot" attribute set to tab:
That child element added to the mockup tabs.
The custom tab element has a "data-label" attribute set to "My Domain - Shop":
The mockup tab's label is set to "My Domain - Shop".
The custom tab element does not have a "data-icon" attribute set:
A random icon is assigned to the tab on each page load.
There is a custom tab element child, and no child elements have a "selected" class assigned to them:
The first tab (the custom tab element) is marked as selected.

Nesting

`<browser-window>` elements can be nested.

Windows Controls

Add a class of 'windows' to add mockup form buttons from that operating system.

MacOS Controls

Add a class of 'macos' to add mockup form buttons from that operating system.

Random Tabs

Using the tabs and collapsed-tabs attributes injects randomly generated tabs into the mockup.

Uses a random icon from a small set of unicode characters:
♔♕♖♗♘♙♚♛♜♝♞♟♠♣♥♦♡♢♤♧
Uses a random label from a short list of nonsense words:
Tabbr
Browsr
Demor
Mockr
Presentr
Showcasr
Samplr
Playr
Chessr
Suitr

Custom Tabs

Set the slot attribute on child elements to "tab".

  • Set the child elements, explicitly for a fully custom tab.
  • Use the data-icon attribute to create a collapsed tab with a custom icon.
  • Use the data-label attribute to create a tab with a custom label and a random icon.
  • Use both of the data-icon and data-label attributes to create a tab with a custom label and a custom icon.
  • Tabs are ordered as:
    1. Fully Custom Tabs
    2. Random Tabs
    3. Custom Collapsed Tabs
    4. Random Collapsed Tabs
✓ Fully Custom Tab