Layout v1.0.0

Layout Splitter

Resizable layout component with draggable dividers for creating adjustable panel layouts. Supports horizontal and vertical directions, size constraints, and optional localStorage persistence.

Preview & Code

_layout_splitter.html.erb

███
  ██████ ████████ █████████ █████████

  █ █████████ ██████ █████████ ████ █████████ ████████ ███ ████████ ██████████ █████ ████████

  ██████
    ██████████ ██████████
    ███ ██████ ██████████████████████████████████ ███████ █
      █ ████████ █████ █████ ████████ ██
      █ ████████ ██████ █████ ████████ █

Get Access to View Code

layout_splitter_controller.js

██████ █ ██████████ █ ████ ████████████████████

██████ ███████ █████ ███████ ██████████ █
  ██████ ███████ █ █████████ █████████
  ██████ ██████ █ █
    ██████████ █ █████ ███████ ████████ ████████████ ██
    ███████ █ █████ ███████ ████████ █████████ ██
    ████████ █ █████ ████████ ████████ █████ ██
    ███████████ █ █████ ███████ ████████ ██ ██
    ████████ █ █████ ███████ ████████ ██ ██

Get Access to View Code

layout_splitter_component.html.erb

████ ██████████ █████████████████ ███ ███ ███████████████████ █ ███ ██ ████████████████████ ████████ ████████████ ███
  ██ ██████████████████████ ██ ███████ ██████ ██
    ███ █████ ██
    ████ ██████████ █████████████ ███ ████████████████████████████████████
      ███ █████ ██
    ██████

    ███ ██████ ████████ ███████ ███ █████ █████ ██
    ██ ██ █████ █ ███████████ █ █ ██
      ████ ██████████ ██████████████ ███

Get Access to View Code

layout_splitter_component.rb

█ ██████████████████████ ████

█████ ███████████████████████ █ ███████████████████
  ████████████ ████████ █████████████ █
    █████████████████████████████████████████████
  █

  ███ ███████████
    ██████████ ████████████
    ███████ █████████

Get Access to View Code

layout_splitter_controller.js

██████ █ ██████████ █ ████ ████████████████████

██████ ███████ █████ ███████ ██████████ █
  ██████ ███████ █ █████████ █████████
  ██████ ██████ █ █
    ██████████ █ █████ ███████ ████████ ████████████ ██
    ███████ █ █████ ███████ ████████ █████████ ██
    ████████ █ █████ ████████ ████████ █████ ██
    ███████████ █ █████ ███████ ████████ ██ ██
    ████████ █ █████ ███████ ████████ ██ ██

Get Access to View Code

Options

Name	Type	Default	Description
`direction`	Symbol	`:horizontal`	Layout direction: :horizontal or :vertical
`handle`	Symbol	`:minimal`	Handle style: :minimal (thin line) or :visible (with grip dots)
`persist`	Boolean	`false`	Save panel sizes to localStorage
`persist_key`	String	`nil`	Custom localStorage key (auto-generated if nil)
`min_size`	String/Integer	`nil`	Minimum panel size in pixels (e.g., 100) or percentage (e.g., '20%')
`max_size`	String/Integer	`nil`	Maximum panel size in pixels (e.g., 500) or percentage (e.g., '80%')
`initial_sizes`	Array	`nil`	Initial panel sizes as percentages (e.g., [30, 70])
`class`	String	`""`	Additional CSS classes for the container

Name	Type	Default	Description
`direction`	Symbol	`:horizontal`	Layout direction: :horizontal or :vertical
`handle`	Symbol	`:minimal`	Handle style: :minimal (thin line) or :visible (with grip dots)
`persist`	Boolean	`false`	Save panel sizes to localStorage
`persist_key`	String	`nil`	Custom localStorage key (auto-generated if nil)
`min_size`	String/Integer	`nil`	Minimum panel size in pixels (e.g., 100) or percentage (e.g., '20%')
`max_size`	String/Integer	`nil`	Maximum panel size in pixels (e.g., 500) or percentage (e.g., '80%')
`initial_sizes`	Array	`nil`	Initial panel sizes as percentages (e.g., [30, 70])

Slots

Name	Description
`panel`	Content panels (2 or more) that can be resized

Changelog v1.0.0

- v1.0.0: Initial release with horizontal/vertical layouts, size constraints, and persistence

Get Full Access

Unlock the source code for this component and all others. One-time payment for lifetime access.

Get Access Now