SplitPane

The SplitPane component creates a resizable split view, allowing users to adjust the size of two adjacent panels.

Usage

SplitPane(
    orientation = "horizontal",
    modifier = Modifier().height(400.px),
    first = {
        Box(modifier = Modifier().backgroundColor("#eee").fillMaxSize()) {
            Text("Left Pane")
        }
    },
    second = {
        Box(modifier = Modifier().backgroundColor("#ddd").fillMaxSize()) {
            Text("Right Pane")
        }
    }
)

Parameters

| Name | Type | Description | | :--- | :--- | :--- | | orientation | String | The orientation of the split ("horizontal" or "vertical"). | | modifier | Modifier | The modifier to apply to the container. | | first | @Composable () -> Unit | The content of the first (left or top) pane. | | second | @Composable () -> Unit | The content of the second (right or bottom) pane. |

Platform Support

| Platform | Support | Notes | | :--- | :--- | :--- | | JVM (SSR) | Partial | Renders the initial layout. Resizing functionality requires client-side JavaScript. | | JS (Client) | Full | Renders a fully interactive resizable split pane. | | Wasm (Client) | Full | Renders a fully interactive resizable split pane. |