Splitter

A simple splitter widget that resizes the elements next to it or above/below it depending on orientation.

Double click on the splitter to share the space evenly between the two neighboring elements.

CTRL (CMD on Mac) double click to share the space evenly between all siblings in the parent container

Splitter
//<code-header>
fiddle.title = 'Splitter';
//</code-header>
targetElement.style.display = 'flex';
targetElement.style.alignItems = 'stretch';

new Panel({
    title    : 'Left panel',
    appendTo : targetElement,
    html     : 'Spicy jalapeno bacon ipsum dolor amet venison beef alcatra spare ribs porchetta biltong. Fatback pork loin tri-tip tongue ground round. Pastrami capicola bresaola beef pancetta beef ribs porchetta kevin kielbasa pork prosciutto short ribs short loin tail. Shoulder beef strip steak bresaola, ham pastrami shankle picanha salami venison bacon kevin tail.',
    flex     : 1,
    height   : '18em',
    minWidth : '10em',
    // Override docs styling
    style    : {
        borderRadius : 0,
        boxShadow    : 'none'
    }
});

new Splitter({
    appendTo : targetElement
});

new Panel({
    title    : 'Right panel',
    appendTo : targetElement,
    html     : 'Spicy jalapeno bacon ipsum dolor amet short ribs cupim ribeye corned beef shank. Andouille boudin short ribs shank brisket tenderloin, kielbasa drumstick strip steak pork porchetta pig. Beef pastrami sirloin salami capicola, t-bone beef ribs doner. Beef strip steak burgdoggen ham hock, meatloaf tongue corned beef kevin. Drumstick boudin turkey hamburger ground round prosciutto.',
    flex     : 1,
    height   : '18em',
    minWidth : '10em',
    // Override docs styling
    style    : {
        borderRadius : 0,
        boxShadow    : 'none'
    }
});

Configs

76

Common

listenersEvents

Other

orientation: auto | horizontal | vertical= autoAlso a property

The splitter's orientation, configurable with 'auto', 'horizontal' or 'vertical'.

'auto' tries to determine the orientation by either checking the flex-direction of the parent element or by comparing the positions of the closest sibling elements to the splitter. If they are above and below 'horizontal' is used, if not it uses 'vertical'.

new Splitter({
   orientation : 'horizontal'
});

To receive the actually used orientation when configured with 'auto', see currentOrientation.

showButtons: Boolean | start | end= false

Set to true to show the splitter's collapse/expand buttons, or to 'start' or 'end' to only show buttons pointing to the previous or next element respectively.

Setting to false will hide the buttons.

columnWidget
rtlRTL
spanWidget

Accessibility

ariaLabelWidget
keyMapKeyMap

CSS

clsWidget
colorWidget
htmlClsWidget
styleWidget
uiWidget

DOM

adoptWidget
appendToWidget
contentWidget
datasetWidget
htmlWidget
idWidget
tagWidget
titleWidget

Float & align

alignWidget
anchorWidget
centeredWidget
draggableWidget
floatingWidget
xWidget
yWidget

Layout

alignSelfWidget
dockWidget
flexWidget
heightWidget
hiddenWidget
marginWidget
maxHeightWidget
maxWidthWidget
minHeightWidget
minWidthWidget
textAlignWidget
weightWidget
widthWidget

Misc

dataFieldWidget
disabledWidget
localeClassLocalizable
localizableLocalizable
maskedWidget
ownerWidget
readOnlyWidget
refWidget
rippleWidget
tabWidget
tooltipWidget

Scrolling

Properties

67

Class hierarchy

isSplitter: Boolean= truereadonly
Identifies an object as an instance of Splitter class, or subclass thereof.
isSplitter: Boolean= truereadonlystatic
Identifies an object as an instance of Splitter class, or subclass thereof.
isDelayableDelayable
isEventsEvents
isKeyMapKeyMap
isLocalizableLocalizable
isWidgetWidget

Other

currentOrientation: Stringreadonly

Get actually used orientation, which is either the configured value for orientation or if configured with 'auto' the currently used orientation.

orientation: auto | horizontal | verticalreadonlyAlso a config

Splitter orientation, see orientation. When set to 'auto' then actually used orientation can be retrieved using currentOrientation.

$namestaticWidget
columnWidget
rtlRTL
spanWidget
typestaticWidget

Accessibility

keyMapKeyMap

CSS

clsWidget

DOM

appendToWidget
contentWidget
datasetWidget
elementWidget
htmlWidget
idWidget
styleWidget

Float & align

xWidget
yWidget

Layout

alignSelfWidget
flexWidget
heightWidget
marginWidget
maxHeightWidget
maxWidthWidget
minHeightWidget
minWidthWidget
widthWidget

Lifecycle

configBase

Misc

cellInfoWidget
disabledWidget
localeHelperLocalizable
localeManagerLocalizable
readOnlyWidget
refWidget
tabWidget
tooltipWidget

Visibility

hiddenWidget
isVisibleWidget

Widget hierarchy

ownerWidget
parentWidget

Functions

58

Configuration

applyDefaultsstaticBase

Events

Float & align

alignToWidget
setXYWidget
showByWidget
toFrontWidget

Lifecycle

createstaticWidget
destroystaticBase
initClassstaticWidget

Misc

attachTooltipstaticWidget
fromElementstaticWidget
fromSelectorstaticWidget
getByIdstaticWidget
isOfTypeNamestaticBase
mixinstaticBase
optionalLstaticLocalizable

Other

composeWidget
createOnFrameDelayable
disableWidget
enableWidget
focusWidget
LstaticLocalizable
maskWidget
onEvents
recomposeWidget
relayAllEvents
triggerEvents
unEvents
unmaskWidget

Visibility

hideWidget
showWidget

Widget hierarchy

closestWidget
containsWidget
ownsWidget
queryWidget
queryAllWidget
upWidget

Events

17

Fired while dragging

// Adding a listener using the "on" method
splitter.on('drag', ({ source, event }) => {

});
ParameterTypeDescription
sourceSplitter

The Splitter

eventMouseEvent | TouchEvent

The DOM event

Fired when a drag starts

// Adding a listener using the "on" method
splitter.on('dragStart', ({ source, event }) => {

});
ParameterTypeDescription
sourceSplitter

The Splitter

eventMouseEvent | TouchEvent

The DOM event

Fired after a drop

// Adding a listener using the "on" method
splitter.on('drop', ({ source, event }) => {

});
ParameterTypeDescription
sourceSplitter

The Splitter

eventMouseEvent | TouchEvent

The DOM event

catchAllEvents
destroyEvents
focusInWidget
focusOutWidget
hideWidget
paintWidget
readOnlyWidget
recomposeWidget
resizeWidget
showWidget

Event handlers

17

Called while dragging

new Splitter({
    onDrag({ source, event }) {

    }
});
ParameterTypeDescription
sourceSplitter

The Splitter

eventMouseEvent | TouchEvent

The DOM event

Called when a drag starts

new Splitter({
    onDragStart({ source, event }) {

    }
});
ParameterTypeDescription
sourceSplitter

The Splitter

eventMouseEvent | TouchEvent

The DOM event

Called after a drop

new Splitter({
    onDrop({ source, event }) {

    }
});
ParameterTypeDescription
sourceSplitter

The Splitter

eventMouseEvent | TouchEvent

The DOM event

onDestroyEvents
onFocusInWidget
onHideWidget
onPaintWidget
onResizeWidget
onShowWidget

Typedefs

6

CSS variables

31
NameDescription
--b-splitter-sizeSplitter size (width or height depending on orientation)
--b-splitter-colorSplitter color
--b-splitter-button-sizeSplitter buttons size
--b-splitter-touch-button-sizeSplitter buttons size on touch platforms
--b-splitter-button-icon-colorSplitter buttons icon color
Disabled
--b-splitter-disabled-sizeSize when disabled
--b-splitter-disabled-colorSplitter color when disabled
Hovered
--b-splitter-hover-sizeSize when hovered
--b-splitter-touch-hover-sizeSize when hovered on touch devices
--b-splitter-hover-colorSplitter color when hovered
--b-splitter-button-hover-colorSplitter buttons icon color when hovered

Inherited