Skip to content
STYLESCAPE

Split

Examples for the ss-c-split module.

Two panes with a resize handle between them. The handle is a focusable role="separator" whose aria-controls names the primary pane and whose aria-valuenow is that pane's size in percent. SplitPaneManager adds pointer dragging, arrow keys, Home / End (minimum / maximum), Enter (collapse / restore), the aria-valuemin / aria-valuemax limits and, with data-ss-split-key, remembers the size in localStorage.

A collapse toggle cannot sit inside the separator (a focusable control must not contain another one), so the handle and an ss-c-split__toggle button share an ss-c-split__gutter. A bare handle works without one.

Sidebar and content

Model tree

Viewport

HTML 
<div class="ss-c-split" style="height: 220px; border: 1px solid var(--ss-color-border)">
            <div class="ss-c-split__pane ss-c-split__pane--primary" id="demo-split-tree">
                <p style="margin: 0; padding: var(--ss-space-4)">Model tree</p>
            </div>
            <div class="ss-c-split__gutter">
                <div class="ss-c-split__handle" role="separator" tabindex="0"
                     aria-orientation="vertical" aria-controls="demo-split-tree"
                     aria-valuenow="30" aria-valuemin="15" aria-valuemax="60"
                     aria-label="Resize model tree" data-ss-split-key="demo-split-tree"></div>
                <button type="button" class="ss-c-split__toggle" aria-controls="demo-split-tree"
                        aria-label="Model tree"></button>
            </div>
            <div class="ss-c-split__pane">
                <p style="margin: 0; padding: var(--ss-space-4)">Viewport</p>
            </div>
        </div>

Primary pane on the right

When the primary pane follows the handle, add ss-c-split__gutter--end so the chevron points at it; the manager reverses the arrow keys.

Map

Properties

HTML 
<div class="ss-c-split" style="height: 180px; border: 1px solid var(--ss-color-border)">
            <div class="ss-c-split__pane">
                <p style="margin: 0; padding: var(--ss-space-4)">Map</p>
            </div>
            <div class="ss-c-split__gutter ss-c-split__gutter--end">
                <div class="ss-c-split__handle" role="separator" tabindex="0"
                     aria-orientation="vertical" aria-controls="demo-split-props"
                     aria-valuenow="35" aria-valuemin="20" aria-valuemax="60"
                     aria-label="Resize properties"></div>
                <button type="button" class="ss-c-split__toggle" aria-controls="demo-split-props"
                        aria-label="Properties"></button>
            </div>
            <div class="ss-c-split__pane ss-c-split__pane--primary" id="demo-split-props">
                <p style="margin: 0; padding: var(--ss-space-4)">Properties</p>
            </div>
        </div>

Vertical

Stacked panes: ss-c-split--vertical and aria-orientation="horizontal" on the handle.

3D view

Timeline

HTML 
<div class="ss-c-split ss-c-split--vertical" style="height: 260px; border: 1px solid var(--ss-color-border)">
            <div class="ss-c-split__pane ss-c-split__pane--primary" id="demo-split-view">
                <p style="margin: 0; padding: var(--ss-space-4)">3D view</p>
            </div>
            <div class="ss-c-split__handle" role="separator" tabindex="0"
                 aria-orientation="horizontal" aria-controls="demo-split-view"
                 aria-valuenow="60" aria-valuemin="20" aria-valuemax="80"
                 aria-label="Resize 3D view"></div>
            <div class="ss-c-split__pane">
                <p style="margin: 0; padding: var(--ss-space-4)">Timeline</p>
            </div>
        </div>

Responsive

ss-c-split--responsive stacks the panes and hides the handle below md.

List

Detail

HTML 
<div class="ss-c-split ss-c-split--responsive" style="height: 160px; border: 1px solid var(--ss-color-border)">
            <div class="ss-c-split__pane ss-c-split__pane--primary" id="demo-split-list">
                <p style="margin: 0; padding: var(--ss-space-4)">List</p>
            </div>
            <div class="ss-c-split__handle" role="separator" tabindex="0"
                 aria-orientation="vertical" aria-controls="demo-split-list"
                 aria-valuenow="40" aria-label="Resize list"></div>
            <div class="ss-c-split__pane">
                <p style="margin: 0; padding: var(--ss-space-4)">Detail</p>
            </div>
        </div>