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

cssClass

string

Defines one or more CSS classes to customize the appearance of ribbon.

Defaults to ”

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

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 ”

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 ”

locale

string

Provides the localization value for the controls present in ribbon items.

Defaults to ‘en-us’

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.

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.

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

dataBind

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

Returns void

disableItem

Disables ribbon item.

Parameter	Type	Description
itemId	string	Gets the item ID.

Returns void

enableItem

Enables ribbon item.

Parameter	Type	Description
itemId	string	Gets the item ID.

Returns void

getLocalData

Returns the persistence data for component

Returns any

getRootElement

Returns the route element of the component

Returns HTMLElement

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

Inject

Dynamically injects the required modules to the component.

Parameter	Type	Description
moduleList	Function[]	?

Returns void

Events

launcherIconClick

EmitType<LauncherClickEventArgs>

Event triggers when the launcher icon of the group is clicked.

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.