Layout
Layout splits your content into resizable sections.
Selector
smart-layout
Properties
animationAnimation
Sets or gets the animation mode. Animation is disabled when the property is set to 'none'
Default valueadvanced
contextMenuDataSourceany
Determines the options that will be available for selection inside the context menu.
disabledboolean
Enables or disables the element.
Default valuefalse
dataSourceany
Sets or gets Layout's data source.
itemLabelstring
Optional. A label for all Splitter items inside the Layout. Usefull when exporting the dataSource and reusing it in other elements, for example, tree, etc.
Default value"Template
itemGroupLabelstring
Optional. A label for all Splitters inside the Layout. Usefull when exporting the dataSource and reusing it in other elements, for example, tree, etc.
Default value"Layout
itemsany
A getter that returns an array of all Splitter items inside the Layout.
Default value
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}}.",
"invalidIndex": "{{elementType}}: '{{method}}' method accepts an index of type number.",
"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.",
"delete": "Delete",
"noId": "{{elementType}}: requires an id in order to save/load a state."
}
orientationOrientation
Sets or gets Layout's main orientation. The orientation is applied to all Splitters inside the Layout unless they have their orientation explicitly set in the dataSource.
Default valuevertical
readonlyboolean
If the element is readonly, users cannot interact with it.
Default valuefalse
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
placeholderstring
Determines the placeholder text of the empty items.
Default value"Empty
rightToLeftboolean
Sets or gets the value indicating whether the element is aligned to support locales using right-to-left fonts.
Default valuefalse
selectedIndexany
Determines the selected item. When an item is selected the buttons for creating nested items are displayed inside it.
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
onresizestart((this: Window, ev: Event) => any) | null
This event is triggered when resizing begins.
Arguments
evEvent
onresizeend((this: Window, ev: Event) => any) | null
This event is triggered when resizing finishes.
Arguments
evEvent
onstatechange((this: Window, ev: Event) => any) | null
This event is triggered when a change regarding the Layout's state has occured, such as inserting a new item, removing an item, etc.
Arguments
evEvent
ev.detailObject
ev.detail.item - The Splitter item that was the target of a change.
ev.detail.type - A description of the operation that has cause the change.
onchange((this: Window, ev: Event) => any) | null
This event is triggered when the selection is changed.
Arguments
evEvent
ev.detailObject
ev.detail.oldSelectedIndex - The Splitter item that was previously selected.
ev.detail.selectedIndex - The Splitter item that is currently selected.
onclosing((this: Window, ev: Event) => any) | null
This event is triggered when a the context menu is about to be closed. The operation can be canceled by calling event.preventDefault() in the event handler function.
Arguments
evEvent
onclose((this: Window, ev: Event) => any) | null
This event is triggered when a the context menu is closed.
Arguments
evEvent
onopening((this: Window, ev: Event) => any) | null
This event is triggered when a the context menu is about to be opened. The operation can be canceled by calling event.preventDefault() in the event handler function.
Arguments
evEvent
onopen((this: Window, ev: Event) => any) | null
This event is triggered when a the context menu is opened.
Arguments
evEvent
onmenuitemclick((this: Window, ev: Event) => any) | null
This event is triggered when an option from the context menu has been clicked.
Arguments
evEvent
ev.detailObject
ev.detail.target - The Splitter item that was the target of the context menu opening.
ev.detail.item - The Context menu item that was clicked.
ev.detail.label - The label of the context menu that was clicked.
ev.detail.value - The value of the context menu that was clicked.
Methods
appendChild( node: Node): T
Arguments
nodeNode
The node to append
ReturnsNode
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
removeChild( node: Node): T
Arguments
nodeNode
The "smart-splitter-item" node to remove.
ReturnsNode
getItem( index: any): void
Returns a Splitter Item according to the index that is passed as an argument.
Arguments
indexany
The index of an item.
getItemIndex( item: any): void
Returns the index of a Splitter Item that is passed as an argument.
Arguments
itemany
The index of the Splitter item that is passed as an argument.
insert( item: any, index: number | string, position?: string): void
Insert a new Splitter item at a given position.
Arguments
itemany
A Splitter Item or an object defining a Splitter item to be inserted.
indexnumber | string
The index at which a new item will be inserted.
position?string
The postition at which the new item will be inseted - top, bottom, left, right.
removeItem( index: any): void
Removes a Splitter item from the Layout.
Arguments
indexany
The index of an item to be removed or an instance of Smart.SplitterItem.
removeAll(): void
Removes all items from the Layout
select( index: any): void
Selects a Splitter item from the Layout.
Arguments
indexany
The index of an item to be removed or an instance of Smart.SplitterItem.
unselect(): void
Unselects the selected item inside the element.
updateItem( index: any, settings: any): void
Updates a Splitter item that is inside the Layout.
Arguments
indexany
The index of an item to be removed or an instance of Smart.SplitterItem.
settingsany
An object containing properties with new values for the Splitter item that should be updated.
clearState(): void
Clears the localStorage of any previous cached states of the element according to it's id.
saveState(): any
Saves the current state of the element to LocalStorage. Requires an id to be set to the element.
Returnsany
loadState( state?: any[]): void
Loads a previously saved state of the element. If no state is provided as an argument the method will do a localStorage lookup according to the id of the element.
Arguments
state?any[]
An array of objects that represents a cached state of the element. The result of calling the 'saveState' method.