RibbonComponent
10 Oct 202515 minutes to read
Represents the Essential JS 2 Angular Ribbon Component.
<ejs-ribbon></ejs-ribbon>Properties
activeLayout RibbonLayout|string
Specifies the active layout of the ribbon.
Accepts one of the below values.
- Classic – Renders the ribbon tab contents in classic layout.
- Simplified – Renders the ribbon tab contents in single row.
Defaults to RibbonLayout.Classic
backStageMenu BackStageMenuModel
Defines the properties of ribbon backstage.
Defaults to {}
contextualTabs RibbonContextualTabSettingsModel[]
Defines the properties of ribbon contextual tab.
Defaults to []
cssClass string
Defines one or more CSS classes to customize the appearance of ribbon.
Defaults to ’’
enableKeyTips boolean
Defines whether to enable the key tip or not.
Defaults to false
enablePersistence boolean
Enable or disable persisting component’s state between page reloads.
Defaults to false
enableRtl boolean
Enable or disable rendering component in right to left direction.
Defaults to false
fileMenu FileMenuSettingsModel
Defines the properties of ribbon file menu.
Defaults to {}
helpPaneTemplate string|object|HTMLElement
Specifies the template content for the help pane of ribbon.
The help pane appears on the right side of the ribbon header row.
Defaults to ’’
hideLayoutSwitcher boolean
Defines whether to show the layout switcher button or not.
Defaults to false
isMinimized boolean
Specifies whether the ribbon is minimized or not.
When minimized, only the tab header is shown.
Defaults to false
launcherIconCss string
Defines the icon CSS for the launcher icon button in group header.
Defaults to ’’
layoutSwitcherKeyTip string
Defines the key tip text for the layoutSwitcher icon.
Defaults to ’’
locale string
Provides the localization value for the controls present in ribbon items.
Defaults to ‘en-us’
ribbonBackstageModule RibbonBackstage
The ribbonBackstageModule is used to create and manipulate the ribbon backstage.
ribbonButtonModule RibbonButton
The ribbonButtonModule is used to create and manipulate buttons in ribbon item.
ribbonCheckBoxModule RibbonCheckBox
The ribbonCheckBoxModule is used to create and manipulate checkbox in ribbon item.
ribbonColorPickerModule RibbonColorPicker
The ribbonColorPickerModule is used to create and manipulate color picker in ribbon item.
ribbonComboBoxModule RibbonComboBox
The ribbonComboBoxModule is used to create and manipulate combobox in ribbon item.
ribbonContextualTabModule RibbonContextualTab
The ribbonContextualTabModule is used to create and manipulate group button in ribbon item.
ribbonDropDownModule RibbonDropDown
The ribbonDropDownModule is used to create and manipulate dropdown buttons in ribbon item.
ribbonFileMenuModule RibbonFileMenu
The ribbonFileMenuModule is used to create and manipulate the ribbon file menu.
ribbonGalleryModule RibbonGallery
The ribbonGalleryModule is used to create and manipulate gallery in ribbon item.
ribbonGroupButtonModule RibbonGroupButton
The ribbonGroupButtonModule is used to create and manipulate group button in ribbon item.
ribbonKeyTipModule RibbonKeyTip
The ribbonKeytipModule is used to create and manipulate the ribbon keytip.
ribbonSplitButtonModule RibbonSplitButton
The ribbonSplitButtonModule is used to create and manipulate split buttons in ribbon item.
selectedTab number
Specifies the index of the current active tab.
Defaults to 0
tabAnimation TabAnimationSettingsModel
Specifies the animation configuration settings for showing the content of the Ribbon Tab.
Defaults to { previous: { effect: ‘SlideLeftIn’, duration: 600, easing: ‘ease’ },next: { effect: ‘SlideRightIn’, duration: 600, easing: ‘ease’ } }
tabs RibbonTabModel[]
Defines the list of ribbon tabs.
Defaults to []
width string|number
Specifies the width of the ribbon.
Defaults to ‘100%’
Methods
addCollection
adds the ribbon collection.
| Parameter | Type | Description |
|---|---|---|
| groupId | string |
Gets the ribbon group ID. |
| collection | RibbonCollectionModel |
Gets the ribbon collection model. |
| targetId (optional) | string |
Gets the ID of the target collection to add the new collection. |
| isAfter (optional) | boolean |
Defines whether the collection is added before or after the target. |
Returns void
addGroup
Adds the ribbon group.
| Parameter | Type | Description |
|---|---|---|
| tabId | string |
Gets the tab ID. |
| group | RibbonGroupModel |
Gets the ribbon group model. |
| targetId (optional) | string |
Gets the ID of the target group to add the new group. |
| isAfter (optional) | boolean |
Defines whether the group is added before or after the target. |
Returns void
addItem
Adds ribbon item.
| Parameter | Type | Description |
|---|---|---|
| collectionId | string |
Gets the collection ID. |
| item | RibbonItemModel |
Gets the ribbon item model. |
| targetId (optional) | string |
Gets the ID of the target item to add the new item. |
| isAfter (optional) | boolean |
Defines whether the item is added before or after the target. |
Returns void
addTab
Adds the ribbon tab.
| Parameter | Type | Description |
|---|---|---|
| tab | RibbonTabModel |
Gets the ribbon tab model |
| targetId (optional) | string |
Gets the ID of the target tab to add the new tab. |
| isAfter (optional) | boolean |
Defines whether the tab is added before or after the target. |
Returns void
disableGroup
Disables a specific group within a ribbon tab.
| Parameter | Type | Description |
|---|---|---|
| groupID | string |
The ID of the group to be disabled. |
Returns void
disableItem
Disables ribbon item.
| Parameter | Type | Description |
|---|---|---|
| itemId | string |
Gets the item ID. |
Returns void
disableTab
Disables a specific tab in the ribbon.
| Parameter | Type | Description |
|---|---|---|
| tabId | string |
The ID of the tab to be disabled. |
Returns void
enableGroup
Enables a specific group within a ribbon tab.
| Parameter | Type | Description |
|---|---|---|
| groupID | string |
The ID of the group to be enabled. |
Returns void
enableItem
Enables ribbon item.
| Parameter | Type | Description |
|---|---|---|
| itemId | string |
Gets the item ID. |
Returns void
enableTab
Enables a specific tab in the ribbon.
| Parameter | Type | Description |
|---|---|---|
| tabId | string |
The ID of the tab to be enabled. |
Returns void
getItem
Gets the Ribbon item model associated with the specified item ID.
| Parameter | Type | Description |
|---|---|---|
| itemId | string |
The unique ID of the Ribbon item. |
Returns RibbonItemModel
hideGroup
Hides a specific group within a ribbon tab.
| Parameter | Type | Description |
|---|---|---|
| groupID | string |
The ID of the group to be hidden. |
Returns void
hideItem
Hides a specific ribbon item.
| Parameter | Type | Description |
|---|---|---|
| itemId | string |
The ID of the item to be hidden. |
Returns void
hideTab
Hides a specific tab in the ribbon.
| Parameter | Type | Description |
|---|---|---|
| tabId | string |
The ID of the tab to be hidden. |
| isContextual (optional) | boolean |
The boolean if the rendering is contextual. |
Returns void
refreshLayout
Refreshes the layout.
Returns void
removeCollection
Removes the ribbon collection.
| Parameter | Type | Description |
|---|---|---|
| collectionId | string |
Gets the collection ID. |
Returns void
removeGroup
Removes the ribbon group.
| Parameter | Type | Description |
|---|---|---|
| groupId | string |
-Gets the group ID. |
Returns void
removeItem
Removes ribbon item.
| Parameter | Type | Description |
|---|---|---|
| itemId | string |
Gets the item ID. |
Returns void
removeTab
Removes the ribbon tab.
| Parameter | Type | Description |
|---|---|---|
| tabId | string |
Gets the tab ID |
Returns void
selectTab
Selects the tab
| Parameter | Type | Description |
|---|---|---|
| tabId | string |
Gets the tab ID |
Returns void
showGroup
Shows a specific group within a ribbon tab.
| Parameter | Type | Description |
|---|---|---|
| groupID | string |
The ID of the group to be shown. |
Returns void
showItem
Shows a specific ribbon item.
| Parameter | Type | Description |
|---|---|---|
| itemId | string |
The ID of the item to be shown. |
Returns void
showTab
Shows a specific tab in the ribbon.
| Parameter | Type | Description |
|---|---|---|
| tabId | string |
The ID of the tab to be shown. |
| isContextual (optional) | boolean |
The boolean if the rendering is contextual. |
Returns void
updateCollection
collection - Gets the ribbon collection to be updated. The id of the collection is a required property. Other properties are optional.
| Parameter | Type | Description |
|---|---|---|
| collection | RibbonCollectionModel |
Gets the ribbon collection model. |
Returns void
updateGroup
group - Gets the ribbon group to be updated. The id of the group is a required property. Other properties are optional.
| Parameter | Type | Description |
|---|---|---|
| group | RibbonGroupModel |
Gets the ribbon group model. |
Returns void
updateItem
item - Gets the ribbon item to be updated. The id of the item is a required property. Other properties are optional.
| Parameter | Type | Description |
|---|---|---|
| item | RibbonItemModel |
Gets the ribbon item model. |
Returns void
updateTab
tab - Gets the ribbon tab to be updated. The id of the tab is a required property. Other properties are optional.
| Parameter | Type | Description |
|---|---|---|
| tab | RibbonTabModel |
Gets the ribbon tab model. |
Returns void
Events
created EmitType<Event>
Event triggers once the Ribbon Component rendering is completed.
launcherIconClick EmitType<LauncherClickEventArgs>
Event triggers when the launcher icon of the group is clicked.
overflowPopupClose EmitType<OverflowPopupEventArgs>
Event triggers when the overflow popup closes.
overflowPopupOpen EmitType<OverflowPopupEventArgs>
Event triggers when the overflow popup opens.
ribbonCollapsing EmitType<ExpandCollapseEventArgs>
Event triggers before collapsing the ribbon.
ribbonExpanding EmitType<ExpandCollapseEventArgs>
Event triggers before expanding the ribbon.
ribbonLayoutSwitched EmitType<LayoutSwitchedEventArgs>
Event triggers when the ribbon layout is switched.
tabSelected EmitType<TabSelectedEventArgs>
Event triggers after selecting the tab item.
tabSelecting EmitType<TabSelectingEventArgs>
Event triggers before selecting the tab item.