Collapsible Panes

You can use the collapsedSize and collapsible props to create collapsible panes. The collapsedSize prop sets the size of the pane when it is in a collapsed state, and the collapsible prop determines whether the pane can be collapsed.

Pane hooks also listen to the collapse and expand events that you can send from the server-side (you must pass the pane_id!). As the names suggest, the collapse event collapses the pane and the expand event expands it (to its last size). You can use

push_event("collapse", %{pane_id: "the_pane_id"})

The collapsible pane is set with a min_size of 15% and a collapsed size of 5%.

Anatomy

          
<LivePane.group id="demo" direction="horizontal">
  <LivePane.pane
    group_id="demo"
    id="demo_pane_1"
    starting_size={50}
    collapsed_size={5}
    collapsible={true}
    min_size={15}>
      <!-- ... 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" default_sise={50}>
      <!-- ... content here -->
  </LivePane.pane>
</LivePane.group>