Search results

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.

Parameter Type Description
tabId string The ID of the tab to be hidden.
isContextual boolean The boolean if the rendering is contextual.

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.

Parameter Type Description
tabId string The ID of the tab to be shown.
isContextual 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

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.

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.