Stylish UI/com.segnities007.stylishui.components.molecules/StylishSplitter

StylishSplitter

fun StylishSplitter(first: @Composable () -> Unit, second: @Composable () -> Unit, modifier: Modifier = Modifier, direction: StylishSplitterDirection = StylishSplitterDirection.Horizontal, ratio: Float = 0.5f, onRatioChange: (Float) -> Unit? = null, minRatio: Float = 0.1f, maxRatio: Float = 0.9f, handleSize: Dp = 8.dp, handleColor: Color = MaterialTheme.colorScheme.outlineVariant, handleActiveColor: Color = MaterialTheme.colorScheme.primary)

A draggable split panel — the web "Splitter/Resizable" pattern from Ant Design and Radix UI.

Lays first and second out side by side (or stacked) with a drag handle between them. Dragging the handle resizes the panels within minRatio..maxRatio of the total size. The split ratio is managed internally; hoist it via ratio/onRatioChange to control it from the caller.

Parameters

first

Content of the first panel.

second

Content of the second panel.

modifier

Modifier applied to the root container.

direction

Whether the panels split horizontally or vertically.

ratio

Current split ratio (0..1) of the first panel. Defaults to 0.5. When onRatioChange is null, this is the initial value and the component manages the ratio internally.

onRatioChange

Optional callback invoked while dragging. When null, the component manages the ratio internally.

minRatio

Minimum fraction of the first panel. Defaults to 0.1.

maxRatio

Maximum fraction of the first panel. Defaults to 0.9.

handleSize

Thickness of the drag handle. Defaults to 8 dp.

handleColor

Color of the handle at rest. Defaults to MaterialTheme.colorScheme.outlineVariant.

handleActiveColor

Color of the handle while dragging. Defaults to MaterialTheme.colorScheme.primary.