1 - Basic Re-Flex example:
The most basic example with two fixed panes vertically arranged. By default each ReflexElement
will be equally arranged within its ReflexContainer. To specify a custom arrangement, you can use flex={number in [0.0, 1.0]}
property.
2 - Basic Re-Flex example with splitter:
Basic example with two resizable panes vertically arranged: placing a ReflexSplitter
draggable component between two ReflexElements will allow those elements to be manually resized by user.
3 - Re-Flex example with splitter propagation (2x):
Example with two splitters propagating the drag: this is where Re-Flex really makes the difference between any other
layout library you can find out there.
Setting the propagate={true}
property on the ReflexSplitter components will propagate the drag all the way from right to left or
left to right (respectively up and down for an horizontal layout) depending on user interaction. In that demo minSize
and maxSize properties are also specified on the middle pane, Re-Flex will respect those attributes when dragging
and propagating the offset applied by user.
4 - Re-Flex example with splitter propagation (3x):
Example with three splitters propagating the drag, same as example above but one more splitter just for fun ...
5 - Advanced Re-Flex example:
A more advanced example with multi-nested resizable layouts using events: while dragging a splitter
the affected panes will get a different background color, illustrating how you can use Re-Flex events to
perform some additional custom logic.
Try the sample below and judge the power of Re-Flex ...
6 - Controlled elements Re-Flex example:
A more verbose example that illustrates how to programmatically control the size of ReflexElements.
Clicking the (- / +) buttons in the control bar above each pane will respectively minimize or
maximize that pane into the allocated layout space.
Clicking the (=) button will lock the pane to its current size. Click the button again to unlock it.