@freedomcore/panel-layout

Vanilla JavaScript split-pane layout system with resizable panels, collapse/expand, and localStorage persistence.

Installation

npm install @freedomcore/panel-layout

Usage

<link rel="stylesheet" href="node_modules/@freedomcore/panel-layout/panel-layout.css">

<panel-branch-fc id="app" row>
  <panel-leaf-fc id="sidebar" fixed style="--panel-basis: 220px;">
    Sidebar
  </panel-leaf-fc>
  <panel-splitter-fc></panel-splitter-fc>
  <panel-leaf-fc id="main">
    Main content
  </panel-leaf-fc>
</panel-branch-fc>

<script type="module">
  import { initPanelLayout } from '@freedomcore/panel-layout';
  initPanelLayout();
</script>

Attributes

| Element | Attribute | Description | |---------|-----------|-------------| | panel-branch-fc | row | Horizontal layout | | panel-branch-fc | column | Vertical layout | | panel-leaf-fc | fixed | Use --panel-basis for initial size | | panel-leaf-fc | id | Required for persistence |

CSS Variables

--panel-basis: 200px;      /* Fixed panel size */
--splitter-color: #444;    /* Splitter default color */
--splitter-hover: #666;    /* Splitter hover color */
--danger: #ff4444;         /* Snap-close indicator */

Events

document.addEventListener('panel-layout-changed', (e) => {
  console.log('Layout changed:', e.detail);
});

License

MIT © FreedomCore