Ribbon
Ribbon is a navigation control that allows you to organize your application's commands in a tabbed interface.
Selector
smart-ribbon
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
collapsibleany
Determines whether the ribbon is collapsible.
Default value
falsedataSourcearray
Determines the tab items of the ribbon.
disabledboolean
Sets or gets the value indicating whether the element is disabled.
Default value
falseExample
Set the disabled property.
<smart-ribbon disabled></smart-ribbon>
Set the disabled property by using the HTML Element's instance.
const ribbon = document.querySelector('smart-ribbon');
ribbon.disabled = true;
Get the disabled property.
const ribbon = document.querySelector('smart-ribbon');
let disabled = ribbon.disabled;
fileMenuobject
Determines the file menu options of the ribbon.
Default value
nulllocalestring
Determines the locale of the ribbon.
Default value
"en"Get the locale property.
const ribbon = document.querySelector('smart-ribbon');
let locale = ribbon.fileMenu.locale;
messagesobject
Determines the messages of the ribbon
Default value
Get the messages property.
const ribbon = document.querySelector('smart-ribbon');
let messages = ribbon.fileMenu.messages;
rightToLeftboolean
Sets or gets the value indicating whether the element is aligned to support locales using right-to-left fonts.
Default value
falseExample
Set the rightToLeft property by using the HTML Element's instance.
const ribbon = document.querySelector('smart-ribbon');
ribbon.fileMenu.rightToLeft = true;
Get the rightToLeft property.
const ribbon = document.querySelector('smart-ribbon');
let rightToLeft = ribbon.fileMenu.rightToLeft;
selectedTabany
Determines the selected tab.
Default value
0Get the selectedTab property.
const ribbon = document.querySelector('smart-ribbon');
let selectedTab = ribbon.fileMenu.selectedTab;
Events
collapseCustomEvent
This event is triggered when the ribbon is collapsed.
- 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.
Example
Set up the event handler of collapse event.
const ribbon = document.querySelector('smart-ribbon');
ribbon.addEventListener('collapse', function (event) {
// event handling code goes here.
})
collapsingCustomEvent
This event is triggered when the ribbon is collapsing. The event can be canceled by calling event.preventDefault() in the event handler function.
- 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.
Example
Set up the event handler of collapsing event.
const ribbon = document.querySelector('smart-ribbon');
ribbon.addEventListener('collapsing', function (event) {
// event handling code goes here.
})
dialogLauncherClickCustomEvent
This event is triggered when the dialog launcher is clicked.
- 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.
Example
Set up the event handler of dialogLauncherClick event.
const ribbon = document.querySelector('smart-ribbon');
ribbon.addEventListener('dialogLauncherClick', function (event) {
const detail = event.detail,
groupLabel = detail.groupLabel,
groupId = detail.groupId;
// event handling code goes here.
})
expandCustomEvent
This event is triggered when the ribbon is expanded.
- 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.
Example
Set up the event handler of expand event.
const ribbon = document.querySelector('smart-ribbon');
ribbon.addEventListener('expand', function (event) {
// event handling code goes here.
})
expandingCustomEvent
This event is triggered when the ribbon is expanding. The event can be canceled by calling event.preventDefault() in the event handler function.
- 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.
Example
Set up the event handler of expanding event.
const ribbon = document.querySelector('smart-ribbon');
ribbon.addEventListener('expanding', function (event) {
// event handling code goes here.
})
fileButtonClickCustomEvent
This event is triggered when the file menu button is clicked.
- 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.
Example
Set up the event handler of fileButtonClick event.
const ribbon = document.querySelector('smart-ribbon');
ribbon.addEventListener('fileButtonClick', function (event) {
// event handling code goes here.
})
fileMenuOpenCustomEvent
This event is triggered when the file menu is opened.
- 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.
Example
Set up the event handler of fileMenuOpen event.
const ribbon = document.querySelector('smart-ribbon');
ribbon.addEventListener('fileMenuOpen', function (event) {
// event handling code goes here.
})
fileMenuCloseCustomEvent
This event is triggered when the file menu is 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.
Example
Set up the event handler of fileMenuClose event.
const ribbon = document.querySelector('smart-ribbon');
ribbon.addEventListener('fileMenuClose', function (event) {
// event handling code goes here.
})
fileMenuItemClickCustomEvent
This event is triggered when a file menu item is clicked.
- 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.
Example
Set up the event handler of fileMenuItemClick event.
const ribbon = document.querySelector('smart-ribbon');
ribbon.addEventListener('fileMenuItemClick', function (event) {
const detail = event.detail,
item = detail.item;
// event handling code goes here.
})
selectCustomEvent
This event is triggered when the tab selection is changed.
- 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.
Example
Set up the event handler of select event.
const ribbon = document.querySelector('smart-ribbon');
ribbon.addEventListener('select', function (event) {
const detail = event.detail,
oldIndex = detail.oldIndex,
index = detail.index;
// event handling code goes here.
})
selectingCustomEvent
This event is triggered when the tab selection is changing. The event can be canceled by calling event.preventDefault() in the event handler function.
- 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.
Example
Set up the event handler of selecting event.
const ribbon = document.querySelector('smart-ribbon');
ribbon.addEventListener('selecting', function (event) {
const detail = event.detail,
oldIndex = detail.oldIndex,
index = detail.index;
// event handling code goes here.
})
Methods
addTab( tab: any): void
Adds a new ribbon tab to the ribbon. The tab can be added as an object, HTMLElement or id to an HTMLElement.
Arguments
tabany
The ribbon tab to be added.
Invoke the addTab method.
const ribbon = document.querySelector('smart-ribbon');
ribbon.addTab("Tab");
addGroup( tab: any, group: any): void
Adds a new group to a ribbon tab. The group can be added as an object, HTMLElement or id to an HTMLElement.
Arguments
tabany
The id, index or HTMLElement of the parent ribbon tab.
groupany
The ribbon group to be added.
Invoke the addGroup method.
const ribbon = document.querySelector('smart-ribbon');
ribbon.addGroup("Tab");
addItem( tab: string | number | HTMLElement, group: string | HTMLElement, item: any): void
Adds a new ribbon item to a ribbon group. The item can be added as an object, HTMLElement or id to an HTMLElement.
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.
Invoke the addItem method.
const ribbon = document.querySelector('smart-ribbon');
ribbon.addItem();
collapse(): void
Collapses the ribbon.
Invoke the collapse method.
const ribbon = document.querySelector('smart-ribbon');
ribbon.collapse();
expand(): void
Expands the ribbon.
Invoke the expand method.
const ribbon = document.querySelector('smart-ribbon');
ribbon.expand();
removeTab( ribbonTab: string | number): void
Removes a ribbon tab from the ribbon.
Arguments
ribbonTabstring | number
The id or index of the ribbon tab to be removed.
Invoke the removeTab method.
const ribbon = document.querySelector('smart-ribbon');
ribbon.removeTab(0);
removeGroup( ribbonTabIndex?: string | number, ribbonGroup?: string | number): void
Removes a ribbon group from a ribbon tab.
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.
Invoke the removeGroup method.
const ribbon = document.querySelector('smart-ribbon');
ribbon.removeGroup(0);
removeItem( ribbonTabIndex?: string | number, ribbonGroup?: string | number, ribbonItem?: string | number): void
Removes a ribbon item from a ribbon group.
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.
Invoke the removeItem method.
const ribbon = document.querySelector('smart-ribbon');
ribbon.removeItem(0);
selectTab( ribbonTabIndex: string | number): void
Selects a ribbon tab.
Arguments
ribbonTabIndexstring | number
The index of the ribbon tab to be selected.
Invoke the selectTab method.
const ribbon = document.querySelector('smart-ribbon');
ribbon.selectTab(0);