Liquid Float Layout

A flexible floating layout system that allows elements to flow and position themselves dynamically based on content and available space.

Overview

The Liquid Float Layout provides a fluid positioning system where elements can float and reposition themselves naturally, similar to how liquid adapts to its container. This layout is particularly useful for tool panels, menus, and dynamic content that needs to adapt to varying screen sizes and content lengths.

Basic Usage

Main Content

FPS
Maxlen
Render content
Group 1
Group 3
Object 1
Object 2
Object 7
Group 2
Group 4
Object 3
Object 4
Group 5
Object 5
Object 6
<LiquidLayoutView
  left={<SceneGraph cardClassName="h-full"/>}
  right={<ControlTabs/>}
  top={<TopToolbar/>}
  bottom={<PlaybackControl/>}
>
  <MainPlaceholder/>
</LiquidLayoutView>