Split Panel

Resizable split container with snap points and vertical mode.

<rhx-split-panel>

Examples

Horizontal

Sidebar

Navigation or filter panel. Drag the divider to resize.

Main Content

Primary content area. The end panel takes the remaining space.

<rhx-split-panel rhx-position="30">
    <rhx-split-start>
        <div style="padding: var(--rhx-space-lg);">
            <h4 style="margin:0 0 var(--rhx-space-sm) 0;">Sidebar</h4>
            <p>Navigation or filter panel. Drag the divider to resize.</p>
        </div>
    </rhx-split-start>
    <rhx-split-end>
        <div style="padding: var(--rhx-space-lg);">
            <h4 style="margin:0 0 var(--rhx-space-sm) 0;">Main Content</h4>
            <p>Primary content area. The end panel takes the remaining space.</p>
        </div>
    </rhx-split-end>
</rhx-split-panel>

Vertical

Editor

Code or text editing area.

Output

Console or preview area below the editor.

<rhx-split-panel rhx-position="40" rhx-vertical>
    <rhx-split-start>
        <div style="padding: var(--rhx-space-lg);">
            <h4 style="margin:0 0 var(--rhx-space-sm) 0;">Editor</h4>
            <p>Code or text editing area.</p>
        </div>
    </rhx-split-start>
    <rhx-split-end>
        <div style="padding: var(--rhx-space-lg);">
            <h4 style="margin:0 0 var(--rhx-space-sm) 0;">Output</h4>
            <p>Console or preview area below the editor.</p>
        </div>
    </rhx-split-end>
</rhx-split-panel>

Snap Points

Drag and feel the snap points.

The divider snaps at 25%, 50%, and 75%.

<rhx-split-panel rhx-position="50" rhx-snap="25,50,75">
    <rhx-split-start>
        <div style="padding: var(--rhx-space-lg);">
            <p>Drag and feel the snap points.</p>
        </div>
    </rhx-split-start>
    <rhx-split-end>
        <div style="padding: var(--rhx-space-lg);">
            <p>The divider snaps at 25%, 50%, and 75%.</p>
        </div>
    </rhx-split-end>
</rhx-split-panel>

Disabled

Fixed start panel (60%).

Fixed end panel (40%).

<rhx-split-panel rhx-position="60" rhx-disabled>
    <rhx-split-start>
        <div style="padding: var(--rhx-space-lg);">
            <p>Fixed start panel (60%).</p>
        </div>
    </rhx-split-start>
    <rhx-split-end>
        <div style="padding: var(--rhx-space-lg);">
            <p>Fixed end panel (40%).</p>
        </div>
    </rhx-split-end>
</rhx-split-panel>

Properties

Property	Type	Default	Description
`rhx-position`	`int`	`50`	Initial divider position as a percentage (0-100)
`rhx-vertical`	`bool`	`false`	Use vertical (top/bottom) layout instead of horizontal
`rhx-snap`	`string`	`-`	Comma-separated snap point percentages (e.g. "25,50,75")
`rhx-disabled`	`bool`	`false`	Prevents dragging the divider