PhotonPanes

Panes

This component provides graphical panes and a JS controller for sizing them.

Pane Group

<div class="pane-group">
  <!--Panes here-->
</div>

Pane

<div class="pane-group">

  <div class="pane">...</div>
  <div class="pane">...</div>
  <div class="pane">...</div>

</div>

Sidebar Pane

<div class="pane-group">
  <!--Sidebar here-->
  <div class="pane-sm sidebar">...</div>
  <!--Main pane-->
  <div class="pane">...</div>
</div>

Sizing

Every pane is sizeable.

Min Width

To set a pane's minimal width, just use the CSS property min-width.

<div class="pane-group">

  <div class="pane" style="min-width: 250px;">...</div>
  <div class="pane">...</div>

</div>

Max Width

To set a pane's maximal width, just use the CSS property max-width.

<div class="pane-group">

  <div class="pane" style="max-width: 500px;">...</div>
  <div class="pane">...</div>

</div>

API

To recognize when a pane is used to be resized, just listen to the resize event on your pane or its parents. (Event is bubbling up).