Resizable

Default

One
Two
Three
      <%= render RailsUi::Resizable::Component.new(
      direction: "horizontal",
      panels: [
        {
          defaultSize: 50,
          content: "One"
        },
        {
          defaultSize: 50,
          direction: "vertical",
          children: [
            {
              defaultSize: 25,
              content: "Two"
            },
            {
              defaultSize: 75,
              content: "Three"
            }
          ]
        }
      ]
    ) %>

sizes

Sidebar
Content
      <%= render RailsUi::Resizable::Component.new(
      direction: "horizontal",
      panels: [
        {
          defaultSize: 31.7,
          content: "Sidebar"
        },
        {
          defaultSize: 68.3,
          content: "Content"
        }
      ]
    ) %>

Custom render

red!

Content
      <%= render RailsUi::Resizable::Component.new(
      direction: "horizontal",
      panels: [
        {
          defaultSize: 31.7,
          content: -> {
            "<p class='text-red-300'>red!</p>"
          }
        },
        {
          defaultSize: 68.3,
          content: "Content"
        }
      ]
    ) %>