The Ribbon Component is a structured layout to manage tools with tabs and groups.
RibbonLayout
| string
Specifies the active layout of the ribbon. Accepts one of the below values.
Defaults to RibbonLayout.Classic
string
Defines one or more CSS classes to customize the appearance of ribbon.
Defaults to ”
boolean
Enable or disable persisting component’s state between page reloads.
Defaults to false
boolean
Enable or disable rendering component in right to left direction.
Defaults to false
Defines the properties of ribbon file menu.
Defaults to {}
string
| 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 ”
boolean
Specifies whether the ribbon is minimized or not. When minimized, only the tab header is shown.
Defaults to false
string
Defines the icon CSS for the launcher icon button in group header.
Defaults to ”
string
Provides the localization value for the controls present in ribbon items.
Defaults to ‘en-us’
The ribbonButtonModule
is used to create and manipulate buttons in ribbon item.
The ribbonCheckBoxModule
is used to create and manipulate checkbox in ribbon item.
The ribbonColorPickerModule
is used to create and manipulate color picker in ribbon item.
The ribbonComboBoxModule
is used to create and manipulate combobox in ribbon item.
The ribbonDropDownModule
is used to create and manipulate dropdown buttons in ribbon item.
The ribbonFileMenuModule
is used to create and manipulate the ribbon file menu.
The ribbonSplitButtonModule
is used to create and manipulate split buttons in ribbon item.
number
Specifies the index of the current active tab.
Defaults to 0
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’ } }
Defines the list of ribbon tabs.
Defaults to []
string
| number
Specifies the width of the ribbon.
Defaults to ‘100%’
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
Adds the handler to the given event listener.
Parameter | Type | Description |
---|---|---|
eventName | string |
A String that specifies the name of the event |
handler | Function |
Specifies the call to run when the event occurs. |
Returns void
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
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
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
Appends the control within the given HTML element
Parameter | Type | Description |
---|---|---|
selector (optional) | string | HTMLElement |
Target element where control needs to be appended |
Returns void
When invoked, applies the pending property changes immediately to the component.
Returns void
Disables ribbon item.
Parameter | Type | Description |
---|---|---|
itemId | string |
Gets the item ID. |
Returns void
Enables ribbon item.
Parameter | Type | Description |
---|---|---|
itemId | string |
Gets the item ID. |
Returns void
Returns the persistence data for component
Returns any
Returns the route element of the component
Returns HTMLElement
Applies all the pending property changes and render the component again.
Returns void
Refreshes the layout.
Returns void
Removes the ribbon collection.
Parameter | Type | Description |
---|---|---|
collectionId | string |
Gets the collection ID. |
Returns void
Removes the handler from the given event listener.
Parameter | Type | Description |
---|---|---|
eventName | string |
A String that specifies the name of the event to remove |
handler | Function |
Specifies the function to remove |
Returns void
Removes the ribbon group.
Parameter | Type | Description |
---|---|---|
groupId | string |
-Gets the group ID. |
Returns void
Removes ribbon item.
Parameter | Type | Description |
---|---|---|
itemId | string |
Gets the item ID. |
Returns void
Removes the ribbon tab.
Parameter | Type | Description |
---|---|---|
tabId | string |
Gets the tab ID |
Returns void
Selects the tab
Parameter | Type | Description |
---|---|---|
tabId | string |
Gets the tab ID |
Returns void
Dynamically injects the required modules to the component.
Parameter | Type | Description |
---|---|---|
moduleList | Function[] |
? |
Returns void
EmitType<LauncherClickEventArgs>
Event triggers when the launcher icon of the group is clicked.
EmitType<ExpandCollapseEventArgs>
Event triggers before collapsing the ribbon.
EmitType<ExpandCollapseEventArgs>
Event triggers before expanding the ribbon.
EmitType<TabSelectedEventArgs>
Event triggers after selecting the tab item.
EmitType<TabSelectingEventArgs>
Event triggers before selecting the tab item.