Split view

A resizable container that splits its space between two or more FluxSplitViewPane children. Drag the handle between panes with mouse, touch, or keyboard to resize. Optionally persist sizes via remember-key.

Sidebar

Main content

TIP

Each pane is configured via props on FluxSplitViewPane — see the pane reference.

Props

direction?: 'horizontal' | 'vertical'
The orientation of the split.
Default: horizontal

remember-key?: string
When set, pane sizes are persisted in `localStorage` under this key and restored on the next visit.

tag?: keyof HTMLElementTagNameMap
The HTML tag to use for the split view container.
Default: div

Slots

default
A series of `FluxSplitViewPane` components, separated by drag handles.

Examples

Horizontal

A horizontal split with two panes.

Preview

Left

Right

Code

<template>
    <FluxSplitView style="height: 240px; width: 100%; border: 1px solid var(--surface-stroke); border-radius: 6px">
        <FluxSplitViewPane :default-size="180">
            <div style="padding: 12px">Left</div>
        </FluxSplitViewPane>

        <FluxSplitViewPane>
            <div style="padding: 12px">Right</div>
        </FluxSplitViewPane>
    </FluxSplitView>
</template>

<script
    setup
    lang="ts">
    import { FluxSplitView, FluxSplitViewPane } from '@flux-ui/components';
</script>

Vertical

A vertical split.

Preview

Top

Bottom

Code

<template>
    <FluxSplitView
        direction="vertical"
        style="height: 280px; width: 100%; border: 1px solid var(--surface-stroke); border-radius: 6px">
        <FluxSplitViewPane :default-size="100">
            <div style="padding: 12px">Top</div>
        </FluxSplitViewPane>

        <FluxSplitViewPane>
            <div style="padding: 12px">Bottom</div>
        </FluxSplitViewPane>
    </FluxSplitView>
</template>

<script
    setup
    lang="ts">
    import { FluxSplitView, FluxSplitViewPane } from '@flux-ui/components';
</script>

Persisted

Use `remember-key` to keep pane sizes between sessions.

Preview

Resize me — your size persists.

Reload the page to confirm.

Code

<template>
    <FluxSplitView
        remember-key="docs-persisted-example"
        style="height: 240px; width: 100%; border: 1px solid var(--surface-stroke); border-radius: 6px">
        <FluxSplitViewPane :default-size="180">
            <div style="padding: 12px">Resize me — your size persists.</div>
        </FluxSplitViewPane>

        <FluxSplitViewPane>
            <div style="padding: 12px">Reload the page to confirm.</div>
        </FluxSplitViewPane>
    </FluxSplitView>
</template>

<script
    setup
    lang="ts">
    import { FluxSplitView, FluxSplitViewPane } from '@flux-ui/components';
</script>

Nested

Nest split views to build complex layouts.

Preview

Sidebar

Top pane

Bottom pane

Code

<template>
    <FluxSplitView style="height: 280px; width: 100%; border: 1px solid var(--surface-stroke); border-radius: 6px">
        <FluxSplitViewPane :default-size="160">
            <div style="padding: 12px">Sidebar</div>
        </FluxSplitViewPane>

        <FluxSplitViewPane>
            <FluxSplitView
                direction="vertical"
                style="height: 100%">
                <FluxSplitViewPane>
                    <div style="padding: 12px">Top pane</div>
                </FluxSplitViewPane>

                <FluxSplitViewPane :default-size="80">
                    <div style="padding: 12px">Bottom pane</div>
                </FluxSplitViewPane>
            </FluxSplitView>
        </FluxSplitViewPane>
    </FluxSplitView>
</template>

<script
    setup
    lang="ts">
    import { FluxSplitView, FluxSplitViewPane } from '@flux-ui/components';
</script>

Keyboard

Key	Action
Arrow Left / Arrow Up	Shrink the pane before the focused handle
Arrow Right / Arrow Down	Grow the pane before the focused handle
Shift + Arrow	Larger step (64px instead of 16px)
Home	Collapse the pane to its minSize
End	Expand the pane to its maxSize