Live Pane
InstallationResizable panes for Phoenix and LiveView. Despite the name, it works on dead views too!
LivePane provides a client-side dependency-free set of hooks and components to easily create resizable panels in your Phoenix applications. This project has taken a lot of inspiration and code from the work done by PaneForge and react-resizable-panels.
It is a work in progress!
Here's an example of the functionality with some nested panes:
One
Two
Three
Features
- Simple Components: LivePane uses just 3 components: LivePane.group, LivePane.pane, and LivePane.resizer.
- Resizable Panes: Panes can be resized by dragging the resizer between them with the mouse, by touch or by keyboard.
- Nested Groups: Groups of panes can be nested inside other groups to create complex layouts.
- Customizable: These components can be customized with Tailwind or your own CSS classes like any other Phoenix component.
- Persistent Layouts: LivePane can use the LocalStorage to persist the sizes of the panes between page loads.
- Accessible: LivePane is designed to be accessible to all users, including those who use assistive technologies.