Ribbon — 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>Ribbon - JavaScript Quick Start</title>
<link rel="stylesheet" href="./node_modules/smart-webcomponents/source/styles/smart.default.css" />
</head>
<body>
<smart-ribbon id="demo-ribbon"></smart-ribbon>
<script type="module">
import './node_modules/smart-webcomponents/source/modules/smart.ribbon.js';
const el = document.getElementById('demo-ribbon');
if (el) {
el.selectedIndex = 0;
el.dataSource = [
{ label: 'HOME', items: [
{ label: 'Paste' },
{ label: 'Cut' },
{ label: 'Copy' }
]
},
{ label: 'INSERT', items: [
{ label: 'Table' },
{ label: 'Picture' }
]
}
];
el.addEventListener('change', (event) => console.log('change:', event.detail || event));
}
</script>
</body>
</html>
For AI tooling
Developer Quick Reference
Component: Ribbon Framework: JavaScript Selector: smart-ribbon
API counts: 9 properties, 9 methods, 11 events
Common properties: 0, 1, 2, 3, 4, 5
Common methods: addTab(), addGroup(), addItem(), collapse(), expand(), removeTab()
Common events: collapse, collapsing, dialogLauncherClick, expand, expanding, fileButtonClick
Module hint: smart-webcomponents/source/modules/smart.ribbon.js
Ribbon is a navigation control that allows you to organize your application's commands in a tabbed interface.
Class
Ribbon
Ribbon is a navigation control that allows you to organize your application's commands in a tabbed interface.
Selector
smart-ribbon
Quick picks
Properties
- enabled:boolean - Determines whether the file button is enabled.
- items:array - Determines the data source that will be loaded to the FileMenu. Property object's options:
- position:string - Determines the position of the file menu.
- label:string - Determines the label of the file menu.
- tooltip:string - Determines the tooltip of the file menu.
- template:string - Determines the template of the file menu. Accepts HTMLTemplateElement, an id of an HTMLTemplateElement or a Function.
- type:string - Determines the type of the file menu.
- icon:string - Determines the icon of the file menu.
Events
Methods
Properties
collapsibleSpecifies whether the ribbon interface can be collapsed or expanded by the user, allowing for a more compact or fully visible display as needed.any
Specifies whether the ribbon interface can be collapsed or expanded by the user, allowing for a more compact or fully visible display as needed.
Default value
false
dataSourceSpecifies the individual tab items to be displayed within the ribbon interface. Each tab item typically represents a distinct category or section, allowing users to easily navigate and access grouped commands or features within the ribbon.
Click for more details. Property object's options:
array
Specifies the individual tab items to be displayed within the ribbon interface. Each tab item typically represents a distinct category or section, allowing users to easily navigate and access grouped commands or features within the ribbon.
disabledSpecifies or retrieves whether the element is disabled, preventing user interaction and making it unresponsive to mouse and keyboard events. When set to true, the element cannot be activated or receive input focus.boolean
Specifies or retrieves whether the element is disabled, preventing user interaction and making it unresponsive to mouse and keyboard events. When set to true, the element cannot be activated or receive input focus.
Default value
falseExamples
Markup and runtime examples for disabled:
HTML attribute:
<smart-ribbon disabled></smart-ribbon>
Vanilla JS — prefer #id if multiple widgets exist on the page:
const el = document.querySelector('smart-ribbon');
el.disabled = true;Read the current value:
const el = document.querySelector('smart-ribbon');
const disabled = el.disabled;
fileMenuSpecifies the available file menu options displayed within the ribbon interface, defining which actions (such as New, Open, Save, Print, etc.) users can access from the file menu.
Click for more details. Property object's options:
object
Specifies the available file menu options displayed within the ribbon interface, defining which actions (such as New, Open, Save, Print, etc.) users can access from the file menu.
Default value
nulllocaleSpecifies the localization settings for the ribbon, determining the language and regional formatting (such as date, time, and number formats) used for displaying text and other interface elements.string
Specifies the localization settings for the ribbon, determining the language and regional formatting (such as date, time, and number formats) used for displaying text and other interface elements.
Default value
"en"Read the nested value:
const el = document.querySelector('smart-ribbon');
const locale = el.fileMenu.locale;
messagesSpecifies the text and content displayed in the ribbon's message area, allowing customization of informational or notification messages shown to users within the ribbon interface. object
Specifies the text and content displayed in the ribbon's message area, allowing customization of informational or notification messages shown to users within the ribbon interface.
Default value
Read the nested value:
const el = document.querySelector('smart-ribbon');
const messages = el.fileMenu.messages;
rightToLeftSpecifies or retrieves a value that determines whether the element’s alignment is optimized for right-to-left (RTL) languages, such as Arabic or Hebrew. This affects the element’s text direction, layout flow, and alignment to accommodate locales that use right-to-left scripts.boolean
Specifies or retrieves a value that determines whether the element’s alignment is optimized for right-to-left (RTL) languages, such as Arabic or Hebrew. This affects the element’s text direction, layout flow, and alignment to accommodate locales that use right-to-left scripts.
Default value
falseExamples
Set a nested field on the element:
const el = document.querySelector('smart-ribbon');
el.fileMenu.rightToLeft = true;Read the nested value:
const el = document.querySelector('smart-ribbon');
const rightToLeft = el.fileMenu.rightToLeft;
selectedTabSpecifies which tab is currently selected and active in the tab navigation component, typically by its index or identifier. This property controls which tab's content is visible to the user.any
Specifies which tab is currently selected and active in the tab navigation component, typically by its index or identifier. This property controls which tab's content is visible to the user.
Default value
0Read the nested value:
const el = document.querySelector('smart-ribbon');
const selectedTab = el.fileMenu.selectedTab;
unlockKeySets or retrieves the value of the unlockKey property, which is used to authenticate and authorize access to unlock the product. The unlockKey typically functions as a secure code or token required to enable full product functionality.string
Sets or retrieves the value of the unlockKey property, which is used to authenticate and authorize access to unlock the product. The unlockKey typically functions as a secure code or token required to enable full product functionality.
Default value
""Examples
Set a nested field on the element:
const el = document.querySelector('smart-ribbon');
el.fileMenu.unlockKey = "1111-2222-3333-4444-5555";Read the nested value:
const el = document.querySelector('smart-ribbon');
const unlockKey = el.fileMenu.unlockKey;
Events
collapseThis event is triggered whenever the ribbon component transitions from its expanded state to a collapsed state. It allows developers to execute custom logic or UI updates in response to the ribbon becoming minimized or hidden from view.CustomEvent
This event is triggered whenever the ribbon component transitions from its expanded state to a collapsed state. It allows developers to execute custom logic or UI updates in response to the ribbon becoming minimized or hidden from view.
- 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.
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-ribbon')?.addEventListener('collapse', (event) => {
// event handling code goes here.
})
collapsingThis event is fired when the ribbon begins the process of collapsing, allowing you to execute custom logic before the collapse completes. If you wish to prevent the ribbon from collapsing, you can call event.preventDefault() within your event handler. This will cancel the default collapsing action, keeping the ribbon expanded.CustomEvent
This event is fired when the ribbon begins the process of collapsing, allowing you to execute custom logic before the collapse completes. If you wish to prevent the ribbon from collapsing, you can call event.preventDefault() within your event handler. This will cancel the default collapsing action, keeping the ribbon expanded.
- Bubbles Yes
- Cancelable Yes
- Interface CustomEvent
- Event handler property onCollapsing
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 collapsing 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-ribbon')?.addEventListener('collapsing', (event) => {
// event handling code goes here.
})
dialogLauncherClickThis event is triggered when a user clicks the dialog launcher button, typically represented by a small icon (such as an arrow or ellipsis) in a component's toolbar or header. The event indicates the user's intention to open an extended options dialog or advanced settings panel related to the component.CustomEvent
This event is triggered when a user clicks the dialog launcher button, typically represented by a small icon (such as an arrow or ellipsis) in a component's toolbar or header. The event indicates the user's intention to open an extended options dialog or advanced settings panel related to the component.
- Bubbles Yes
- Cancelable No
- Interface CustomEvent
- Event handler property onDialogLauncherClick
Arguments
evCustomEvent
ev.detailObject
ev.detail.groupLabel - The label of the dialog launcher's ribbon group.
ev.detail.groupId - The id of the dialog launcher's ribbon group.
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 dialogLauncherClick 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-ribbon')?.addEventListener('dialogLauncherClick', (event) => {
const detail = event.detail,
groupLabel = detail.groupLabel,
groupId = detail.groupId;
// event handling code goes here.
})
expandThis event is triggered whenever the ribbon interface transitions from its collapsed state to an expanded state, indicating that additional options or tools have become visible to the user. Use this event to execute custom logic or UI updates whenever the ribbon expands.CustomEvent
This event is triggered whenever the ribbon interface transitions from its collapsed state to an expanded state, indicating that additional options or tools have become visible to the user. Use this event to execute custom logic or UI updates whenever the ribbon expands.
- 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.
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-ribbon')?.addEventListener('expand', (event) => {
// event handling code goes here.
})
expandingThis event is fired when the ribbon component begins to expand. You can intercept and cancel the expansion by calling event.preventDefault() within your event handler function. This allows you to programmatically control whether or not the ribbon expands based on custom logic.CustomEvent
This event is fired when the ribbon component begins to expand. You can intercept and cancel the expansion by calling event.preventDefault() within your event handler function. This allows you to programmatically control whether or not the ribbon expands based on custom logic.
- Bubbles Yes
- Cancelable Yes
- Interface CustomEvent
- Event handler property onExpanding
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 expanding 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-ribbon')?.addEventListener('expanding', (event) => {
// event handling code goes here.
})
fileButtonClickThis event is triggered whenever the file menu button is clicked by the user. It is typically used to open, display, or perform actions related to the file menu, such as showing file options or initializing file-related functions. The event provides an opportunity for developers to execute custom logic in response to user interaction with the file menu button.CustomEvent
This event is triggered whenever the file menu button is clicked by the user. It is typically used to open, display, or perform actions related to the file menu, such as showing file options or initializing file-related functions. The event provides an opportunity for developers to execute custom logic in response to user interaction with the file menu button.
- Bubbles Yes
- Cancelable No
- Interface CustomEvent
- Event handler property onFileButtonClick
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 fileButtonClick 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-ribbon')?.addEventListener('fileButtonClick', (event) => {
// event handling code goes here.
})
fileMenuCloseThis event is triggered whenever the file menu is closed, either by user interaction or programmatically. It occurs after all menu actions have completed, signaling that the file menu is no longer visible or active. Developers can use this event to execute cleanup operations, update the user interface, or manage application state in response to the menu being closed.CustomEvent
This event is triggered whenever the file menu is closed, either by user interaction or programmatically. It occurs after all menu actions have completed, signaling that the file menu is no longer visible or active. Developers can use this event to execute cleanup operations, update the user interface, or manage application state in response to the menu being closed.
- Bubbles Yes
- Cancelable No
- Interface CustomEvent
- Event handler property onFileMenuClose
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 fileMenuClose 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-ribbon')?.addEventListener('fileMenuClose', (event) => {
// event handling code goes here.
})
fileMenuItemClickThis event is triggered whenever a user clicks on an item within the file menu. It allows you to execute custom actions in response to specific file menu selections, such as opening, saving, or closing a file. The event provides details about the selected menu item, enabling context-aware handling within your application.CustomEvent
This event is triggered whenever a user clicks on an item within the file menu. It allows you to execute custom actions in response to specific file menu selections, such as opening, saving, or closing a file. The event provides details about the selected menu item, enabling context-aware handling within your application.
- Bubbles Yes
- Cancelable No
- Interface CustomEvent
- Event handler property onFileMenuItemClick
Arguments
evCustomEvent
ev.detailObject
ev.detail.item - The file menu item.
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 fileMenuItemClick 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-ribbon')?.addEventListener('fileMenuItemClick', (event) => {
const detail = event.detail,
item = detail.item;
// event handling code goes here.
})
fileMenuOpenThis event is triggered whenever the user opens the file menu, such as by clicking on the "File" option in the application's main menu bar. It allows developers to execute custom logic immediately when the file menu becomes visible to the user.CustomEvent
This event is triggered whenever the user opens the file menu, such as by clicking on the "File" option in the application's main menu bar. It allows developers to execute custom logic immediately when the file menu becomes visible to the user.
- Bubbles Yes
- Cancelable No
- Interface CustomEvent
- Event handler property onFileMenuOpen
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 fileMenuOpen 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-ribbon')?.addEventListener('fileMenuOpen', (event) => {
// event handling code goes here.
})
selectThis event is triggered whenever the user selects a different tab, indicating that the active tab within the interface has changed. It allows you to respond to changes in tab selection, such as updating displayed content, fetching new data, or tracking user navigation within tabbed components.CustomEvent
This event is triggered whenever the user selects a different tab, indicating that the active tab within the interface has changed. It allows you to respond to changes in tab selection, such as updating displayed content, fetching new data, or tracking user navigation within tabbed components.
- Bubbles Yes
- Cancelable No
- Interface CustomEvent
- Event handler property onSelect
Arguments
evCustomEvent
ev.detailObject
ev.detail.oldIndex - The previous tab index.
ev.detail.index - The new index of the selected tab.
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 select 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-ribbon')?.addEventListener('select', (event) => {
const detail = event.detail,
oldIndex = detail.oldIndex,
index = detail.index;
// event handling code goes here.
})
selectingThis event is fired immediately before the active tab changes, allowing you to intercept and potentially prevent the tab switch. To cancel the tab selection change, call event.preventDefault() within your event handler. This provides an opportunity to perform validations or prompt the user before the change is finalized.CustomEvent
This event is fired immediately before the active tab changes, allowing you to intercept and potentially prevent the tab switch. To cancel the tab selection change, call event.preventDefault() within your event handler. This provides an opportunity to perform validations or prompt the user before the change is finalized.
- Bubbles Yes
- Cancelable Yes
- Interface CustomEvent
- Event handler property onSelecting
Arguments
evCustomEvent
ev.detailObject
ev.detail.oldIndex - The previous tab index.
ev.detail.index - The new index of the selected tab.
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 selecting 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-ribbon')?.addEventListener('selecting', (event) => {
const detail = event.detail,
oldIndex = detail.oldIndex,
index = detail.index;
// event handling code goes here.
})
Methods
addGroup( tab: any, group: any): voidEnhances a ribbon tab by adding a new group. The group can be specified in one of the following ways: as an object defining its properties, as a direct reference to an HTMLElement, or as a string representing the id of an existing HTMLElement. This flexibility allows you to create the group dynamically, use an already created DOM element, or reference an element by its id.
Enhances a ribbon tab by adding a new group. The group can be specified in one of the following ways: as an object defining its properties, as a direct reference to an HTMLElement, or as a string representing the id of an existing HTMLElement. This flexibility allows you to create the group dynamically, use an already created DOM element, or reference an element by its id.
Arguments
tabany
The id, index or HTMLElement of the parent ribbon tab.
groupany
The ribbon group to be added.
On the custom element in the DOM (narrow the selector, e.g. to #my-ribbon, if you host multiple widgets):
document.querySelector('smart-ribbon')?.addGroup("Tab");
Try a demo showcasing the addGroup method.
addItem( tab: string | number | HTMLElement, group: string | HTMLElement, item: any): voidAdds a new item to a specified ribbon group in the ribbon interface. The new item can be provided in one of the following forms: as a configuration object, as an actual HTMLElement, or by specifying the id of an existing HTMLElement. This offers flexibility in how ribbon items are defined and incorporated into the ribbon group.
Adds a new item to a specified ribbon group in the ribbon interface. The new item can be provided in one of the following forms: as a configuration object, as an actual HTMLElement, or by specifying the id of an existing HTMLElement. This offers flexibility in how ribbon items are defined and incorporated into the ribbon group.
Arguments
tabstring | number | HTMLElement
The id, index or HTMLElement of the parent ribbon tab.
groupstring | HTMLElement
The id or HTMLElement of the parent ribbon group.
itemany
The ribbon item to be added.
On the custom element in the DOM (narrow the selector, e.g. to #my-ribbon, if you host multiple widgets):
document.querySelector('smart-ribbon')?.addItem();
Try a demo showcasing the addItem method.
addTab( tab: any): voidAdds a new tab to the application's ribbon interface. The tab can be specified in one of three ways: as a configuration object defining the tab's properties, as an existing HTMLElement to be used as the tab, or as a string representing the id of an existing HTMLElement to be added as the tab. This provides flexibility in how ribbon tabs are created and integrated.
Adds a new tab to the application's ribbon interface. The tab can be specified in one of three ways: as a configuration object defining the tab's properties, as an existing HTMLElement to be used as the tab, or as a string representing the id of an existing HTMLElement to be added as the tab. This provides flexibility in how ribbon tabs are created and integrated.
Arguments
tabany
The ribbon tab to be added.
On the custom element in the DOM (narrow the selector, e.g. to #my-ribbon, if you host multiple widgets):
document.querySelector('smart-ribbon')?.addTab("Tab");
Try a demo showcasing the addTab method.
collapse(): voidMinimizes the ribbon interface, hiding its commands and options, to provide more workspace on the screen.
Minimizes the ribbon interface, hiding its commands and options, to provide more workspace on the screen.
On the custom element in the DOM (narrow the selector, e.g. to #my-ribbon, if you host multiple widgets):
document.querySelector('smart-ribbon')?.collapse();
expand(): voidExpands the ribbon interface to reveal additional tools, features, and options that are otherwise hidden from view. This action increases the available workspace by displaying the full set of ribbon commands and controls.
Expands the ribbon interface to reveal additional tools, features, and options that are otherwise hidden from view. This action increases the available workspace by displaying the full set of ribbon commands and controls.
On the custom element in the DOM (narrow the selector, e.g. to #my-ribbon, if you host multiple widgets):
document.querySelector('smart-ribbon')?.expand();
removeGroup( ribbonTabIndex?: string | number, ribbonGroup?: string | number): voidRemoves a specified ribbon group from the selected ribbon tab, effectively deleting that group's controls and functionalities from the tab's interface.
Removes a specified ribbon group from the selected ribbon tab, effectively deleting that group's controls and functionalities from the tab's interface.
Arguments
ribbonTabIndex?string | number
The id or index of the parent ribbon tab.
ribbonGroup?string | number
The id or index of the ribbon group to be removed.
On the custom element in the DOM (narrow the selector, e.g. to #my-ribbon, if you host multiple widgets):
document.querySelector('smart-ribbon')?.removeGroup(0);
removeItem( ribbonTabIndex?: string | number, ribbonGroup?: string | number, ribbonItem?: string | number): voidRemoves a specified ribbon item from its parent ribbon group, effectively deleting the item from the group and updating the user interface accordingly. This operation ensures that the ribbon group no longer displays or interacts with the removed item.
Removes a specified ribbon item from its parent ribbon group, effectively deleting the item from the group and updating the user interface accordingly. This operation ensures that the ribbon group no longer displays or interacts with the removed item.
Arguments
ribbonTabIndex?string | number
The id or index of the parent ribbon tab.
ribbonGroup?string | number
The id or index of the parent ribbon group.
ribbonItem?string | number
The id or index of the ribbon item to be removed.
On the custom element in the DOM (narrow the selector, e.g. to #my-ribbon, if you host multiple widgets):
document.querySelector('smart-ribbon')?.removeItem(0);
removeTab( ribbonTab: string | number): voidRemoves a specified tab from the ribbon interface, effectively hiding it and its associated commands from the user’s view. This action ensures that the tab and its contents are no longer accessible within the ribbon navigation.
Removes a specified tab from the ribbon interface, effectively hiding it and its associated commands from the user’s view. This action ensures that the tab and its contents are no longer accessible within the ribbon navigation.
Arguments
ribbonTabstring | number
The id or index of the ribbon tab to be removed.
On the custom element in the DOM (narrow the selector, e.g. to #my-ribbon, if you host multiple widgets):
document.querySelector('smart-ribbon')?.removeTab(0);
selectTab( ribbonTabIndex: string | number): voidActivates the specified ribbon tab, bringing its contents into focus and making its associated controls and options accessible to the user.
Activates the specified ribbon tab, bringing its contents into focus and making its associated controls and options accessible to the user.
Arguments
ribbonTabIndexstring | number
The index of the ribbon tab to be selected.
On the custom element in the DOM (narrow the selector, e.g. to #my-ribbon, if you host multiple widgets):
document.querySelector('smart-ribbon')?.selectTab(0);