Ribbon

The Ribbon Component is a structured layout to manage tools with tabs and groups.

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 | HTMLElement | Function

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

addEventListener

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

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

appendTo

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

attachUnloadEvent

Adding unload event to persist data when enable persistence true

Returns void

dataBind

When invoked, applies the pending property changes immediately to the component.

Returns void

detachUnloadEvent

Removing unload event to persist data when enable persistence true

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

getLocalData

Returns the persistence data for component

Returns any

getRootElement

Returns the route element of the component

Returns HTMLElement

handleUnload

Handling unload event to persist data when enable persistence true

Returns void

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.

Returns void

refresh

Applies all the pending property changes and render the component again.

Returns void

refreshLayout

Refreshes the layout.

Returns void

removeCollection

Removes the ribbon collection.

Parameter	Type	Description
collectionId	string	Gets the collection ID.

Returns void

removeEventListener

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

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.

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

Inject

Dynamically injects the required modules to the component.

Parameter	Type	Description
moduleList	Function[]	?

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.

tabSelected

EmitType<TabSelectedEventArgs>

Event triggers after selecting the tab item.

tabSelecting

EmitType<TabSelectingEventArgs>

Event triggers before selecting the tab item.