Splitter Typescript API

Interface

Splitter

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

Selector

smart-splitter

Properties

animationAnimation

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

Default valueadvanced

autoFitModeSplitterAutoFitMode

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 valueproportional

disabledboolean

Enables or disables the element.

Default valuefalse

dataSourceany

Sets or gets splitter's data source.

itemsany

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 valuefalse

localestring

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

Default value"en

localizeFormatFunctionany

Callback, related to localization module.

messagesany

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."

}

orientationOrientation

Sets or gets splitter's orientation.

Default valuevertical

readonlyboolean

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

Default valuefalse

resizeModeSplitterResizeMode

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 valueadjacent

resizeStepnumber

Determines the resize step during reisizing

Default value5

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 valuefalse

themestring

Determines the theme. Theme defines the look of the element

Default value"

unfocusableboolean

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

Default valuefalse

oncollapse((this: Window, ev: Event) => any) | null

This event is triggered when splitter item is collapsed.

Arguments

onexpand((this: Window, ev: Event) => any) | null

This event is triggered when splitter item is expanded.

Arguments

onresizestart((this: Window, ev: Event) => any) | null

This event is triggered when splitter resizing begins.

Arguments

onresizeend((this: Window, ev: Event) => any) | null

This event is triggered when splitter resizing finishes.

Arguments

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

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

hideBar( splitterBar: number): number

Hides a splitter bar

Arguments

splitterBarnumber

A Smart.SplitterBar instance.

Returnsnumber

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.

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.

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.

removeAt( index: number): void

Removes a Splitter item.

Arguments

indexnumber

An item to be removed.

removeAll(): void

Removes all items from the Splitter

removeChild( node: Node): T

Arguments

nodeNode

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

ReturnsNode

showBar( splitterBar: number): void

Unhides a Splitter Bar

Arguments

splitterBarnumber

An instance of a splitter bar.

unlockItem( item: number): void

Unlocks a previously locked splitter item.

Arguments

itemnumber

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

unlockBar( item: number): void

Unlocks a previously locked splitter bar.

Arguments

itemnumber

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

Enums

SplitterBar

SplitterBar splits two Split panels in a Splitter.

Selector

smart-splitter-bar

Properties

Methods

hide(): void

Hides the splitter bar.

show(): void

Unhides a splitter bar.

lock(): void

Locks the splitter bar.

unlock(): void

Unlocks the splitter bar.

SplitterItem

Splitter Item is a Panel in a Splitter component.

Selector

smart-splitter-item

Properties

disabledboolean

Enables or disables the element.

Default valuefalse

collapsedboolean

Determines of the item is collapsed or not.

Default valuefalse

collapsibleboolean

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

Default valuefalse

lockedboolean

Determines of the item can be resized or not.

Default valuefalse

maxstring

Determines the max size of the item.

Default value"

minstring

Determines the min size of the item

Default value"

sizestring

Determines the size of the item.

Default value"

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)

expand(): void

Expands the item if it's collapsed.

lock(): void

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

unlock(): void

Unlocks a previously locked item.