Window

Window

The <ph-window> element is the main element for each application.

<ph-window>
  ...
</ph-window>

To make a macOS vibrancy effect appear, set the vibrancy's type in the data-vibrancy attribute. The possible types depend on electron. The are listed on Electron Browser Window.

Window Content

The <window-content> element is used to define the window's real content after the header toolbar and before the footer toolbar. It is recommended to use it within the <ph-window> element.

<ph-window>
  ...
  <window-content>
    ...
  </window-content>
  ...
</ph-window>

Context

A <ph-window> itself does not look very interesting. To make the magic happen, you should combine it with <window-content> & <tool-bar>'s.

In this example, you see both <tool-bar>'s and <window-content>.

<ph-window class="vibrancy">
  <tool-bar type="header">
    <h1 class="title">Toolbar Header</h1>
  </tool-bar>

  <window-content>
    ...
  </window-content>

  <tool-bar type="footer">
    <h1 class="title">Toolbar Footer</h1>
  </tool-bar>
</ph-window>

Vibrancy

The data-vibrancy attribute makes your window supporting macOS vibrancy. This means that the <window-content> is basically transparent expect in the case you define your own background color. And some elements such as <list-group> are semi-transparent and look like you know from macOS.