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
//<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
Configs
76Common
Other
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.
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.
DOM
Float & align
Layout
Misc
Scrolling
Properties
67
Properties
67Class hierarchy
Other
Get actually used orientation, which is either the configured value for orientation or if configured with
'auto' the currently used orientation.
Splitter orientation, see orientation. When set to 'auto' then actually used orientation can be retrieved using currentOrientation.
CSS
DOM
Layout
Misc
Functions
58
Functions
58Configuration
Events
Misc
Other
Widget hierarchy
Events
17
Events
17Fired while dragging
// Adding a listener using the "on" method
splitter.on('drag', ({ source, event }) => {
});| Parameter | Type | Description |
|---|---|---|
source | Splitter | The Splitter |
event | MouseEvent | TouchEvent | The DOM event |
Fired when a drag starts
// Adding a listener using the "on" method
splitter.on('dragStart', ({ source, event }) => {
});| Parameter | Type | Description |
|---|---|---|
source | Splitter | The Splitter |
event | MouseEvent | TouchEvent | The DOM event |
Fired after a drop
// Adding a listener using the "on" method
splitter.on('drop', ({ source, event }) => {
});| Parameter | Type | Description |
|---|---|---|
source | Splitter | The Splitter |
event | MouseEvent | TouchEvent | The DOM event |
Event handlers
17
Event handlers
17Called while dragging
new Splitter({
onDrag({ source, event }) {
}
});| Parameter | Type | Description |
|---|---|---|
source | Splitter | The Splitter |
event | MouseEvent | TouchEvent | The DOM event |
Called when a drag starts
new Splitter({
onDragStart({ source, event }) {
}
});| Parameter | Type | Description |
|---|---|---|
source | Splitter | The Splitter |
event | MouseEvent | TouchEvent | The DOM event |
Called after a drop
new Splitter({
onDrop({ source, event }) {
}
});| Parameter | Type | Description |
|---|---|---|
source | Splitter | The Splitter |
event | MouseEvent | TouchEvent | The DOM event |
Typedefs
6
Typedefs
6CSS variables
31
CSS variables
31| Name | Description |
|---|---|
--b-splitter-size | Splitter size (width or height depending on orientation) |
--b-splitter-color | Splitter color |
--b-splitter-button-size | Splitter buttons size |
--b-splitter-touch-button-size | Splitter buttons size on touch platforms |
--b-splitter-button-icon-color | Splitter buttons icon color |
| Disabled | |
--b-splitter-disabled-size | Size when disabled |
--b-splitter-disabled-color | Splitter color when disabled |
| Hovered | |
--b-splitter-hover-size | Size when hovered |
--b-splitter-touch-hover-size | Size when hovered on touch devices |
--b-splitter-hover-color | Splitter color when hovered |
--b-splitter-button-hover-color | Splitter buttons icon color when hovered |