Splitter — Smart UI JavaScript API

Splitter — Smart UI JavaScript API

On this page + Quick start

Quick start · JavaScript

Complete starter source per framework. Run the scaffold/install command first, then replace the listed files with the full code below.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <title>Splitter - JavaScript Quick Start</title>
  <link rel="stylesheet" href="./node_modules/smart-webcomponents/source/styles/smart.default.css" />
</head>
<body>
  <smart-splitter id="demo-splitter"></smart-splitter>

  <script type="module">
    import './node_modules/smart-webcomponents/source/modules/smart.splitter.js';

    const el = document.getElementById('demo-splitter');
    if (el) {

      el.orientation = 'vertical';
      el.liveResize = true;
      el.resizeMode = 'adjacent';
      el.innerHTML = '
Navigation
Workspace
Preview
';

      el.addEventListener('change', (event) => console.log('change:', event.detail || event));
    }
  </script>
</body>
</html>
For AI tooling

Developer Quick Reference

Component: Splitter   Framework: JavaScript   Selector: smart-splitter

API counts: 18 properties, 16 methods, 4 events

Common properties: 0, 1, 2, 3, 4, 5

Common methods: appendChild(), collapse(), expand(), hideBar(), insert(), insertBefore()

Common events: collapse, expand, resizeStart, resizeEnd

Module hint: smart-webcomponents/source/modules/smart.splitter.js

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

Class

Splitter
SplitterItem
SplitterBar

Splitter

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

Selector

smart-splitter

Quick picks

dataSourcedisableditemsrefresh

Properties

AanimationSpecifies or retrieves the current animation mode. When the property is set to 'none', all animations are disabled, resulting in static display without transition effects. Assigning any other valid value enables the corresponding animation mode.
AautoFitModeSpecifies how items are positioned and resized within the Splitter component.Possible values: end – All items are resized to fit exactly within the available space of the Splitter. When a new item is inserted, the required space is taken from the adjacent (neighboring) item, adjusting their sizes so that the total size remains constant and nothing overflows. proportional – All items expand or contract proportionally to occupy the full size of the Splitter. When a new item is added, the space it needs is proportionally deducted from the existing items, maintaining their relative sizes within the total available space. overflow – Items are not resized to fit the Splitter. Instead, each item retains its natural size, even if the total size exceeds the Splitter’s dimensions. In this case, a scrollbar will appear, allowing users to scroll and view all the content that overflows beyond the visible area.
DdataSourceConfigures or retrieves the data source for the splitter component. When setting, it specifies the structure and content (such as panels or sections) that will be managed and displayed within the splitter. When getting, it returns the current data source used by the splitter.
DdisabledDetermines whether the element is interactive or inactive. When enabled, users can interact with the element; when disabled, the element is non-interactive and typically appears visually distinct (e.g., grayed out) to indicate its inactive state.
IitemsA getter method that retrieves and returns an array containing all the current Splitter items. This allows you to access the complete list of items managed by the Splitter component.
KkeepProportionsOnResizeWhen enabled, this setting ensures that all items within the element maintain their original aspect ratios relative to each other whenever the element is resized. This behavior is preserved regardless of whether the size properties of the items are defined in pixels, percentages, or other units. In other words, resizing the overall element will proportionally scale all its child items, keeping their relative dimensions consistent.
LliveResizeWhen this feature is enabled, the resizing operation updates the layout in real-time as the user drags the splitter, providing immediate visual feedback. By default, live resizing is disabled; instead, a highlighted guide bar appears during the drag operation, showing where the splitter will be positioned once the user releases the mouse button. The actual layout is only updated after the drag is complete.
LlocaleSpecifies the language to be used for displaying messages. This property can be set to change the current language or retrieved to identify the active language. It works in conjunction with the messages property, which contains localized message strings for each supported language. Adjusting this property enables seamless switching between different language options in the application’s user interface.
LlocalizeFormatFunctionCallback function associated with the localization module, typically used to handle language changes, translate content, or process localization-related events within the application.
MmessagesDefines an object that maps password strength states to their corresponding string values. Each key in the object represents a specific password strength level (such as "weak," "medium," or "strong"), and its value provides the associated descriptive label or message to display to users. This allows for customizable text based on the current password strength state.
OorientationSets or retrieves the orientation of the splitter, determining whether it is displayed vertically (dividing the area into left and right sections) or horizontally (dividing the area into top and bottom sections).
RreadonlyWhen the element has the 'readonly' attribute, users can view its value but cannot modify, edit, or otherwise change its contents. However, the element may still be focused and its content can be selected and copied by the user. No direct interaction—such as typing, pasting, or deleting—is allowed.
RresizeMode'Specifies how the splitter handles resizing when a user drags the splitter bar. The available modes are:'- 'None:' Resizing is disabled; splitter bars cannot be moved.- 'Adjacent (default):' Only the two panels immediately adjacent to the splitter bar are resized when the bar is dragged. Other panels remain unchanged.- 'End:' Dragging the splitter bar affects only the first panel (located at the left or top, depending on splitter orientation) and the last panel. All intermediate panels between these two remain unaffected.- 'Proportional:' All panels located in the direction the splitter bar is dragged (for example, all panels to the right if dragging right, or below if dragging down) are resized proportionally. The new sizes are calculated based on the current size ratios of these panels, ensuring they maintain their proportional widths or heights relative to each other after resizing.'Use this property to control which panels are resized and how space is distributed when users interact with the splitter.'
RresizeStepSpecifies the increment or decrement value by which the element's size changes during a resize operation. This value controls how much the element grows or shrinks with each resizing step, allowing for precise adjustments.
RrightToLeftGets or sets a value that specifies whether the element's alignment should accommodate right-to-left (RTL) languages, such as Arabic or Hebrew. When enabled, the element's content and layout will adjust to support RTL text direction, ensuring proper display for locales that use right-to-left scripts.
TthemeSpecifies the theme for the element. The theme determines the overall appearance, including colors, fonts, and styling, to ensure a consistent and visually appealing look.
UunfocusableIf set to true, the element will be excluded from keyboard navigation and cannot receive focus via keyboard or mouse interactions.
UunlockKeySets or retrieves the unlockKey value used to authorize and enable access to the product's features. When setting, this key unlocks the product for use. When getting, it returns the currently assigned unlockKey.

Events

CcollapseThis event is triggered when a splitter item is collapsed by the user, either through a UI interaction (such as clicking a collapse button) or programmatically. It allows you to execute custom logic or respond to the change when a particular panel within the splitter component is minimized or hidden.
EexpandThis event is triggered whenever a splitter item is expanded by the user, either through interaction (such as clicking or dragging) or programmatically. It allows developers to execute custom logic in response to the expansion of a specific splitter item within the UI component.
RresizeEndThis event is triggered after the user completes resizing the splitter, indicating that the resizing action has finished and the new panel sizes have been set.
RresizeStartThis event is triggered when a user initiates the resizing of a splitter component, such as clicking and dragging the divider to adjust the size of adjacent panels. It marks the start of the resizing interaction, allowing developers to perform actions or apply styles in response to the beginning of the splitter's adjustment process.

Methods

CcollapseCollapses the specified splitter panel, minimizing its size and hiding its content within the container or layout.
EexpandAttempts to expand the splitter item, provided sufficient space is available. The expansion is only performed if there is enough remaining space in the container to accommodate the item's increased size.
HhideBarConceals the splitter bar element from view, preventing users from interacting with or resizing the associated panels.
IinsertInserts a new Splitter component into the specified position within the layout, allowing the user to divide and resize adjacent sections of the interface.
LlockBarPrevents the splitter bar from being moved by disabling user drag interactions, effectively locking its position and ensuring that adjacent panes cannot be resized.
LlockItemPrevents a splitter item from being resized by the user, ensuring that its current size remains fixed and unchangeable during layout adjustments.
RrefreshReloads and updates the Splitter component, re-rendering its layout and recalculating its size and position to reflect any recent changes to its content, configuration, or container.
RremoveAllClears all items currently contained within the Splitter component, effectively resetting it to an empty state. This operation removes every panel, section, or child element inside the Splitter, leaving no content displayed.
RremoveAtRemoves a Splitter item from the layout, detaching it from its parent container and updating the interface accordingly. This action permanently deletes the specified Splitter component and any associated layout adjustments.
SshowBarReveals a previously hidden splitter bar, allowing users to resize adjacent panes or sections within the interface.
UunlockBarEnables user interaction with a previously disabled or locked splitter bar, allowing users to adjust the size of adjacent panes or panels by dragging the splitter.
UunlockItemEnables access to a splitter item that was previously locked, allowing users to interact with or modify the item as intended. This action removes any restrictions, making the splitter fully functional within the application.
UupdateUpdates the configuration of a specific Splitter item within a Splitter component, allowing changes to its properties such as size, orientation, minimum and maximum limits, or other customizable options. This enables dynamic adjustment of the Splitter item's behavior and appearance within the parent Splitter layout.

Properties

animationSpecifies or retrieves the current animation mode. When the property is set to 'none', all animations are disabled, resulting in static display without transition effects. Assigning any other valid value enables the corresponding animation mode."none" | "simple" | "advanced"

Specifies or retrieves the current animation mode. When the property is set to 'none', all animations are disabled, resulting in static display without transition effects. Assigning any other valid value enables the corresponding animation mode.

Allowed Values

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

Default value

"advanced"

Examples

Markup and runtime examples for animation:

HTML:

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

Vanilla JS — prefer #id if multiple widgets exist on the page:

const el = document.querySelector('smart-splitter');
el.animation = "simple";

Read the current value:

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

autoFitModeSpecifies how items are positioned and resized within the Splitter component.Possible values: end – All items are resized to fit exactly within the available space of the Splitter. When a new item is inserted, the required space is taken from the adjacent (neighboring) item, adjusting their sizes so that the total size remains constant and nothing overflows. proportional – All items expand or contract proportionally to occupy the full size of the Splitter. When a new item is added, the space it needs is proportionally deducted from the existing items, maintaining their relative sizes within the total available space. overflow – Items are not resized to fit the Splitter. Instead, each item retains its natural size, even if the total size exceeds the Splitter’s dimensions. In this case, a scrollbar will appear, allowing users to scroll and view all the content that overflows beyond the visible area. "end" | "proportional" | "overflow"

Specifies how items are positioned and resized within the Splitter component.

Possible values:



end – All items are resized to fit exactly within the available space of the Splitter. When a new item is inserted, the required space is taken from the adjacent (neighboring) item, adjusting their sizes so that the total size remains constant and nothing overflows.




proportional – All items expand or contract proportionally to occupy the full size of the Splitter. When a new item is added, the space it needs is proportionally deducted from the existing items, maintaining their relative sizes within the total available space.




overflow – Items are not resized to fit the Splitter. Instead, each item retains its natural size, even if the total size exceeds the Splitter’s dimensions. In this case, a scrollbar will appear, allowing users to scroll and view all the content that overflows beyond the visible area.


Default value

"proportional"

Examples

Markup and runtime examples for autoFitMode:

HTML:

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

Vanilla JS — prefer #id if multiple widgets exist on the page:

const el = document.querySelector('smart-splitter');
el.autoFitMode = "proportional";

Read the current value:

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

dataSourceConfigures or retrieves the data source for the splitter component. When setting, it specifies the structure and content (such as panels or sections) that will be managed and displayed within the splitter. When getting, it returns the current data source used by the splitter.array

Configures or retrieves the data source for the splitter component. When setting, it specifies the structure and content (such as panels or sections) that will be managed and displayed within the splitter. When getting, it returns the current data source used by the splitter.

Try a demo showcasing the dataSource property.

Examples

Markup and runtime examples for dataSource:

HTML:

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

Vanilla JS — prefer #id if multiple widgets exist on the page:

const el = document.querySelector('smart-splitter');
el.dataSource = [object Object],[object Object],[object Object];

Read the current value:

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

disabledDetermines whether the element is interactive or inactive. When enabled, users can interact with the element; when disabled, the element is non-interactive and typically appears visually distinct (e.g., grayed out) to indicate its inactive state.boolean

Determines whether the element is interactive or inactive. When enabled, users can interact with the element; when disabled, the element is non-interactive and typically appears visually distinct (e.g., grayed out) to indicate its inactive state.

Default value

false

Examples

Markup and runtime examples for disabled:

HTML attribute:

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

Vanilla JS — prefer #id if multiple widgets exist on the page:

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

Read the current value:

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

itemsA getter method that retrieves and returns an array containing all the current Splitter items. This allows you to access the complete list of items managed by the Splitter component.array

A getter method that retrieves and returns an array containing all the current Splitter items. This allows you to access the complete list of items managed by the Splitter component.

Default value

keepProportionsOnResizeWhen enabled, this setting ensures that all items within the element maintain their original aspect ratios relative to each other whenever the element is resized. This behavior is preserved regardless of whether the size properties of the items are defined in pixels, percentages, or other units. In other words, resizing the overall element will proportionally scale all its child items, keeping their relative dimensions consistent.boolean

When enabled, this setting ensures that all items within the element maintain their original aspect ratios relative to each other whenever the element is resized. This behavior is preserved regardless of whether the size properties of the items are defined in pixels, percentages, or other units. In other words, resizing the overall element will proportionally scale all its child items, keeping their relative dimensions consistent.

Default value

false

Examples

Markup and runtime examples for keepProportionsOnResize:

HTML attribute:

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

Vanilla JS — prefer #id if multiple widgets exist on the page:

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

Read the current value:

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

liveResizeWhen this feature is enabled, the resizing operation updates the layout in real-time as the user drags the splitter, providing immediate visual feedback. By default, live resizing is disabled; instead, a highlighted guide bar appears during the drag operation, showing where the splitter will be positioned once the user releases the mouse button. The actual layout is only updated after the drag is complete.boolean

When this feature is enabled, the resizing operation updates the layout in real-time as the user drags the splitter, providing immediate visual feedback. By default, live resizing is disabled; instead, a highlighted guide bar appears during the drag operation, showing where the splitter will be positioned once the user releases the mouse button. The actual layout is only updated after the drag is complete.

Default value

false

Examples

Markup and runtime examples for liveResize:

HTML attribute:

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

Vanilla JS — prefer #id if multiple widgets exist on the page:

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

Read the current value:

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

localeSpecifies the language to be used for displaying messages. This property can be set to change the current language or retrieved to identify the active language. It works in conjunction with the messages property, which contains localized message strings for each supported language. Adjusting this property enables seamless switching between different language options in the application’s user interface.string

Specifies the language to be used for displaying messages. This property can be set to change the current language or retrieved to identify the active language. It works in conjunction with the messages property, which contains localized message strings for each supported language. Adjusting this property enables seamless switching between different language options in the application’s user interface.

Default value

"en"

Examples

Markup and runtime examples for locale:

HTML:

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

Vanilla JS — prefer #id if multiple widgets exist on the page:

const el = document.querySelector('smart-splitter');
el.locale = "fr";

Read the current value:

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

localizeFormatFunctionCallback function associated with the localization module, typically used to handle language changes, translate content, or process localization-related events within the application.function | null

Callback function associated with the localization module, typically used to handle language changes, translate content, or process localization-related events within the application.

Examples

Markup and runtime examples for localizeFormatFunction:

HTML:

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

Vanilla JS — prefer #id if multiple widgets exist on the page:

const el = document.querySelector('smart-splitter');
el.localizeFormatFunction = "function(){return '...'}";

Read the current value:

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

messagesDefines an object that maps password strength states to their corresponding string values. Each key in the object represents a specific password strength level (such as "weak," "medium," or "strong"), and its value provides the associated descriptive label or message to display to users. This allows for customizable text based on the current password strength state.object

Defines an object that maps password strength states to their corresponding string values. Each key in the object represents a specific password strength level (such as "weak," "medium," or "strong"), and its value provides the associated descriptive label or message to display to users. This allows for customizable text based on the current password strength state.

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

}

Examples

Markup and runtime examples for messages:

HTML:

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

Vanilla JS — prefer #id if multiple widgets exist on the page:

const el = document.querySelector('smart-splitter');
el.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."}};

Read the current value:

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

orientationSets or retrieves the orientation of the splitter, determining whether it is displayed vertically (dividing the area into left and right sections) or horizontally (dividing the area into top and bottom sections)."horizontal" | "vertical"

Sets or retrieves the orientation of the splitter, determining whether it is displayed vertically (dividing the area into left and right sections) or horizontally (dividing the area into top and bottom sections).

Default value

"vertical"
Try a demo showcasing the orientation property.

Examples

Markup and runtime examples for orientation:

HTML:

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

Vanilla JS — prefer #id if multiple widgets exist on the page:

const el = document.querySelector('smart-splitter');
el.orientation = "vertical";

Read the current value:

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

readonlyWhen the element has the 'readonly' attribute, users can view its value but cannot modify, edit, or otherwise change its contents. However, the element may still be focused and its content can be selected and copied by the user. No direct interaction—such as typing, pasting, or deleting—is allowed.boolean

When the element has the 'readonly' attribute, users can view its value but cannot modify, edit, or otherwise change its contents. However, the element may still be focused and its content can be selected and copied by the user. No direct interaction—such as typing, pasting, or deleting—is allowed.

Default value

false

Examples

Markup and runtime examples for readonly:

HTML attribute:

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

Vanilla JS — prefer #id if multiple widgets exist on the page:

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

Read the current value:

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

resizeMode'Specifies how the splitter handles resizing when a user drags the splitter bar. The available modes are:'- 'None:' Resizing is disabled; splitter bars cannot be moved.- 'Adjacent (default):' Only the two panels immediately adjacent to the splitter bar are resized when the bar is dragged. Other panels remain unchanged.- 'End:' Dragging the splitter bar affects only the first panel (located at the left or top, depending on splitter orientation) and the last panel. All intermediate panels between these two remain unaffected.- 'Proportional:' All panels located in the direction the splitter bar is dragged (for example, all panels to the right if dragging right, or below if dragging down) are resized proportionally. The new sizes are calculated based on the current size ratios of these panels, ensuring they maintain their proportional widths or heights relative to each other after resizing.'Use this property to control which panels are resized and how space is distributed when users interact with the splitter.'"none" | "adjacent" | "end" | "proportional"

'Specifies how the splitter handles resizing when a user drags the splitter bar. The available modes are:'

- 'None:' Resizing is disabled; splitter bars cannot be moved.
- 'Adjacent (default):' Only the two panels immediately adjacent to the splitter bar are resized when the bar is dragged. Other panels remain unchanged.
- 'End:' Dragging the splitter bar affects only the first panel (located at the left or top, depending on splitter orientation) and the last panel. All intermediate panels between these two remain unaffected.
- 'Proportional:' All panels located in the direction the splitter bar is dragged (for example, all panels to the right if dragging right, or below if dragging down) are resized proportionally. The new sizes are calculated based on the current size ratios of these panels, ensuring they maintain their proportional widths or heights relative to each other after resizing.

'Use this property to control which panels are resized and how space is distributed when users interact with the splitter.'

Default value

"adjacent"
Try a demo showcasing the resizeMode property.

Examples

Markup and runtime examples for resizeMode:

HTML:

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

Vanilla JS — prefer #id if multiple widgets exist on the page:

const el = document.querySelector('smart-splitter');
el.resizeMode = "proportional";

Read the current value:

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

resizeStepSpecifies the increment or decrement value by which the element's size changes during a resize operation. This value controls how much the element grows or shrinks with each resizing step, allowing for precise adjustments.number

Specifies the increment or decrement value by which the element's size changes during a resize operation. This value controls how much the element grows or shrinks with each resizing step, allowing for precise adjustments.

Default value

5

Examples

Markup and runtime examples for resizeStep:

HTML:

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

Vanilla JS — prefer #id if multiple widgets exist on the page:

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

Read the current value:

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

rightToLeftGets or sets a value that specifies whether the element's alignment should accommodate right-to-left (RTL) languages, such as Arabic or Hebrew. When enabled, the element's content and layout will adjust to support RTL text direction, ensuring proper display for locales that use right-to-left scripts.boolean

Gets or sets a value that specifies whether the element's alignment should accommodate right-to-left (RTL) languages, such as Arabic or Hebrew. When enabled, the element's content and layout will adjust to support RTL text direction, ensuring proper display for locales that use right-to-left scripts.

Default value

false
Try a demo showcasing the rightToLeft property.

Examples

Markup and runtime examples for rightToLeft:

HTML attribute:

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

Vanilla JS — prefer #id if multiple widgets exist on the page:

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

Read the current value:

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

themeSpecifies the theme for the element. The theme determines the overall appearance, including colors, fonts, and styling, to ensure a consistent and visually appealing look.string

Specifies the theme for the element. The theme determines the overall appearance, including colors, fonts, and styling, to ensure a consistent and visually appealing look.

Default value

""
Try a demo showcasing the theme property.

Examples

Markup and runtime examples for theme:

HTML:

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

Vanilla JS — prefer #id if multiple widgets exist on the page:

const el = document.querySelector('smart-splitter');
el.theme = "red";

Read the current value:

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

unfocusableIf set to true, the element will be excluded from keyboard navigation and cannot receive focus via keyboard or mouse interactions.boolean

If set to true, the element will be excluded from keyboard navigation and cannot receive focus via keyboard or mouse interactions.

Default value

false

Examples

Markup and runtime examples for unfocusable:

HTML attribute:

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

Vanilla JS — prefer #id if multiple widgets exist on the page:

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

Read the current value:

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

unlockKeySets or retrieves the unlockKey value used to authorize and enable access to the product's features. When setting, this key unlocks the product for use. When getting, it returns the currently assigned unlockKey.string

Sets or retrieves the unlockKey value used to authorize and enable access to the product's features. When setting, this key unlocks the product for use. When getting, it returns the currently assigned unlockKey.

Default value

""

Examples

Markup and runtime examples for unlockKey:

HTML:

<smart-splitter unlock-key=""></smart-splitter>

Vanilla JS — prefer #id if multiple widgets exist on the page:

const el = document.querySelector('smart-splitter');
el.unlockKey = "1111-2222-3333-4444-5555";

Read the current value:

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

Events

collapseThis event is triggered when a splitter item is collapsed by the user, either through a UI interaction (such as clicking a collapse button) or programmatically. It allows you to execute custom logic or respond to the change when a particular panel within the splitter component is minimized or hidden.CustomEvent

This event is triggered when a splitter item is collapsed by the user, either through a UI interaction (such as clicking a collapse button) or programmatically. It allows you to execute custom logic or respond to the change when a particular panel within the splitter component is minimized or hidden.

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

Try a demo showcasing the collapse event.

Examples

Listen for collapse using the pattern that matches your stack.

DOM — listen on the custom element (use a specific selector if the page has more than one):

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

expandThis event is triggered whenever a splitter item is expanded by the user, either through interaction (such as clicking or dragging) or programmatically. It allows developers to execute custom logic in response to the expansion of a specific splitter item within the UI component.CustomEvent

This event is triggered whenever a splitter item is expanded by the user, either through interaction (such as clicking or dragging) or programmatically. It allows developers to execute custom logic in response to the expansion of a specific splitter item within the UI component.

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

Try a demo showcasing the expand event.

Examples

Listen for expand using the pattern that matches your stack.

DOM — listen on the custom element (use a specific selector if the page has more than one):

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

resizeEndThis event is triggered after the user completes resizing the splitter, indicating that the resizing action has finished and the new panel sizes have been set.CustomEvent

This event is triggered after the user completes resizing the splitter, indicating that the resizing action has finished and the new panel sizes have been set.

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

Try a demo showcasing the resizeEnd event.

Examples

Listen for resizeEnd using the pattern that matches your stack.

DOM — listen on the custom element (use a specific selector if the page has more than one):

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

resizeStartThis event is triggered when a user initiates the resizing of a splitter component, such as clicking and dragging the divider to adjust the size of adjacent panels. It marks the start of the resizing interaction, allowing developers to perform actions or apply styles in response to the beginning of the splitter's adjustment process.CustomEvent

This event is triggered when a user initiates the resizing of a splitter component, such as clicking and dragging the divider to adjust the size of adjacent panels. It marks the start of the resizing interaction, allowing developers to perform actions or apply styles in response to the beginning of the splitter's adjustment process.

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

Try a demo showcasing the resizeStart event.

Examples

Listen for resizeStart using the pattern that matches your stack.

DOM — listen on the custom element (use a specific selector if the page has more than one):

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

Methods

appendChild( node: Node): TAppends a new node to the end of the current list or container, adding it as the last child element. This operation updates the data structure to include the newly added node as the final element in the sequence.

Arguments

nodeNode

The node to append

collapse( item: any, far?: boolean): voidCollapses the specified splitter panel, minimizing its size and hiding its content within the container or layout.

Collapses the specified splitter panel, minimizing its size and hiding its content within the container or layout.

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

On the custom element in the DOM (narrow the selector, e.g. to #my-splitter, if you host multiple widgets):

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

Try a demo showcasing the collapse method.

expand( item: any): voidAttempts to expand the splitter item, provided sufficient space is available. The expansion is only performed if there is enough remaining space in the container to accommodate the item's increased size.

Attempts to expand the splitter item, provided sufficient space is available. The expansion is only performed if there is enough remaining space in the container to accommodate the item's increased size.

Arguments

itemany

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

On the custom element in the DOM (narrow the selector, e.g. to #my-splitter, if you host multiple widgets):

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

Try a demo showcasing the expand method.

hideBar( splitterBar: number): numberConceals the splitter bar element from view, preventing users from interacting with or resizing the associated panels.

Conceals the splitter bar element from view, preventing users from interacting with or resizing the associated panels.

Arguments

splitterBarnumber

A Smart.SplitterBar instance.

Returnsnumber

On the custom element in the DOM (narrow the selector, e.g. to #my-splitter, if you host multiple widgets):

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

Try a demo showcasing the hideBar method.

insert( index: number, details: any): voidInserts a new Splitter component into the specified position within the layout, allowing the user to divide and resize adjacent sections of the interface.

Inserts a new Splitter component into the specified position within the layout, allowing the user to divide and resize adjacent sections of the interface.

Arguments

indexnumber

The index at which a new item will be inserted.

detailsany

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

On the custom element in the DOM (narrow the selector, e.g. to #my-splitter, if you host multiple widgets):

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

Try a demo showcasing the insert method.

insertBefore( newNode: Node, referenceNode?: Node | null): TInserts the specified "smart-splitter-item" node into the DOM immediately before the reference "smart-splitter-item" node, ensuring that the new element appears directly before the reference node within the splitter container. This operation preserves the order of splitter items and updates their layout accordingly.

Arguments

newNodeNode

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

referenceNode?Node | null

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

ReturnsNode

lockBar( index: number): voidPrevents the splitter bar from being moved by disabling user drag interactions, effectively locking its position and ensuring that adjacent panes cannot be resized.

Prevents the splitter bar from being moved by disabling user drag interactions, effectively locking its position and ensuring that adjacent panes cannot be resized.

Arguments

indexnumber

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

On the custom element in the DOM (narrow the selector, e.g. to #my-splitter, if you host multiple widgets):

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

lockItem( index: number): voidPrevents a splitter item from being resized by the user, ensuring that its current size remains fixed and unchangeable during layout adjustments.

Prevents a splitter item from being resized by the user, ensuring that its current size remains fixed and unchangeable during layout adjustments.

Arguments

indexnumber

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

On the custom element in the DOM (narrow the selector, e.g. to #my-splitter, if you host multiple widgets):

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

Try a demo showcasing the lockItem method.

refresh(): voidReloads and updates the Splitter component, re-rendering its layout and recalculating its size and position to reflect any recent changes to its content, configuration, or container.

Reloads and updates the Splitter component, re-rendering its layout and recalculating its size and position to reflect any recent changes to its content, configuration, or container.

On the custom element in the DOM (narrow the selector, e.g. to #my-splitter, if you host multiple widgets):

document.querySelector('smart-splitter')?.refresh();

removeAll(): voidClears all items currently contained within the Splitter component, effectively resetting it to an empty state. This operation removes every panel, section, or child element inside the Splitter, leaving no content displayed.

Clears all items currently contained within the Splitter component, effectively resetting it to an empty state. This operation removes every panel, section, or child element inside the Splitter, leaving no content displayed.

On the custom element in the DOM (narrow the selector, e.g. to #my-splitter, if you host multiple widgets):

document.querySelector('smart-splitter')?.removeAll();

removeAt( index: number): voidRemoves a Splitter item from the layout, detaching it from its parent container and updating the interface accordingly. This action permanently deletes the specified Splitter component and any associated layout adjustments.

Removes a Splitter item from the layout, detaching it from its parent container and updating the interface accordingly. This action permanently deletes the specified Splitter component and any associated layout adjustments.

Arguments

indexnumber

An item to be removed.

On the custom element in the DOM (narrow the selector, e.g. to #my-splitter, if you host multiple widgets):

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

Try a demo showcasing the removeAt method.

removeChild( node: Node): TRemoves a child node of type "smart-splitter-item" from its parent element in the DOM, effectively deleting the specified splitter pane and updating the layout accordingly.

Arguments

nodeNode

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

ReturnsNode

showBar( splitterBar: number): voidReveals a previously hidden splitter bar, allowing users to resize adjacent panes or sections within the interface.

Reveals a previously hidden splitter bar, allowing users to resize adjacent panes or sections within the interface.

Arguments

splitterBarnumber

An instance of a splitter bar.

On the custom element in the DOM (narrow the selector, e.g. to #my-splitter, if you host multiple widgets):

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

Try a demo showcasing the showBar method.

unlockBar( item: number): voidEnables user interaction with a previously disabled or locked splitter bar, allowing users to adjust the size of adjacent panes or panels by dragging the splitter.

Enables user interaction with a previously disabled or locked splitter bar, allowing users to adjust the size of adjacent panes or panels by dragging the splitter.

Arguments

itemnumber

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

On the custom element in the DOM (narrow the selector, e.g. to #my-splitter, if you host multiple widgets):

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

unlockItem( item: number): voidEnables access to a splitter item that was previously locked, allowing users to interact with or modify the item as intended. This action removes any restrictions, making the splitter fully functional within the application.

Enables access to a splitter item that was previously locked, allowing users to interact with or modify the item as intended. This action removes any restrictions, making the splitter fully functional within the application.

Arguments

itemnumber

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

On the custom element in the DOM (narrow the selector, e.g. to #my-splitter, if you host multiple widgets):

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

Try a demo showcasing the unlockItem method.

update( item: any, settings: any): voidUpdates the configuration of a specific Splitter item within a Splitter component, allowing changes to its properties such as size, orientation, minimum and maximum limits, or other customizable options. This enables dynamic adjustment of the Splitter item's behavior and appearance within the parent Splitter layout.

Updates the configuration of a specific Splitter item within a Splitter component, allowing changes to its properties such as size, orientation, minimum and maximum limits, or other customizable options. This enables dynamic adjustment of the Splitter item's behavior and appearance within the parent Splitter layout.

Arguments

itemany

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

settingsany

An object containing the properties of a Smart.SplitterItem.

On the custom element in the DOM (narrow the selector, e.g. to #my-splitter, if you host multiple widgets):

document.querySelector('smart-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

SplitterBar

SplitterBar splits two Split panels in a Splitter.

Selector

smart-splitter-bar

Methods

HhideConceals the splitter bar element from view, preventing users from seeing or interacting with it within the user interface.
LlockPrevents the splitter bar from being moved or adjusted by the user, ensuring it remains fixed in its current position.
SshowReveals a previously hidden splitter bar, allowing users to resize or adjust the layout between adjacent panels or sections within the user interface.
UunlockEnables user interaction with the splitter bar, allowing users to drag and resize adjacent panels or sections within the interface.

Properties

Methods

hide(): voidConceals the splitter bar element from view, preventing users from seeing or interacting with it within the user interface.

Conceals the splitter bar element from view, preventing users from seeing or interacting with it within the user interface.

On the custom element in the DOM (narrow the selector, e.g. to #my-splitterbar, if you host multiple widgets):

document.querySelector('smart-splitter-bar')?.hide();

lock(): voidPrevents the splitter bar from being moved or adjusted by the user, ensuring it remains fixed in its current position.

Prevents the splitter bar from being moved or adjusted by the user, ensuring it remains fixed in its current position.

On the custom element in the DOM (narrow the selector, e.g. to #my-splitterbar, if you host multiple widgets):

document.querySelector('smart-splitter-bar')?.lock();

show(): voidReveals a previously hidden splitter bar, allowing users to resize or adjust the layout between adjacent panels or sections within the user interface.

Reveals a previously hidden splitter bar, allowing users to resize or adjust the layout between adjacent panels or sections within the user interface.

On the custom element in the DOM (narrow the selector, e.g. to #my-splitterbar, if you host multiple widgets):

document.querySelector('smart-splitter-bar')?.show();

unlock(): voidEnables user interaction with the splitter bar, allowing users to drag and resize adjacent panels or sections within the interface.

Enables user interaction with the splitter bar, allowing users to drag and resize adjacent panels or sections within the interface.

On the custom element in the DOM (narrow the selector, e.g. to #my-splitterbar, if you host multiple widgets):

document.querySelector('smart-splitter-bar')?.unlock();

SplitterItem

Splitter Item is a Panel in a Splitter component.

Selector

smart-splitter-item

Quick picks

disabled

Properties

CcollapsedIndicates whether the item is currently collapsed ('true') or expanded ('false'). This property controls the visibility of the item's content in collapsible interfaces or components.
CcollapsibleSpecifies whether the item is collapsible. If set to true, the item can be expanded or collapsed by the user. If set to false, the item remains permanently expanded and cannot be collapsed.
CcontentSpecifies the elements or components that are displayed within each section (item) of the splitter layout. This property defines what content will appear in each resizable panel managed by the splitter.
DdisabledDetermines whether the element is interactive or not. When enabled, users can interact with the element; when disabled, the element is non-interactive and typically appears visually dimmed or grayed out.
LlockedSpecifies whether the item can be resized by the user. If set to true, resizing is enabled; if set to false, the item's size remains fixed.
MmaxSpecifies the maximum allowable size for the item. Values exceeding this limit will not be accepted or processed.
MminSpecifies the minimum allowed size (in the relevant unit) for the item, preventing it from shrinking below this value during layout or resizing.
SsizeSpecifies the dimensions or overall measurements of the item, such as its width, height, or depth. This property allows you to control how large or small the item appears within its container or layout.

Methods

CcollapseCollapses the item, hiding its content or child elements from view. This action reduces the item's visible footprint, typically as part of an expandable/collapsible user interface component such as an accordion or dropdown.
EexpandExpands the item to display its hidden content or details when it is currently in a collapsed (hidden) state.
LlockPrevents the item from being resized, ensuring its dimensions remain fixed and cannot be altered by the user or through code.
UunlockUnlocks access to an item that was previously restricted or unavailable, allowing full interaction or use of its features.

Properties

collapsedIndicates whether the item is currently collapsed ('true') or expanded ('false'). This property controls the visibility of the item's content in collapsible interfaces or components.boolean

Indicates whether the item is currently collapsed ('true') or expanded ('false'). This property controls the visibility of the item's content in collapsible interfaces or components.

Default value

false

Examples

Markup and runtime examples for collapsed:

HTML attribute:

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

Vanilla JS — prefer #id if multiple widgets exist on the page:

const el = document.querySelector('smart-splitter-item');
el.collapsed = false;

Read the current value:

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

collapsibleSpecifies whether the item is collapsible. If set to true, the item can be expanded or collapsed by the user. If set to false, the item remains permanently expanded and cannot be collapsed.boolean

Specifies whether the item is collapsible. If set to true, the item can be expanded or collapsed by the user. If set to false, the item remains permanently expanded and cannot be collapsed.

Default value

false

Examples

Markup and runtime examples for collapsible:

HTML attribute:

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

Vanilla JS — prefer #id if multiple widgets exist on the page:

const el = document.querySelector('smart-splitter-item');
el.collapsible = false;

Read the current value:

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

contentSpecifies the elements or components that are displayed within each section (item) of the splitter layout. This property defines what content will appear in each resizable panel managed by the splitter.any

Specifies the elements or components that are displayed within each section (item) of the splitter layout. This property defines what content will appear in each resizable panel managed by the splitter.

Default value

""

Examples

Markup and runtime examples for content:

HTML:

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

Vanilla JS — prefer #id if multiple widgets exist on the page:

const el = document.querySelector('smart-splitter-item');
el.content = "Panel";

Read the current value:

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

disabledDetermines whether the element is interactive or not. When enabled, users can interact with the element; when disabled, the element is non-interactive and typically appears visually dimmed or grayed out.boolean

Determines whether the element is interactive or not. When enabled, users can interact with the element; when disabled, the element is non-interactive and typically appears visually dimmed or grayed out.

Default value

false

Examples

Markup and runtime examples for disabled:

HTML attribute:

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

Vanilla JS — prefer #id if multiple widgets exist on the page:

const el = document.querySelector('smart-splitter-item');
el.disabled = false;

Read the current value:

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

lockedSpecifies whether the item can be resized by the user. If set to true, resizing is enabled; if set to false, the item's size remains fixed.boolean

Specifies whether the item can be resized by the user. If set to true, resizing is enabled; if set to false, the item's size remains fixed.

Default value

false

Examples

Markup and runtime examples for locked:

HTML attribute:

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

Vanilla JS — prefer #id if multiple widgets exist on the page:

const el = document.querySelector('smart-splitter-item');
el.locked = false;

Read the current value:

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

maxSpecifies the maximum allowable size for the item. Values exceeding this limit will not be accepted or processed.string

Specifies the maximum allowable size for the item. Values exceeding this limit will not be accepted or processed.

Default value

""

Examples

Markup and runtime examples for max:

HTML:

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

Vanilla JS — prefer #id if multiple widgets exist on the page:

const el = document.querySelector('smart-splitter-item');
el.max = 100;

Read the current value:

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

minSpecifies the minimum allowed size (in the relevant unit) for the item, preventing it from shrinking below this value during layout or resizing.string

Specifies the minimum allowed size (in the relevant unit) for the item, preventing it from shrinking below this value during layout or resizing.

Default value

""

Examples

Markup and runtime examples for min:

HTML:

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

Vanilla JS — prefer #id if multiple widgets exist on the page:

const el = document.querySelector('smart-splitter-item');
el.min = 100;

Read the current value:

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

sizeSpecifies the dimensions or overall measurements of the item, such as its width, height, or depth. This property allows you to control how large or small the item appears within its container or layout.string

Specifies the dimensions or overall measurements of the item, such as its width, height, or depth. This property allows you to control how large or small the item appears within its container or layout.

Default value

""

Examples

Markup and runtime examples for size:

HTML:

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

Vanilla JS — prefer #id if multiple widgets exist on the page:

const el = document.querySelector('smart-splitter-item');
el.size = 100;

Read the current value:

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

Methods

collapse( far: string): voidCollapses the item, hiding its content or child elements from view. This action reduces the item's visible footprint, typically as part of an expandable/collapsible user interface component such as an accordion or dropdown.

Collapses the item, hiding its content or child elements from view. This action reduces the item's visible footprint, typically as part of an expandable/collapsible user interface component such as an accordion or dropdown.

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)

On the custom element in the DOM (narrow the selector, e.g. to #my-splitteritem, if you host multiple widgets):

document.querySelector('smart-splitter-item')?.collapse();

expand(): voidExpands the item to display its hidden content or details when it is currently in a collapsed (hidden) state.

Expands the item to display its hidden content or details when it is currently in a collapsed (hidden) state.

On the custom element in the DOM (narrow the selector, e.g. to #my-splitteritem, if you host multiple widgets):

document.querySelector('smart-splitter-item')?.expand();

lock(): voidPrevents the item from being resized, ensuring its dimensions remain fixed and cannot be altered by the user or through code.

Prevents the item from being resized, ensuring its dimensions remain fixed and cannot be altered by the user or through code.

On the custom element in the DOM (narrow the selector, e.g. to #my-splitteritem, if you host multiple widgets):

document.querySelector('smart-splitter-item')?.lock();

unlock(): voidUnlocks access to an item that was previously restricted or unavailable, allowing full interaction or use of its features.

Unlocks access to an item that was previously restricted or unavailable, allowing full interaction or use of its features.

On the custom element in the DOM (narrow the selector, e.g. to #my-splitteritem, if you host multiple widgets):

document.querySelector('smart-splitter-item')?.unlock();