Nested Groups

An example of nesting groups of panes for more complex layouts.

One
Two
Three

Anatomy

          
 <LivePane.group id="demo">
  <LivePane.pane group_id="demo" id="demo_pane_1">
      <!-- ... content here -->
  </LivePane.pane>

  <LivePane.resizer id="demo-resizer" group_id="demo">
    <!-- your handle here -->
  </LivePane.resizer>

  <LivePane.pane group_id="demo" id="demo_pane_2">
    <LivePane.group id="innerdemo" direction="vertical">
      <LivePane.pane group_id="innerdemo" id="innerdemo_pane_1"
          <!-- ... content here -->
      </LivePane.pane>

      <LivePane.resizer id="innerdemo-resizer" group_id="innerdemo">
        <!-- your handle here -->
      </LivePane.resizer>
      <LivePane.pane group_id="innerdemo" id="innerdemo_pane_2"
          <!-- ... content here -->
      </LivePane.pane>
    </LivePane.group>
  </LivePane.pane>
</LivePane.group>