Layout — Smart UI JavaScript API

Layout — 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>Layout - JavaScript Quick Start</title>
  <link rel="stylesheet" href="./node_modules/smart-webcomponents/source/styles/smart.default.css" />
</head>
<body>
  <smart-layout id="demo-layout"></smart-layout>

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

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

      el.dataSource = [
        { label: 'Main', orientation: 'horizontal', items: [
            { label: 'Navigation', size: 220 },
            { label: 'Content' }
          ]
        }
      ];

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

Developer Quick Reference

Component: Layout   Framework: JavaScript   Selector: smart-layout

API counts: 14 properties, 4 methods, 8 events

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

Common methods: getItem(), refresh(), createLayoutItem(), moveChildren()

Common events: resize, stateChange, change, closing, close, opening

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

Layout splits your content into resizable sections.

Class

Layout
LayoutItem
TabLayoutItem
LayoutGroup
TabLayoutGroup

Layout

Layout splits your content into resizable sections.

Selector

smart-layout

Quick picks

changedataSourcedisabledrefresh

Properties

AallowLiveSplitIndicates whether the splitting process occurs in real-time (live) or is performed as a pre-processed operation before use.
AanimationSets or retrieves the current animation mode for the element. When this property is set to 'none', all animations are disabled and no animation effects will be applied. Use this property to enable, disable, or specify different animation behaviors.
CcontextMenuDataSourceSpecifies the list of selectable options that will appear within the context menu, allowing users to interact with or perform actions based on their selection.
DdataSourceSets or retrieves the data source associated with the Layout component. This property allows you to define the input data that the Layout will use to render its content, or to access the current data source being used.
DdisabledDetermines whether the element is interactive or inactive. When enabled, the element can receive user input and respond to actions. When disabled, the element becomes non-interactive and does not respond to user input or events.
LlocaleSpecifies or retrieves the current language setting. This property is typically used together with the messages property to display localized content based on the selected language. Setting this value changes which language messages are used, while getting it returns the currently active language code (e.g., "en", "fr", "es").
MmessagesDefines an object containing string values that represent messages or labels corresponding to various password strength states (e.g., "weak", "medium", "strong"). This is typically used to provide user feedback on password strength during password creation or validation processes.
OorientationSets or retrieves the main orientation of the Layout component. This orientation determines how child Splitters within the Layout are arranged—either horizontally or vertically—by default. All Splitters inside the Layout will inherit this orientation unless a specific orientation is defined for them individually in the dataSource configuration.
RreadonlyIf the element is set to "readonly", users cannot modify its value, but they can still highlight and copy its contents. However, they cannot type, edit, or otherwise change the value within the field. The field remains focusable and selectable, but direct user input is disabled.
RrightToLeftSets or retrieves a value that determines whether the element's layout direction is configured for right-to-left (RTL) languages, such as Arabic or Hebrew, enabling proper alignment and rendering for locales that use RTL text.
SselectedIndexSpecifies which item is currently selected from a list or collection. This property typically holds the identifier, index, or value of the selected item, allowing the application to reference or display the chosen option.
TthemeSpecifies the theme to be applied. The theme controls the overall appearance and style of the element, including colors, fonts, and visual layout, ensuring a consistent look and feel across the user interface.
UunfocusableWhen set to true, this property prevents the element from receiving keyboard focus, making it impossible for users to select the element using tab navigation or other focus-related interactions.
UunlockKeySets or retrieves the unlockKey, a unique code or token required to grant access to and activate the product’s full functionality.

Events

CchangeThis event is triggered whenever the user changes the current selection, such as by highlighting different text or choosing a new item from a list. It occurs immediately after the selection has been modified, allowing you to respond to changes in user input or interface focus.
CcloseThis event is triggered when the context menu is closed by the user, either by selecting an option or clicking outside the menu.
CclosingThis event is triggered right before the context menu is closed. Within the event handler, you can call event.preventDefault() to cancel the closing operation, allowing you to execute custom logic or prevent the menu from closing based on certain conditions.
MmenuItemClickThis event is triggered whenever a user selects and clicks an option from the context menu. It occurs after the user has opened the context menu—typically via right-click or a long press—and chosen a specific menu item. The event provides details about the selected option, enabling you to handle custom actions or respond dynamically based on the user's selection.
OopenThis event is triggered whenever the context menu (typically accessed by right-clicking or a similar user action) is opened by the user.
OopeningThis event is fired just before the context menu appears, typically when a user right-clicks on an element. By calling event.preventDefault() within the event handler, you can prevent the default context menu from opening, allowing you to implement a custom context menu or handle the action in a different way.
RresizeThis event is triggered immediately after the user has finished resizing an element or window. It signals that the resizing action is complete, allowing you to perform any necessary updates or actions in response to the new size.
SstateChangeThis event is triggered whenever there is a change in the Layout's state. Examples include actions such as adding a new item, removing an existing item, or any other modification that alters the structure or arrangement of the Layout.

Methods

CcreateLayoutItemInserts a new item element into the Layout component, positioning it within the existing structure according to the component's layout configuration. This action updates the Layout to include the new item as part of its content, ensuring proper rendering and alignment with other elements.
GgetItemReturns the Layout item located at the specified index within the collection. The index is passed as a parameter, and the function retrieves the corresponding Layout item from the list or array. This allows you to access a particular Layout item by its position in the sequence.
MmoveChildrenTransfers all child elements or nodes from a specified source item to a designated target item, effectively moving the entire group of children so they become nested under the target item instead of the source.
RrefreshAutomatically updates and redraws the layout to reflect any recent changes, ensuring all components are properly arranged and displayed according to the latest data or configuration.

Properties

allowLiveSplitIndicates whether the splitting process occurs in real-time (live) or is performed as a pre-processed operation before use.boolean

Indicates whether the splitting process occurs in real-time (live) or is performed as a pre-processed operation before use.

Default value

false

Examples

Markup and runtime examples for allowLiveSplit:

HTML attribute:

<smart-layout allow-live-split></smart-layout>

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

const el = document.querySelector('smart-layout');
el.allowLiveSplit = true;

Read the current value:

const el = document.querySelector('smart-layout');
const allowLiveSplit = el.allowLiveSplit;

animationSets or retrieves the current animation mode for the element. When this property is set to 'none', all animations are disabled and no animation effects will be applied. Use this property to enable, disable, or specify different animation behaviors."none" | "simple" | "advanced"

Sets or retrieves the current animation mode for the element. When this property is set to 'none', all animations are disabled and no animation effects will be applied. Use this property to enable, disable, or specify different animation behaviors.

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-layout animation="none"></smart-layout>

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

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

Read the current value:

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

contextMenuDataSourceSpecifies the list of selectable options that will appear within the context menu, allowing users to interact with or perform actions based on their selection. any

Specifies the list of selectable options that will appear within the context menu, allowing users to interact with or perform actions based on their selection.

Examples

Markup and runtime examples for contextMenuDataSource:

HTML:

<smart-layout context-menu-data-source="["delete", "update"]"></smart-layout>

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

const el = document.querySelector('smart-layout');
el.contextMenuDataSource = [{ label: "delete", value: "delete" }, { label: "Update Item", value: "value" }];

Read the current value:

const el = document.querySelector('smart-layout');
const contextMenuDataSource = el.contextMenuDataSource;

dataSourceSets or retrieves the data source associated with the Layout component. This property allows you to define the input data that the Layout will use to render its content, or to access the current data source being used.array

Sets or retrieves the data source associated with the Layout component. This property allows you to define the input data that the Layout will use to render its content, or to access the current data source being used.

Try a demo showcasing the dataSource property.

Examples

Markup and runtime examples for dataSource:

HTML:

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

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

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

Read the current value:

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

disabledDetermines whether the element is interactive or inactive. When enabled, the element can receive user input and respond to actions. When disabled, the element becomes non-interactive and does not respond to user input or events.boolean

Determines whether the element is interactive or inactive. When enabled, the element can receive user input and respond to actions. When disabled, the element becomes non-interactive and does not respond to user input or events.

Default value

false

Examples

Markup and runtime examples for disabled:

HTML attribute:

<smart-layout disabled></smart-layout>

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

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

Read the current value:

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

localeSpecifies or retrieves the current language setting. This property is typically used together with the messages property to display localized content based on the selected language. Setting this value changes which language messages are used, while getting it returns the currently active language code (e.g., "en", "fr", "es").string

Specifies or retrieves the current language setting. This property is typically used together with the messages property to display localized content based on the selected language. Setting this value changes which language messages are used, while getting it returns the currently active language code (e.g., "en", "fr", "es").

Default value

"en"

Examples

Markup and runtime examples for locale:

HTML:

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

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

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

Read the current value:

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

messagesDefines an object containing string values that represent messages or labels corresponding to various password strength states (e.g., "weak", "medium", "strong"). This is typically used to provide user feedback on password strength during password creation or validation processes.object

Defines an object containing string values that represent messages or labels corresponding to various password strength states (e.g., "weak", "medium", "strong"). This is typically used to provide user feedback on password strength during password creation or validation processes.

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

}

Examples

Markup and runtime examples for messages:

HTML:

<smart-layout 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}}.","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.","invalidType":"{{elementType}}: '{{propertyName}}' muss vom Typ string oder Nummer sein.", "delete":"L�schen", "noId":"{{elementType}}: Ben�tigt eine ID, um einen Zustand zu speichern / laden."}}"></smart-layout>

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

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

Read the current value:

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

orientationSets or retrieves the main orientation of the Layout component. This orientation determines how child Splitters within the Layout are arranged—either horizontally or vertically—by default. All Splitters inside the Layout will inherit this orientation unless a specific orientation is defined for them individually in the dataSource configuration."horizontal" | "vertical"

Sets or retrieves the main orientation of the Layout component. This orientation determines how child Splitters within the Layout are arranged—either horizontally or vertically—by default. All Splitters inside the Layout will inherit this orientation unless a specific orientation is defined for them individually in the dataSource configuration.

Allowed Values

  • "horizontal" - Horizontally oriented items.
  • "vertical" - Vertically oriented items.

Default value

"vertical"
Try a demo showcasing the orientation property.

Examples

Markup and runtime examples for orientation:

HTML:

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

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

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

Read the current value:

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

readonlyIf the element is set to "readonly", users cannot modify its value, but they can still highlight and copy its contents. However, they cannot type, edit, or otherwise change the value within the field. The field remains focusable and selectable, but direct user input is disabled.boolean

If the element is set to "readonly", users cannot modify its value, but they can still highlight and copy its contents. However, they cannot type, edit, or otherwise change the value within the field. The field remains focusable and selectable, but direct user input is disabled.

Default value

false

Examples

Markup and runtime examples for readonly:

HTML attribute:

<smart-layout readonly></smart-layout>

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

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

Read the current value:

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

rightToLeftSets or retrieves a value that determines whether the element's layout direction is configured for right-to-left (RTL) languages, such as Arabic or Hebrew, enabling proper alignment and rendering for locales that use RTL text.boolean

Sets or retrieves a value that determines whether the element's layout direction is configured for right-to-left (RTL) languages, such as Arabic or Hebrew, enabling proper alignment and rendering for locales that use RTL text.

Default value

false

Examples

Markup and runtime examples for rightToLeft:

HTML attribute:

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

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

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

Read the current value:

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

selectedIndexSpecifies which item is currently selected from a list or collection. This property typically holds the identifier, index, or value of the selected item, allowing the application to reference or display the chosen option.any

Specifies which item is currently selected from a list or collection. This property typically holds the identifier, index, or value of the selected item, allowing the application to reference or display the chosen option.

Try a demo showcasing the selectedIndex property.

Examples

Markup and runtime examples for selectedIndex:

HTML:

<smart-layout selected-index="0"></smart-layout>

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

const el = document.querySelector('smart-layout');
el.selectedIndex = 0.1;

Read the current value:

const el = document.querySelector('smart-layout');
const selectedIndex = el.selectedIndex;

themeSpecifies the theme to be applied. The theme controls the overall appearance and style of the element, including colors, fonts, and visual layout, ensuring a consistent look and feel across the user interface.string

Specifies the theme to be applied. The theme controls the overall appearance and style of the element, including colors, fonts, and visual layout, ensuring a consistent look and feel across the user interface.

Default value

""

Examples

Markup and runtime examples for theme:

HTML:

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

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

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

Read the current value:

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

unfocusableWhen set to true, this property prevents the element from receiving keyboard focus, making it impossible for users to select the element using tab navigation or other focus-related interactions.boolean

When set to true, this property prevents the element from receiving keyboard focus, making it impossible for users to select the element using tab navigation or other focus-related interactions.

Default value

false

Examples

Markup and runtime examples for unfocusable:

HTML attribute:

<smart-layout unfocusable></smart-layout>

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

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

Read the current value:

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

unlockKeySets or retrieves the unlockKey, a unique code or token required to grant access to and activate the product’s full functionality.string

Sets or retrieves the unlockKey, a unique code or token required to grant access to and activate the product’s full functionality.

Default value

""

Examples

Markup and runtime examples for unlockKey:

HTML:

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

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

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

Read the current value:

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

Events

changeThis event is triggered whenever the user changes the current selection, such as by highlighting different text or choosing a new item from a list. It occurs immediately after the selection has been modified, allowing you to respond to changes in user input or interface focus.CustomEvent

This event is triggered whenever the user changes the current selection, such as by highlighting different text or choosing a new item from a list. It occurs immediately after the selection has been modified, allowing you to respond to changes in user input or interface focus.

  • Bubbles Yes
  • Cancelable No
  • Interface CustomEvent
  • Event handler property onChange

Arguments

evCustomEvent
ev.detailObject
ev.detail.oldSelectedIndex - The Splitter item that was previously selected.
ev.detail.selectedIndex - The Splitter item that is currently selected.

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.

Examples

Listen for change 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-layout')?.addEventListener('change', (event) => {
    const detail = event.detail,
        oldSelectedIndex = detail.oldSelectedIndex,
        selectedIndex = detail.selectedIndex;

	// event handling code goes here.
})

closeThis event is triggered when the context menu is closed by the user, either by selecting an option or clicking outside the menu.CustomEvent

This event is triggered when the context menu is closed by the user, either by selecting an option or clicking outside the menu.

  • Bubbles Yes
  • Cancelable No
  • Interface CustomEvent
  • Event handler property onClose

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.

Examples

Listen for close 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-layout')?.addEventListener('close', (event) => {
	// event handling code goes here.
})

closingThis event is triggered right before the context menu is closed. Within the event handler, you can call event.preventDefault() to cancel the closing operation, allowing you to execute custom logic or prevent the menu from closing based on certain conditions.CustomEvent

This event is triggered right before the context menu is closed. Within the event handler, you can call event.preventDefault() to cancel the closing operation, allowing you to execute custom logic or prevent the menu from closing based on certain conditions.

  • Bubbles Yes
  • Cancelable Yes
  • Interface CustomEvent
  • Event handler property onClosing

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.

Examples

Listen for closing 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-layout')?.addEventListener('closing', (event) => {
	// event handling code goes here.
})

menuItemClickThis event is triggered whenever a user selects and clicks an option from the context menu. It occurs after the user has opened the context menu—typically via right-click or a long press—and chosen a specific menu item. The event provides details about the selected option, enabling you to handle custom actions or respond dynamically based on the user's selection.CustomEvent

This event is triggered whenever a user selects and clicks an option from the context menu. It occurs after the user has opened the context menu—typically via right-click or a long press—and chosen a specific menu item. The event provides details about the selected option, enabling you to handle custom actions or respond dynamically based on the user's selection.

  • Bubbles Yes
  • Cancelable No
  • Interface CustomEvent
  • Event handler property onMenuItemClick

Arguments

evCustomEvent
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

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.

Examples

Listen for menuItemClick 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-layout')?.addEventListener('menuItemClick', (event) => {
    const detail = event.detail,
        target = detail.target,
        item = detail.item,
        label = detail.label,
        value = detail.value;

	// event handling code goes here.
})

openThis event is triggered whenever the context menu (typically accessed by right-clicking or a similar user action) is opened by the user.CustomEvent

This event is triggered whenever the context menu (typically accessed by right-clicking or a similar user action) is opened by the user.

  • Bubbles Yes
  • Cancelable No
  • Interface CustomEvent
  • Event handler property onOpen

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.

Examples

Listen for open 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-layout')?.addEventListener('open', (event) => {
	// event handling code goes here.
})

openingThis event is fired just before the context menu appears, typically when a user right-clicks on an element. By calling event.preventDefault() within the event handler, you can prevent the default context menu from opening, allowing you to implement a custom context menu or handle the action in a different way.CustomEvent

This event is fired just before the context menu appears, typically when a user right-clicks on an element. By calling event.preventDefault() within the event handler, you can prevent the default context menu from opening, allowing you to implement a custom context menu or handle the action in a different way.

  • Bubbles Yes
  • Cancelable Yes
  • Interface CustomEvent
  • Event handler property onOpening

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.

Examples

Listen for opening 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-layout')?.addEventListener('opening', (event) => {
	// event handling code goes here.
})

resizeThis event is triggered immediately after the user has finished resizing an element or window. It signals that the resizing action is complete, allowing you to perform any necessary updates or actions in response to the new size.CustomEvent

This event is triggered immediately after the user has finished resizing an element or window. It signals that the resizing action is complete, allowing you to perform any necessary updates or actions in response to the new size.

  • Bubbles Yes
  • Cancelable No
  • Interface CustomEvent
  • Event handler property onResize

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.

Examples

Listen for resize 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-layout')?.addEventListener('resize', (event) => {
	// event handling code goes here.
})

stateChangeThis event is triggered whenever there is a change in the Layout's state. Examples include actions such as adding a new item, removing an existing item, or any other modification that alters the structure or arrangement of the Layout.CustomEvent

This event is triggered whenever there is a change in the Layout's state. Examples include actions such as adding a new item, removing an existing item, or any other modification that alters the structure or arrangement of the Layout.

  • Bubbles Yes
  • Cancelable No
  • Interface CustomEvent
  • Event handler property onStateChange

Arguments

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

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.

Examples

Listen for stateChange 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-layout')?.addEventListener('stateChange', (event) => {
    const detail = event.detail,
        item = detail.item,
        type = detail.type;

	// event handling code goes here.
})

Methods

createLayoutItem( type: any, position?: string | undefined): voidInserts a new item element into the Layout component, positioning it within the existing structure according to the component's layout configuration. This action updates the Layout to include the new item as part of its content, ensuring proper rendering and alignment with other elements.

Inserts a new item element into the Layout component, positioning it within the existing structure according to the component's layout configuration. This action updates the Layout to include the new item as part of its content, ensuring proper rendering and alignment with other elements.

Arguments

typeany

The index of an item to be removed or an instance of Smart.SplitterItem.

position?string | undefined

A string that represents the position where the new item will be created.

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

document.querySelector('smart-layout')?.createLayoutItem("newItem, 'top'","newItem, 'bottom'");

getItem( index: number | string): voidReturns the Layout item located at the specified index within the collection. The index is passed as a parameter, and the function retrieves the corresponding Layout item from the list or array. This allows you to access a particular Layout item by its position in the sequence.

Returns the Layout item located at the specified index within the collection. The index is passed as a parameter, and the function retrieves the corresponding Layout item from the list or array. This allows you to access a particular Layout item by its position in the sequence.

Arguments

indexnumber | string

The index of an item.

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

document.querySelector('smart-layout')?.getItem(1);

moveChildren( oldItem: any, newItem: any): voidTransfers all child elements or nodes from a specified source item to a designated target item, effectively moving the entire group of children so they become nested under the target item instead of the source.

Transfers all child elements or nodes from a specified source item to a designated target item, effectively moving the entire group of children so they become nested under the target item instead of the source.

Arguments

oldItemany

The source item that will have it's content removed.

newItemany

The host item that will have it's content replaced.

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

document.querySelector('smart-layout')?.moveChildren("oldItem, newItem");

refresh(): voidAutomatically updates and redraws the layout to reflect any recent changes, ensuring all components are properly arranged and displayed according to the latest data or configuration.

Automatically updates and redraws the layout to reflect any recent changes, ensuring all components are properly arranged and displayed according to the latest data or configuration.

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

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

LayoutGroup

LayoutGroup represents a group of layout items inside the Layout.

Selector

smart-layout-group

Quick picks

disabled

Properties

DdisabledDetermines whether the element is interactive or not. When enabled, the element can be interacted with by users (e.g., clicked, edited, or focused). When disabled, the element becomes non-interactive and typically appears visually subdued, preventing any user actions.
LlabelSpecifies the text or name displayed as the label for the item, which is typically used to identify or describe the item in user interfaces.
MminSpecifies the minimum allowable size for the item, ensuring that it cannot be resized smaller than this value. This property helps maintain layout integrity by preventing the item from shrinking below the defined threshold.
MmodifiersSets or retrieves the modifier properties applied to the Layout item, allowing you to customize its appearance and behavior (such as alignment, padding, margin, or transformations). Use this property to define or access configuration options that modify how the Layout item is displayed or interacts within its container. Click for more details. Property object's options:
    OorientationSpecifies the alignment or direction in which the group’s elements are arranged (e.g., horizontal, vertical, or custom orientation). This property controls how child components are positioned within the group.
    SsizeSpecifies the overall dimensions of the item, such as its width, height, or volume, which can be used for layout, display, or calculation purposes.
    UunfocusableIf set to true, the element will be excluded from the tab order and cannot receive keyboard focus. This means users will not be able to focus on the element using the keyboard or other assistive technologies.

    Properties

    disabledDetermines whether the element is interactive or not. When enabled, the element can be interacted with by users (e.g., clicked, edited, or focused). When disabled, the element becomes non-interactive and typically appears visually subdued, preventing any user actions.boolean

    Determines whether the element is interactive or not. When enabled, the element can be interacted with by users (e.g., clicked, edited, or focused). When disabled, the element becomes non-interactive and typically appears visually subdued, preventing any user actions.

    Default value

    false

    Examples

    Markup and runtime examples for disabled:

    HTML attribute:

    <smart-layout-group disabled></smart-layout-group>

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

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

    Read the current value:

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

    labelSpecifies the text or name displayed as the label for the item, which is typically used to identify or describe the item in user interfaces.string

    Specifies the text or name displayed as the label for the item, which is typically used to identify or describe the item in user interfaces.

    Default value

    "Group"

    Examples

    Markup and runtime examples for label:

    HTML:

    <smart-layout-group label="No Content"></smart-layout-group>

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

    const el = document.querySelector('smart-layout-group');
el.label = "Please Add Content...";

    Read the current value:

    const el = document.querySelector('smart-layout-group');
const label = el.label;

    minSpecifies the minimum allowable size for the item, ensuring that it cannot be resized smaller than this value. This property helps maintain layout integrity by preventing the item from shrinking below the defined threshold.number

    Specifies the minimum allowable size for the item, ensuring that it cannot be resized smaller than this value. This property helps maintain layout integrity by preventing the item from shrinking below the defined threshold.

    Default value

    50

    Examples

    Markup and runtime examples for min:

    HTML:

    <smart-layout-group min="10"></smart-layout-group>

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

    const el = document.querySelector('smart-layout-group');
el.min = 20;

    Read the current value:

    const el = document.querySelector('smart-layout-group');
const min = el.min;

    modifiersSets or retrieves the modifier properties applied to the Layout item, allowing you to customize its appearance and behavior (such as alignment, padding, margin, or transformations). Use this property to define or access configuration options that modify how the Layout item is displayed or interacts within its container. Click for more details. Property object's options:
      array

      Sets or retrieves the modifier properties applied to the Layout item, allowing you to customize its appearance and behavior (such as alignment, padding, margin, or transformations). Use this property to define or access configuration options that modify how the Layout item is displayed or interacts within its container.

      Examples

      Markup and runtime examples for modifiers:

      HTML:

      <smart-layout-group modifiers="[ "resize", "drag"]"></smart-layout-group>

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

      const el = document.querySelector('smart-layout-group');
el.modifiers = [ "close", "drag"];

      Read the current value:

      const el = document.querySelector('smart-layout-group');
const modifiers = el.modifiers;

      orientationSpecifies the alignment or direction in which the group’s elements are arranged (e.g., horizontal, vertical, or custom orientation). This property controls how child components are positioned within the group."horizontal" | "vertical"

      Specifies the alignment or direction in which the group’s elements are arranged (e.g., horizontal, vertical, or custom orientation). This property controls how child components are positioned within the group.

      Allowed Values

      • "horizontal" - Horizontally oriented group items.
      • "vertical" - Vertically oriented group items.

      Default value

      "vertical"

      Examples

      Markup and runtime examples for orientation:

      HTML:

      <smart-layout-group orientation="horizontal"></smart-layout-group>

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

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

      Read the current value:

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

      sizeSpecifies the overall dimensions of the item, such as its width, height, or volume, which can be used for layout, display, or calculation purposes.any

      Specifies the overall dimensions of the item, such as its width, height, or volume, which can be used for layout, display, or calculation purposes.

      Examples

      Markup and runtime examples for size:

      HTML:

      <smart-layout-group size="100"></smart-layout-group>

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

      const el = document.querySelector('smart-layout-group');
el.size = 300;

      Read the current value:

      const el = document.querySelector('smart-layout-group');
const size = el.size;

      unfocusableIf set to true, the element will be excluded from the tab order and cannot receive keyboard focus. This means users will not be able to focus on the element using the keyboard or other assistive technologies.boolean

      If set to true, the element will be excluded from the tab order and cannot receive keyboard focus. This means users will not be able to focus on the element using the keyboard or other assistive technologies.

      Default value

      false

      Examples

      Markup and runtime examples for unfocusable:

      HTML attribute:

      <smart-layout-group unfocusable></smart-layout-group>

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

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

      Read the current value:

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

      Methods

      LayoutItem

      Layout item represents a single content section inside the Layout.

      Selector

      smart-layout-item

      Quick picks

      disabled

      Properties

      DdisabledSpecifies whether the element is active and interactive (enabled) or inactive and non-interactive (disabled). When disabled, users cannot interact with or modify the element.
      LlabelSpecifies the text or caption displayed as the item's label. This value is used to identify or describe the item in the user interface.
      MminSpecifies the minimum allowed size for the item. This value sets the smallest dimensions (such as width or height) that the item can be resized or displayed at within its container.
      MmodifiersSets or retrieves the modifiers applied to the Layout item, allowing you to customize its appearance or behavior, such as spacing, alignment, or other layout-related properties. Click for more details. Property object's options:
        SsizeSpecifies the dimensions of the item, such as width, height, or overall scale, to control how large or small the item appears within the interface.
        UunfocusableWhen set to true, this property prevents the element from receiving keyboard focus, making it inaccessible through keyboard navigation such as the Tab key.

        Properties

        disabledSpecifies whether the element is active and interactive (enabled) or inactive and non-interactive (disabled). When disabled, users cannot interact with or modify the element.boolean

        Specifies whether the element is active and interactive (enabled) or inactive and non-interactive (disabled). When disabled, users cannot interact with or modify the element.

        Default value

        false

        Examples

        Markup and runtime examples for disabled:

        HTML attribute:

        <smart-layout-item disabled></smart-layout-item>

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

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

        Read the current value:

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

        labelSpecifies the text or caption displayed as the item's label. This value is used to identify or describe the item in the user interface.string

        Specifies the text or caption displayed as the item's label. This value is used to identify or describe the item in the user interface.

        Default value

        "Item"

        Examples

        Markup and runtime examples for label:

        HTML:

        <smart-layout-item label="No Content"></smart-layout-item>

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

        const el = document.querySelector('smart-layout-item');
el.label = "Please Add Content...";

        Read the current value:

        const el = document.querySelector('smart-layout-item');
const label = el.label;

        minSpecifies the minimum allowed size for the item. This value sets the smallest dimensions (such as width or height) that the item can be resized or displayed at within its container.number

        Specifies the minimum allowed size for the item. This value sets the smallest dimensions (such as width or height) that the item can be resized or displayed at within its container.

        Default value

        50

        Examples

        Markup and runtime examples for min:

        HTML:

        <smart-layout-item min="10"></smart-layout-item>

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

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

        Read the current value:

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

        modifiersSets or retrieves the modifiers applied to the Layout item, allowing you to customize its appearance or behavior, such as spacing, alignment, or other layout-related properties. Click for more details. Property object's options:
          array

          Sets or retrieves the modifiers applied to the Layout item, allowing you to customize its appearance or behavior, such as spacing, alignment, or other layout-related properties.

          Examples

          Markup and runtime examples for modifiers:

          HTML:

          <smart-layout-item modifiers="[ "resize", "drag"]"></smart-layout-item>

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

          const el = document.querySelector('smart-layout-item');
el.modifiers = [ "close", "drag"];

          Read the current value:

          const el = document.querySelector('smart-layout-item');
const modifiers = el.modifiers;

          sizeSpecifies the dimensions of the item, such as width, height, or overall scale, to control how large or small the item appears within the interface.any

          Specifies the dimensions of the item, such as width, height, or overall scale, to control how large or small the item appears within the interface.

          Examples

          Markup and runtime examples for size:

          HTML:

          <smart-layout-item size="100"></smart-layout-item>

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

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

          Read the current value:

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

          unfocusableWhen set to true, this property prevents the element from receiving keyboard focus, making it inaccessible through keyboard navigation such as the Tab key.boolean

          When set to true, this property prevents the element from receiving keyboard focus, making it inaccessible through keyboard navigation such as the Tab key.

          Default value

          false

          Examples

          Markup and runtime examples for unfocusable:

          HTML attribute:

          <smart-layout-item unfocusable></smart-layout-item>

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

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

          Read the current value:

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

          Methods

          TabLayoutGroup

          TabLayoutGroup represents a group of TabLayoutItems each with it's own Tab label.

          Selector

          smart-tab-layout-group

          Quick picks

          disabled

          Properties

          DdisabledSpecifies whether the element is interactive and can be used by the user. When enabled, the element responds to user actions; when disabled, the element is inactive and cannot be interacted with.
          LlabelSpecifies the text that will be displayed as the item's label, providing a descriptive name or title for the user interface element.
          MminSpecifies the minimum allowable size for the item. This value ensures that the item's dimensions do not shrink below the defined threshold, helping maintain layout consistency and usability.
          MmodifiersGets the current modifiers applied to the Layout item, or sets new modifiers to customize its appearance and behavior. Modifiers may include properties such as alignment, spacing, padding, or visibility. Click for more details. Property object's options:
            OorientationSpecifies the orientation (horizontal or vertical) of the group, defining how its child elements are arranged within the component. This setting affects the layout and flow direction of the grouped items.
            PpositionSpecifies the alignment or placement of the group of tab items within the tab container. This determines whether the tabs are positioned, for example, at the start, center, end, or distributed evenly along the container.
            SsizeSpecifies the dimensions or overall scale of the item, such as its width, height, or length. This property defines how large or small the item appears or is rendered within the user interface or layout.
            UunfocusableWhen set to true, this property prevents the element from receiving keyboard focus, meaning it cannot be selected or navigated to using the Tab key or other keyboard navigation methods.

            Properties

            disabledSpecifies whether the element is interactive and can be used by the user. When enabled, the element responds to user actions; when disabled, the element is inactive and cannot be interacted with.boolean

            Specifies whether the element is interactive and can be used by the user. When enabled, the element responds to user actions; when disabled, the element is inactive and cannot be interacted with.

            Default value

            false

            Examples

            Markup and runtime examples for disabled:

            HTML attribute:

            <smart-tab-layout-group disabled></smart-tab-layout-group>

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

            const el = document.querySelector('smart-tab-layout-group');
el.disabled = false;

            Read the current value:

            const el = document.querySelector('smart-tab-layout-group');
const disabled = el.disabled;

            labelSpecifies the text that will be displayed as the item's label, providing a descriptive name or title for the user interface element.string

            Specifies the text that will be displayed as the item's label, providing a descriptive name or title for the user interface element.

            Default value

            "TabGroup"

            Examples

            Markup and runtime examples for label:

            HTML:

            <smart-tab-layout-group label="No Content"></smart-tab-layout-group>

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

            const el = document.querySelector('smart-tab-layout-group');
el.label = "Please Add Content...";

            Read the current value:

            const el = document.querySelector('smart-tab-layout-group');
const label = el.label;

            minSpecifies the minimum allowable size for the item. This value ensures that the item's dimensions do not shrink below the defined threshold, helping maintain layout consistency and usability.number

            Specifies the minimum allowable size for the item. This value ensures that the item's dimensions do not shrink below the defined threshold, helping maintain layout consistency and usability.

            Default value

            50

            Examples

            Markup and runtime examples for min:

            HTML:

            <smart-tab-layout-group min="10"></smart-tab-layout-group>

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

            const el = document.querySelector('smart-tab-layout-group');
el.min = 20;

            Read the current value:

            const el = document.querySelector('smart-tab-layout-group');
const min = el.min;

            modifiersGets the current modifiers applied to the Layout item, or sets new modifiers to customize its appearance and behavior. Modifiers may include properties such as alignment, spacing, padding, or visibility. Click for more details. Property object's options:
              array

              Gets the current modifiers applied to the Layout item, or sets new modifiers to customize its appearance and behavior. Modifiers may include properties such as alignment, spacing, padding, or visibility.

              Examples

              Markup and runtime examples for modifiers:

              HTML:

              <smart-tab-layout-group modifiers="[ "resize", "drag"]"></smart-tab-layout-group>

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

              const el = document.querySelector('smart-tab-layout-group');
el.modifiers = [ "close", "drag"];

              Read the current value:

              const el = document.querySelector('smart-tab-layout-group');
const modifiers = el.modifiers;

              orientationSpecifies the orientation (horizontal or vertical) of the group, defining how its child elements are arranged within the component. This setting affects the layout and flow direction of the grouped items."horizontal" | "vertical"

              Specifies the orientation (horizontal or vertical) of the group, defining how its child elements are arranged within the component. This setting affects the layout and flow direction of the grouped items.

              Allowed Values

              • "horizontal" - Horizontally oriented group items.
              • "vertical" - Vertically oriented group items.

              Default value

              "vertical"

              Examples

              Markup and runtime examples for orientation:

              HTML:

              <smart-tab-layout-group orientation="horizontal"></smart-tab-layout-group>

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

              const el = document.querySelector('smart-tab-layout-group');
el.orientation = "vertical";

              Read the current value:

              const el = document.querySelector('smart-tab-layout-group');
const orientation = el.orientation;

              positionSpecifies the alignment or placement of the group of tab items within the tab container. This determines whether the tabs are positioned, for example, at the start, center, end, or distributed evenly along the container."top" | "bottom" | "left" | "right"

              Specifies the alignment or placement of the group of tab items within the tab container. This determines whether the tabs are positioned, for example, at the start, center, end, or distributed evenly along the container.

              Allowed Values

              • "top" - Positions the tab labels on the top side of the group.
              • "bottom" - Positions the tab labels on the bottom side of the group.
              • "left" - Positions the tab labels on the left side of the group.
              • "right" - Positions the tab labels on the right side of the group.

              Default value

              "top"

              Examples

              Markup and runtime examples for position:

              HTML:

              <smart-tab-layout-group position="bottom"></smart-tab-layout-group>

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

              const el = document.querySelector('smart-tab-layout-group');
el.position = "top";

              Read the current value:

              const el = document.querySelector('smart-tab-layout-group');
const position = el.position;

              sizeSpecifies the dimensions or overall scale of the item, such as its width, height, or length. This property defines how large or small the item appears or is rendered within the user interface or layout.any

              Specifies the dimensions or overall scale of the item, such as its width, height, or length. This property defines how large or small the item appears or is rendered within the user interface or layout.

              Examples

              Markup and runtime examples for size:

              HTML:

              <smart-tab-layout-group size="100"></smart-tab-layout-group>

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

              const el = document.querySelector('smart-tab-layout-group');
el.size = 300;

              Read the current value:

              const el = document.querySelector('smart-tab-layout-group');
const size = el.size;

              unfocusableWhen set to true, this property prevents the element from receiving keyboard focus, meaning it cannot be selected or navigated to using the Tab key or other keyboard navigation methods.boolean

              When set to true, this property prevents the element from receiving keyboard focus, meaning it cannot be selected or navigated to using the Tab key or other keyboard navigation methods.

              Default value

              false

              Examples

              Markup and runtime examples for unfocusable:

              HTML attribute:

              <smart-tab-layout-group unfocusable></smart-tab-layout-group>

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

              const el = document.querySelector('smart-tab-layout-group');
el.unfocusable = false;

              Read the current value:

              const el = document.querySelector('smart-tab-layout-group');
const unfocusable = el.unfocusable;

              Methods

              TabLayoutItem

              TabLayoutItem represents a Layout Item that has a Tab label and is applicable to a TabLayoutGroup.

              Selector

              smart-tab-layout-item

              Quick picks

              disabled

              Properties

              DdisabledDetermines whether the element is interactive or not. When enabled, users can interact with the element; when disabled, the element becomes inactive and unresponsive to user actions.
              LlabelSpecifies the text or name displayed as the label for the item. This value is shown to users as the item's identifier or title in user interfaces.
              MminSpecifies the minimum allowable size for the item, ensuring that it cannot be resized or rendered smaller than this value.
              MmodifiersGets or sets the modifier properties (such as alignment, padding, spacing, or styling options) applied to the Layout item, allowing you to customize its appearance and behavior. Click for more details. Property object's options:
                OorientationSpecifies the alignment and direction in which the group’s elements are arranged, such as horizontal or vertical orientation.
                SsizeSpecifies the overall dimensions of the item, such as its width, height, or length, to define how much space the item occupies.
                UunfocusableWhen set to true, this property prevents the element from receiving keyboard focus, meaning users will not be able to access the element using the Tab key or other keyboard navigation methods.

                Properties

                disabledDetermines whether the element is interactive or not. When enabled, users can interact with the element; when disabled, the element becomes inactive and unresponsive to user actions.boolean

                Determines whether the element is interactive or not. When enabled, users can interact with the element; when disabled, the element becomes inactive and unresponsive to user actions.

                Default value

                false

                Examples

                Markup and runtime examples for disabled:

                HTML attribute:

                <smart-tab-layout-item disabled></smart-tab-layout-item>

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

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

                Read the current value:

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

                labelSpecifies the text or name displayed as the label for the item. This value is shown to users as the item's identifier or title in user interfaces.string

                Specifies the text or name displayed as the label for the item. This value is shown to users as the item's identifier or title in user interfaces.

                Default value

                "TabItem"

                Examples

                Markup and runtime examples for label:

                HTML:

                <smart-tab-layout-item label="No Content"></smart-tab-layout-item>

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

                const el = document.querySelector('smart-tab-layout-item');
el.label = "Please Add Content...";

                Read the current value:

                const el = document.querySelector('smart-tab-layout-item');
const label = el.label;

                minSpecifies the minimum allowable size for the item, ensuring that it cannot be resized or rendered smaller than this value.number

                Specifies the minimum allowable size for the item, ensuring that it cannot be resized or rendered smaller than this value.

                Default value

                50

                Examples

                Markup and runtime examples for min:

                HTML:

                <smart-tab-layout-item min="10"></smart-tab-layout-item>

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

                const el = document.querySelector('smart-tab-layout-item');
el.min = 20;

                Read the current value:

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

                modifiersGets or sets the modifier properties (such as alignment, padding, spacing, or styling options) applied to the Layout item, allowing you to customize its appearance and behavior. Click for more details. Property object's options:
                  array

                  Gets or sets the modifier properties (such as alignment, padding, spacing, or styling options) applied to the Layout item, allowing you to customize its appearance and behavior.

                  Examples

                  Markup and runtime examples for modifiers:

                  HTML:

                  <smart-tab-layout-item modifiers="[ "resize", "drag"]"></smart-tab-layout-item>

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

                  const el = document.querySelector('smart-tab-layout-item');
el.modifiers = [ "close", "drag"];

                  Read the current value:

                  const el = document.querySelector('smart-tab-layout-item');
const modifiers = el.modifiers;

                  orientationSpecifies the alignment and direction in which the group’s elements are arranged, such as horizontal or vertical orientation."horizontal" | "vertical"

                  Specifies the alignment and direction in which the group’s elements are arranged, such as horizontal or vertical orientation.

                  Allowed Values

                  • "horizontal" - Horizontally oriented group items.
                  • "vertical" - Vertically oriented group items.

                  Default value

                  "vertical"

                  Examples

                  Markup and runtime examples for orientation:

                  HTML:

                  <smart-tab-layout-item orientation="horizontal"></smart-tab-layout-item>

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

                  const el = document.querySelector('smart-tab-layout-item');
el.orientation = "vertical";

                  Read the current value:

                  const el = document.querySelector('smart-tab-layout-item');
const orientation = el.orientation;

                  sizeSpecifies the overall dimensions of the item, such as its width, height, or length, to define how much space the item occupies.any

                  Specifies the overall dimensions of the item, such as its width, height, or length, to define how much space the item occupies.

                  Examples

                  Markup and runtime examples for size:

                  HTML:

                  <smart-tab-layout-item size="100"></smart-tab-layout-item>

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

                  const el = document.querySelector('smart-tab-layout-item');
el.size = 300;

                  Read the current value:

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

                  unfocusableWhen set to true, this property prevents the element from receiving keyboard focus, meaning users will not be able to access the element using the Tab key or other keyboard navigation methods.boolean

                  When set to true, this property prevents the element from receiving keyboard focus, meaning users will not be able to access the element using the Tab key or other keyboard navigation methods.

                  Default value

                  false

                  Examples

                  Markup and runtime examples for unfocusable:

                  HTML attribute:

                  <smart-tab-layout-item unfocusable></smart-tab-layout-item>

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

                  const el = document.querySelector('smart-tab-layout-item');
el.unfocusable = false;

                  Read the current value:

                  const el = document.querySelector('smart-tab-layout-item');
const unfocusable = el.unfocusable;

                  Methods