Splitter JAVASCRIPT UI Component API

Splitter Javascript API

Splitter

Splitter is a layout component that supports all important features such as resizing, collapsing, and nesting panels.

Properties

animation"none" | "simple" | "advanced"

Sets or gets the animation mode. Animation is disabled when the property is set to 'none'

Allowed Values

"none" - animation is disabled
"simple" - ripple animation is disabled
"advanced" - all animations are enabled

Default value

"advanced"

Example

Set the animation property.

 <smart-splitter animation='none'></smart-splitter>

Set the animation property by using the HTML Element's instance.

 const splitter = document.querySelector('smart-splitter');

 splitter.animation = 'simple';

Get the animation property.

 const splitter = document.querySelector('smart-splitter');

 let animation = splitter.animation;

autoFitMode"end" | "proportional" | "overflow"

Determines how the items are arranged inside the Splitter.
Possible values:

end - all items will fit the size of the Splitter. When inserting a new item the space required for the item to fit will be deducted from it's neighbour.
proportional - all items will fit the size of the Splitter. When inserting a new item the space required for it to fit will be the result from the proportional deduction of the size from the rest of the items inside the element.
overflow - the items inside the Splitter will not fit it's size. Instead they overflow by taking the exact amount of space they need and a scrollbar is displayed in order to view the content.

Default value

"proportional"

Example

Set the autoFitMode property.

 <smart-splitter auto-fit-mode='end'></smart-splitter>

Set the autoFitMode property by using the HTML Element's instance.

 const splitter = document.querySelector('smart-splitter');

 splitter.autoFitMode = 'proportional';

Get the autoFitMode property.

 const splitter = document.querySelector('smart-splitter');

 let autoFitMode = splitter.autoFitMode;

disabledboolean

Enables or disables the element.

Default value

false

Example

Set the disabled property.

 <smart-splitter disabled></smart-splitter>

Set the disabled property by using the HTML Element's instance.

 const splitter = document.querySelector('smart-splitter');

 splitter.disabled = false;

Get the disabled property.

 const splitter = document.querySelector('smart-splitter');

 let disabled = splitter.disabled;

dataSourcearray

Sets or gets splitter's data source.

Example

Set the dataSource property.

 <smart-splitter data-source='[object Object],[object Object]'></smart-splitter>

Set the dataSource property by using the HTML Element's instance.

 const splitter = document.querySelector('smart-splitter');

 splitter.dataSource = [object Object],[object Object],[object Object];

Get the dataSource property.

 const splitter = document.querySelector('smart-splitter');

 let dataSource = splitter.dataSource;

itemsarray

A getter that returns an array of all Splitter items.

Default value

keepProportionsOnResizeboolean

If set the element keeps the same proportions of the items after the whole element has been resized regardless of the size property unit ( pixels or percentages) of the items.

Default value

false

Example

Set the keepProportionsOnResize property.

 <smart-splitter keep-proportions-on-resize></smart-splitter>

Set the keepProportionsOnResize property by using the HTML Element's instance.

 const splitter = document.querySelector('smart-splitter');

 splitter.keepProportionsOnResize = false;

Get the keepProportionsOnResize property.

 const splitter = document.querySelector('smart-splitter');

 let keepProportionsOnResize = splitter.keepProportionsOnResize;

localestring

Sets or gets the language. Used in conjunction with the property messages.

Default value

"en"

Example

Set the locale property.

 <smart-splitter locale='de'></smart-splitter>

Set the locale property by using the HTML Element's instance.

 const splitter = document.querySelector('smart-splitter');

 splitter.locale = 'fr';

Get the locale property.

 const splitter = document.querySelector('smart-splitter');

 let locale = splitter.locale;

localizeFormatFunctionfunction | null

Callback, related to localization module.

Example

Set the localizeFormatFunction property.

 <smart-splitter localize-format-function='function(){return '...'}'></smart-splitter>

Set the localizeFormatFunction property by using the HTML Element's instance.

 const splitter = document.querySelector('smart-splitter');

 splitter.localizeFormatFunction = function(){return '...'};

Get the localizeFormatFunction property.

 const splitter = document.querySelector('smart-splitter');

 let localizeFormatFunction = splitter.localizeFormatFunction;

messagesobject

Sets an object with string values, related to the different states of passwords strength.

Default value

"en": {

"propertyUnknownType": "'{{name}}' property is with undefined 'type' member!",

"propertyInvalidValue": "Invalid '{{name}}' property value! Actual value: {{actualValue}}, Expected value: {{value}}!",

"propertyInvalidValueType": "Invalid '{{name}}' property value type! Actual type: {{actualType}}, Expected type: {{type}}!",

"elementNotInDOM": "Element does not exist in DOM! Please, add the element to the DOM, before invoking a method.",

"moduleUndefined": "Module is undefined.",

"missingReference": "{{elementType}}: Missing reference to {{files}}.",

"htmlTemplateNotSuported": "{{elementType}}: Browser doesn't support HTMLTemplate elements.",

"invalidTemplate": "{{elementType}}: '{{property}}' property accepts a string that must match the id of an HTMLTemplate element from the DOM.",

"invalidIndex": "{{elementType}}: '{{method}}' method accepts an index of type number.",

"indexOutOfBound": "{{elementType}}: Out of bound index/indexes in '{{method}}' method.",

"invalidNode": "{{elementType}}: '{{method}}' method accepts an object or an array of objects as it's second parameter.",

"invalidSettings": "{{elementType}}: '{{method}}' method accepts a string or an object as it's second parameter.",

"invalidType": "{{elementType}}: '{{propertyName}}' must be of type string or number."

}

Example

Set the messages property.

 <smart-splitter messages='{"de":{"propertyUnknownType":"Die Eigenschaft '{{name}}' hat ein nicht definiertes 'type'-Member!","propertyInvalidValue":"Ungultiger Eigenschaftswert '{{name}}'! Aktueller Wert: {{actualValue}}, Erwarteter Wert: {{value}}!","propertyInvalidValueType":"Ungultiger Eigenschaftswert '{{name}}'! Aktueller Wert: {{actualType}}, Erwarteter Wert: {{type}}!","elementNotInDOM":"Element existiert nicht in DOM! Bitte fugen Sie das Element zum DOM hinzu, bevor Sie eine Methode aufrufen.","moduleUndefined":"Modul ist nicht definiert.","missingReference":"{{elementType}}: Fehlender Verweis auf {{files}}.","htmlTemplateNotSuported":"{{elementType}}: Browser unterstutzt keine HTMLTemplate-Elemente.","invalidTemplate":"{{elementType}}: '{{property}}' Die Eigenschaft akzeptiert eine Zeichenfolge, die mit der ID eines HTMLTemplate-Elements aus dem DOM ubereinstimmen muss.","invalidIndex":"{{elementType}}: '{{method}}' Methode akzeptiert einen Index der Typennummer.","indexOutOfBound":"{{elementType}}: Nicht gebundener Index / Indizes in Methode '{{method}}'.","invalidNode":"{{elementType}}: '{{method}}' Die Methode akzeptiert ein Objekt oder ein Array von Objekten als zweiten Parameter.","invalidSettings":"{{elementType}}: '{{method}}' 1  62/5000 Die Methode akzeptiert einen string oder ein Objekt als zweiten Parameter.","invalidType":"{{elementType}}: '{{propertyName}}' muss vom Typ string oder Nummer sein."}}'></smart-splitter>

Set the messages property by using the HTML Element's instance.

 const splitter = document.querySelector('smart-splitter');

 splitter.messages = {"en":{"propertyUnknownType":"'{{name}}' property is with undefined 'type' member!","propertyInvalidValue":"Invalid '{{name}}' property value! Actual value: {{actualValue}}, Expected value: {{value}}!","propertyInvalidValueType":"Invalid '{{name}}' property value type! Actual type: {{actualType}}, Expected type: {{type}}!","elementNotInDOM":"Element does not exist in DOM! Please, add the element to the DOM, before invoking a method.","moduleUndefined":"Module is undefined.","missingReference":"{{elementType}}: Missing reference to {{files}}.","htmlTemplateNotSuported":"{{elementType}}: Browser doesn't support HTMLTemplate elements.","invalidTemplate":"{{elementType}}: '{{property}}' property accepts a string that must match the id of an HTMLTemplate element from the DOM.","invalidIndex":"{{elementType}}: '{{method}}' method accepts an index of type number.","indexOutOfBound":"{{elementType}}: Out of bound index/indexes in '{{method}}' method.","invalidNode":"{{elementType}}: '{{method}}' method accepts an object or an array of objects as it's second parameter.","invalidSettings":"{{elementType}}: '{{method}}' method accepts a string or an object as it's second parameter.","invalidType":"{{elementType}}: '{{propertyName}}' must be of type string or number."}};

Get the messages property.

 const splitter = document.querySelector('smart-splitter');

 let messages = splitter.messages;

orientation"horizontal" | "vertical"

Sets or gets splitter's orientation.

Default value

"vertical"

Example

Set the orientation property.

 <smart-splitter orientation='horizontal'></smart-splitter>

Set the orientation property by using the HTML Element's instance.

 const splitter = document.querySelector('smart-splitter');

 splitter.orientation = 'vertical';

Get the orientation property.

 const splitter = document.querySelector('smart-splitter');

 let orientation = splitter.orientation;

readonlyboolean

If the element is readonly, users cannot interact with it.

Default value

false

Example

Set the readonly property.

 <smart-splitter readonly></smart-splitter>

Set the readonly property by using the HTML Element's instance.

 const splitter = document.querySelector('smart-splitter');

 splitter.readonly = true;

Get the readonly property.

 const splitter = document.querySelector('smart-splitter');

 let readonly = splitter.readonly;

resizeMode"none" | "adjacent" | "end" | "proportional"

Determines the resize mode of the splitter. Possible values are:
- None - resizing is disabled.
- Adjacent - only the two adjacent items between the target splitter bar are being affected. This is the default behavior.
- End - only the first item( left or top according to the orientation) of the target Splitter bar and the last item are affected.
Proportional - all of the items positioned in the direction to which the splitter bar is dragged will be affected. For example, when a splitter bar is dragged to the right all the items positioned on it's the right side will be affected. The items will obtain a proportional size corresponding to their current size.

Default value

"adjacent"

Example

Set the resizeMode property.

 <smart-splitter resize-mode='end'></smart-splitter>

Set the resizeMode property by using the HTML Element's instance.

 const splitter = document.querySelector('smart-splitter');

 splitter.resizeMode = 'proportional';

Get the resizeMode property.

 const splitter = document.querySelector('smart-splitter');

 let resizeMode = splitter.resizeMode;

resizeStepnumber

Determines the resize step during reisizing

Default value

Example

Set the resizeStep property.

 <smart-splitter resize-step='10'></smart-splitter>

Set the resizeStep property by using the HTML Element's instance.

 const splitter = document.querySelector('smart-splitter');

 splitter.resizeStep = 20;

Get the resizeStep property.

 const splitter = document.querySelector('smart-splitter');

 let resizeStep = splitter.resizeStep;

rightToLeftboolean

Sets or gets the value indicating whether the element is aligned to support locales using right-to-left fonts.

Default value

false

Try a demo showcasing the rightToLeft property.

Example

Set the rightToLeft property.

 <smart-splitter right-to-left></smart-splitter>

Set the rightToLeft property by using the HTML Element's instance.

 const splitter = document.querySelector('smart-splitter');

 splitter.rightToLeft = false;

Get the rightToLeft property.

 const splitter = document.querySelector('smart-splitter');

 let rightToLeft = splitter.rightToLeft;

liveResizeboolean

When enabled the resizing operation happens live. By default this feature is not enabled and the user sees a hightlighted bar while dragging instead of the actual splitter bar.

Default value

false

Example

Set the liveResize property.

 <smart-splitter live-resize></smart-splitter>

Set the liveResize property by using the HTML Element's instance.

 const splitter = document.querySelector('smart-splitter');

 splitter.liveResize = true;

Get the liveResize property.

 const splitter = document.querySelector('smart-splitter');

 let liveResize = splitter.liveResize;

themestring

Determines the theme. Theme defines the look of the element

Default value

Example

Set the theme property.

 <smart-splitter theme='blue'></smart-splitter>

Set the theme property by using the HTML Element's instance.

 const splitter = document.querySelector('smart-splitter');

 splitter.theme = 'red';

Get the theme property.

 const splitter = document.querySelector('smart-splitter');

 let theme = splitter.theme;

unfocusableboolean

If is set to true, the element cannot be focused.

Default value

false

Example

Set the unfocusable property.

 <smart-splitter unfocusable></smart-splitter>

Set the unfocusable property by using the HTML Element's instance.

 const splitter = document.querySelector('smart-splitter');

 splitter.unfocusable = false;

Get the unfocusable property.

 const splitter = document.querySelector('smart-splitter');

 let unfocusable = splitter.unfocusable;

Events

collapseCustomEvent

This event is triggered when splitter item is collapsed.

Bubbles Yes
Cancelable No
Interface CustomEvent
Event handler property onCollapse

Arguments

evCustomEvent

Methods

isDefaultPrevented

Returns true if the event was prevented by any of its subscribers.

Returns

boolean true if the default action was prevented. Otherwise, returns false.

preventDefault

The preventDefault() method prevents the default action for a specified event. In this way, the source component suppresses the built-in behavior that follows the event.

stopPropagation

The stopPropagation() method of the Event interface prevents further propagation of the current event in the capturing and bubbling phases.

Example

Set up the event handler of collapse event.

const splitter = document.querySelector('smart-splitter');
splitter.addEventListener('collapse', function (event) {
	// event handling code goes here.
})

expandCustomEvent

This event is triggered when splitter item is expanded.

Bubbles Yes
Cancelable No
Interface CustomEvent
Event handler property onExpand

Arguments

evCustomEvent

Methods

isDefaultPrevented

Returns true if the event was prevented by any of its subscribers.

Returns

boolean true if the default action was prevented. Otherwise, returns false.

preventDefault

The preventDefault() method prevents the default action for a specified event. In this way, the source component suppresses the built-in behavior that follows the event.

stopPropagation

The stopPropagation() method of the Event interface prevents further propagation of the current event in the capturing and bubbling phases.

Example

Set up the event handler of expand event.

const splitter = document.querySelector('smart-splitter');
splitter.addEventListener('expand', function (event) {
	// event handling code goes here.
})

resizeStartCustomEvent

This event is triggered when splitter resizing begins.

Bubbles Yes
Cancelable No
Interface CustomEvent
Event handler property onResizeStart

Arguments

evCustomEvent

Methods

isDefaultPrevented

Returns true if the event was prevented by any of its subscribers.

Returns

boolean true if the default action was prevented. Otherwise, returns false.

preventDefault

The preventDefault() method prevents the default action for a specified event. In this way, the source component suppresses the built-in behavior that follows the event.

stopPropagation

The stopPropagation() method of the Event interface prevents further propagation of the current event in the capturing and bubbling phases.

Example

Set up the event handler of resizeStart event.

const splitter = document.querySelector('smart-splitter');
splitter.addEventListener('resizeStart', function (event) {
	// event handling code goes here.
})

resizeEndCustomEvent

This event is triggered when splitter resizing finishes.

Bubbles Yes
Cancelable No
Interface CustomEvent
Event handler property onResizeEnd

Arguments

evCustomEvent

Methods

isDefaultPrevented

Returns true if the event was prevented by any of its subscribers.

Returns

boolean true if the default action was prevented. Otherwise, returns false.

preventDefault

The preventDefault() method prevents the default action for a specified event. In this way, the source component suppresses the built-in behavior that follows the event.

stopPropagation

The stopPropagation() method of the Event interface prevents further propagation of the current event in the capturing and bubbling phases.

Example

Set up the event handler of resizeEnd event.

const splitter = document.querySelector('smart-splitter');
splitter.addEventListener('resizeEnd', function (event) {
	// event handling code goes here.
})

Methods

appendChild( node: Node): T

Arguments

nodeNode

The node to append

collapse( item: any, far?: boolean): void

Collapses splitter item.

Arguments

itemany

number indicating the index of the item or an isntance of Smart.SplitterItem

far?boolean

Indicates whether the item should collapse to it's far or near side

Invoke the collapse method.

const splitter = document.querySelector('smart-splitter');
splitter.collapse("1, true");

expand( item: any): void

Expands the splitter item if possible (if there's enough space available).

Arguments

itemany

number indicating the index of the item or an isntance of Smart.SplitterItem

Invoke the expand method.

const splitter = document.querySelector('smart-splitter');
splitter.expand("1");

hideBar( splitterBar: number): number

Hides a splitter bar

Arguments

splitterBarnumber

A Smart.SplitterBar instance.

Returnsnumber

Invoke the hideBar method.

const splitter = document.querySelector('smart-splitter');
const result = splitter.hideBar(1);

insert( index: number, details: any): void

Insert a new Splitter item at a given position.

Arguments

indexnumber

The index at which a new item will be inserted.

detailsany

An Object or string used as content if the splitter item.

Invoke the insert method.

const splitter = document.querySelector('smart-splitter');
splitter.insert(1,{"label":"New TAB","content":"New content"});

insertBefore( newNode: Node, referenceNode?: Node | null): T

Arguments

newNodeNode

The "smart-splitter-item" node to insert.

referenceNode?Node | null

The "smart-splitter-item" node before which newNode is inserted.

ReturnsNode

lockItem( index: number): void

Locks a splitter item so it's size can't change.

Arguments

indexnumber

The index of a Splitter Bar or it's instance.

Invoke the lockItem method.

const splitter = document.querySelector('smart-splitter');
splitter.lockItem(5);

lockBar( index: number): void

Locks a splitter bar so it can't be dragged.

Arguments

indexnumber

The index of a Splitter Bar or it's instance.

Invoke the lockBar method.

const splitter = document.querySelector('smart-splitter');
splitter.lockBar(5);

removeAt( index: number): void

Removes a Splitter item.

Arguments

indexnumber

An item to be removed.

Invoke the removeAt method.

const splitter = document.querySelector('smart-splitter');
splitter.removeAt(5);

removeAll(): void

Removes all items from the Splitter

Invoke the removeAll method.

const splitter = document.querySelector('smart-splitter');
splitter.removeAll();

removeChild( node: Node): T

Arguments

nodeNode

The "smart-splitter-item" node to remove.

ReturnsNode

refresh(): void

Refreshes the Splitter

Invoke the refresh method.

const splitter = document.querySelector('smart-splitter');
splitter.refresh();

showBar( splitterBar: number): void

Unhides a Splitter Bar

Arguments

splitterBarnumber

An instance of a splitter bar.

Invoke the showBar method.

const splitter = document.querySelector('smart-splitter');
splitter.showBar(5);

unlockItem( item: number): void

Unlocks a previously locked splitter item.

Arguments

itemnumber

The index of a Splitter Item or it's instance.

Invoke the unlockItem method.

const splitter = document.querySelector('smart-splitter');
splitter.unlockItem(0);

unlockBar( item: number): void

Unlocks a previously locked splitter bar.

Arguments

itemnumber

The index of a Splitter Bar or it's instance.

Invoke the unlockBar method.

const splitter = document.querySelector('smart-splitter');
splitter.unlockBar(1);

update( item: any, settings: any): void

Updates the properties of a Splitter item inside the Splitter.

Arguments

itemany

The index of a Smart.SplitterItem or it's instance.

settingsany

An object containing the properties of a Smart.SplitterItem.

Invoke the update method.

const splitter = document.querySelector('smart-splitter');
splitter.update("0, settings");

CSS Variables

--smart-splitter-default-widthvar()

Default value

"var(--smart-box-width)"

smartSplitter default width

--smart-splitter-default-heightvar()

Default value

"var(--smart-box-height)"

smartSplitter default height

--smart-splitter-bar-sizevar()

Default value

"10px"

The width of the scrollbar when vertical and the height of the scrollbar when horizontal

--smart-splitter-bar-fit-sizevar()

Default value

"100%"

The size of the splitter according to the orientation of the Splitter. By 'default' a SplitterBar fits the size of the Splitter.

--smart-splitter-item-paddingvar()

Default value

"0"

Splitter item padding

--smart-splitter-item-content-paddingvar()

Default value

"0"

Splitter item content padding

--smart-splitter-item-sizevar()

Default value

"auto"

The default size of the Splitter Items

const splitterbar = document.querySelector('smart-splitter-bar');
splitterbar.hide();

show(): void

Unhides a splitter bar.

Invoke the show method.

const splitterbar = document.querySelector('smart-splitter-bar');
splitterbar.show();

lock(): void

Locks the splitter bar.

Invoke the lock method.

const splitterbar = document.querySelector('smart-splitter-bar');
splitterbar.lock();

unlock(): void

Unlocks the splitter bar.

Invoke the unlock method.

const splitterbar = document.querySelector('smart-splitter-bar');
splitterbar.unlock();

disabledboolean

Enables or disables the element.

Default value

false

Example

Set the disabled property.

 <smart-splitter-item disabled></smart-splitter-item>

Set the disabled property by using the HTML Element's instance.

 const splitteritem = document.querySelector('smart-splitter-item');

 splitteritem.disabled = false;

Get the disabled property.

 const splitteritem = document.querySelector('smart-splitter-item');

 let disabled = splitteritem.disabled;

collapsedboolean

Determines of the item is collapsed or not.

Default value

false

Example

Set the collapsed property.

 <smart-splitter-item collapsed></smart-splitter-item>

Set the collapsed property by using the HTML Element's instance.

 const splitteritem = document.querySelector('smart-splitter-item');

 splitteritem.collapsed = false;

Get the collapsed property.

 const splitteritem = document.querySelector('smart-splitter-item');

 let collapsed = splitteritem.collapsed;

collapsibleboolean

Determines of the item can be collapsed. If set to false, the item can't be collapsed

Default value

false

Example

Set the collapsible property.

 <smart-splitter-item collapsible></smart-splitter-item>

Set the collapsible property by using the HTML Element's instance.

 const splitteritem = document.querySelector('smart-splitter-item');

 splitteritem.collapsible = false;

Get the collapsible property.

 const splitteritem = document.querySelector('smart-splitter-item');

 let collapsible = splitteritem.collapsible;

contentany

Determines the content of the splitter items

Default value

Example

Set the content property.

 <smart-splitter-item content=''></smart-splitter-item>

Set the content property by using the HTML Element's instance.

 const splitteritem = document.querySelector('smart-splitter-item');

 splitteritem.content = Panel;

Get the content property.

 const splitteritem = document.querySelector('smart-splitter-item');

 let content = splitteritem.content;

lockedboolean

Determines of the item can be resized or not.

Default value

false

Example

Set the locked property.

 <smart-splitter-item locked></smart-splitter-item>

Set the locked property by using the HTML Element's instance.

 const splitteritem = document.querySelector('smart-splitter-item');

 splitteritem.locked = false;

Get the locked property.

 const splitteritem = document.querySelector('smart-splitter-item');

 let locked = splitteritem.locked;

maxstring

Determines the max size of the item.

Default value

Example

Set the max property.

 <smart-splitter-item max='250'></smart-splitter-item>

Set the max property by using the HTML Element's instance.

 const splitteritem = document.querySelector('smart-splitter-item');

 splitteritem.max = '100';

Get the max property.

 const splitteritem = document.querySelector('smart-splitter-item');

 let max = splitteritem.max;

minstring

Determines the min size of the item

Default value

Example

Set the min property.

 <smart-splitter-item min='50'></smart-splitter-item>

Set the min property by using the HTML Element's instance.

 const splitteritem = document.querySelector('smart-splitter-item');

 splitteritem.min = '100';

Get the min property.

 const splitteritem = document.querySelector('smart-splitter-item');

 let min = splitteritem.min;

sizestring

Determines the size of the item.

Default value

Example

Set the size property.

 <smart-splitter-item size='250'></smart-splitter-item>

Set the size property by using the HTML Element's instance.

 const splitteritem = document.querySelector('smart-splitter-item');

 splitteritem.size = '100';

Get the size property.

 const splitteritem = document.querySelector('smart-splitter-item');

 let size = splitteritem.size;

Methods

collapse( far: string): void

Collapses the item.

Arguments

farstring

If set to true the item will collapse to it's far side ( to the right for vertical splitter and down for horizontal)

Invoke the collapse method.

const splitteritem = document.querySelector('smart-splitter-item');
splitteritem.collapse();

expand(): void

Expands the item if it's collapsed.

Invoke the expand method.

const splitteritem = document.querySelector('smart-splitter-item');
splitteritem.expand();

lock(): void

Locks the item so it can no longer change it's size.

Invoke the lock method.

const splitteritem = document.querySelector('smart-splitter-item');
splitteritem.lock();

unlock(): void

Unlocks a previously locked item.

Invoke the unlock method.

const splitteritem = document.querySelector('smart-splitter-item');
splitteritem.unlock();