- Ribbon items keytip
- File menu keytip
- Backstage menu keytip
- Ribbon layout switcher keytip
- Ribbon launcher icon keytip
- Methods
- Guidelines for adding keytips
Contact Support
Ribbon Keytips in React Ribbon component
20 Mar 202424 minutes to read
The Ribbon supports keyboard navigations to interact the ribbon items using the keytips which can be enabled by setting the enableKeyTips property.
The keytips will be shown when the Alt + Windows/Command
keys are pressed.
Ribbon items keytip
You can add keytips to all the ribbon items by using the keyTip property.
import * as React from "react";
import * as ReactDom from "react-dom";
import { RibbonComponent, RibbonTabsDirective, RibbonTabDirective, RibbonCollectionsDirective, RibbonCollectionDirective, RibbonGroupsDirective, RibbonGroupDirective, RibbonItemsDirective, RibbonItemDirective, Inject, RibbonGallery, RibbonGallerySettingsModel, RibbonItemSize, RibbonGroupButtonSelection, RibbonColorPicker, RibbonKeyTip } from '@syncfusion/ej2-react-ribbon';
function App() {
let ribbonObj = React.useRef(null);
const ribbonCreated = () => {
ribbonObj.current?.ribbonKeyTipModule.showKeyTips('H');
}
const gallerySettings = (
{
itemCount: 3,
groups: [{
itemWidth: '100',
header: 'Styles',
items: [{
content: 'Normal'
}, {
content: 'No Spacing'
}, {
content: 'Heading 1'
}, {
content: 'Heading 2'
}, {
content: 'Heading 3'
}, {
content: 'Heading 4'
}, {
content: 'Heading 5'
}]
}]
}
);
const tableOptions = [{ text: "Insert Table" }, { text: "Draw Table" }, { text: "Convert Table" }, { text: "Excel SpreadSheet" }];
const pasteOptions = [{ text: "Keep Source Format" }, { text: "Merge Format" }, { text: "Keep Text Only" }];
const fontSize = ["8", "9", "10", "11", "12", "14", "16", "18", "20", "22", "24", "26", "28", "36", "48", "72", "96"];
const fontStyle = ["Algerian", "Arial", "Calibri", "Cambria", "Cambria Math", "Courier New", "Candara", "Georgia", "Impact", "Segoe Print", "Segoe Script", "Segoe UI", "Symbol", "Times New Roman", "Verdana", "Windings"];
return (
<div>
<RibbonComponent id='ribbon' ref={ribbonObj} enableKeyTips={true} created={ribbonCreated}>
<RibbonTabsDirective>
<RibbonTabDirective header='Home' keyTip='H'>
<RibbonGroupsDirective>
<RibbonGroupDirective header="Clipboard" id="clipboard" keyTip='CD' groupIconCss="e-icons e-paste" showLauncherIcon={true}>
<RibbonCollectionsDirective>
<RibbonCollectionDirective>
<RibbonItemsDirective>
<RibbonItemDirective type="SplitButton" keyTip='PA' id="pastebtn" allowedSizes={RibbonItemSize.Large}
splitButtonSettings={{ iconCss: "e-icons e-paste", items: pasteOptions, content: "Paste" }}>
</RibbonItemDirective>
</RibbonItemsDirective>
</RibbonCollectionDirective>
<RibbonCollectionDirective>
<RibbonItemsDirective>
<RibbonItemDirective type="Button" keyTip='CU' buttonSettings={{ iconCss: "e-icons e-cut", content: "Cut" }}>
</RibbonItemDirective>
<RibbonItemDirective type="Button" keyTip='CO' buttonSettings={{ iconCss: "e-icons e-copy", content: "Copy" }}>
</RibbonItemDirective>
<RibbonItemDirective type="Button" keyTip='CS' buttonSettings={{ iconCss: "e-icons e-format-painter", content: "Format Painter" }}>
</RibbonItemDirective>
</RibbonItemsDirective>
</RibbonCollectionDirective>
</RibbonCollectionsDirective>
</RibbonGroupDirective>
<RibbonGroupDirective header="Font" keyTip='FB' overflowHeader="More Font Options" groupIconCss="e-icons e-bold" isCollapsible={false} enableGroupOverflow={true} orientation="Row" cssClass='font-group'>
<RibbonCollectionsDirective>
<RibbonCollectionDirective>
<RibbonItemsDirective>
<RibbonItemDirective type="ComboBox" keyTip='O1' comboBoxSettings={{ dataSource: fontStyle, index: 3, label: 'Font Style', width: '115px', popupWidth: '150px', allowFiltering: true }}>
</RibbonItemDirective>
<RibbonItemDirective type="ComboBox" keyTip='O2' comboBoxSettings={{ dataSource: fontSize, index: 3, label: 'Font Size', width: '65px', popupWidth: '85px', allowFiltering: true }}>
</RibbonItemDirective>
</RibbonItemsDirective>
</RibbonCollectionDirective>
<RibbonCollectionDirective>
<RibbonItemsDirective>
<RibbonItemDirective type="GroupButton" keyTip='GB' allowedSizes={RibbonItemSize.Small} groupButtonSettings={{selection: RibbonGroupButtonSelection.Single, items: [{iconCss: 'e-icons e-bold', keyTip: '1', content: 'Bold', selected: true}, {iconCss: 'e-icons e-italic', keyTip: '2', content: 'Italic'}, {iconCss: 'e-icons e-underline', keyTip: '3', content: 'Underline'}, {iconCss: 'e-icons e-strikethrough', keyTip: '4', content: 'Strikethrough'},{iconCss: 'e-icons e-change-case', keyTip: '5', content: 'Change Case'}]}}>
</RibbonItemDirective>
<RibbonItemDirective type="ColorPicker" keyTip='CP' allowedSizes={RibbonItemSize.Small} colorPickerSettings={{value: '#123456'}}>
</RibbonItemDirective>
</RibbonItemsDirective>
</RibbonCollectionDirective>
</RibbonCollectionsDirective>
</RibbonGroupDirective>
<RibbonGroupDirective header="Gallery">
<RibbonCollectionsDirective>
<RibbonCollectionDirective>
<RibbonItemsDirective>
<RibbonItemDirective type="Gallery" keyTip='GY' gallerySettings={gallerySettings} >
</RibbonItemDirective>
</RibbonItemsDirective>
</RibbonCollectionDirective>
</RibbonCollectionsDirective>
</RibbonGroupDirective>
<RibbonGroupDirective header="Tables" isCollapsible={false}>
<RibbonCollectionsDirective>
<RibbonCollectionDirective>
<RibbonItemsDirective>
<RibbonItemDirective type="DropDown" keyTip='T' allowedSizes={RibbonItemSize.Large} dropDownSettings={{ iconCss: "e-icons e-table", items: tableOptions, content: "Table" }}>
</RibbonItemDirective>
</RibbonItemsDirective>
</RibbonCollectionDirective>
</RibbonCollectionsDirective>
</RibbonGroupDirective>
<RibbonGroupDirective header="Show" isCollapsible={true}>
<RibbonCollectionsDirective>
<RibbonCollectionDirective>
<RibbonItemsDirective>
<RibbonItemDirective type="CheckBox" keyTip='R1' checkBoxSettings={{ label: "Ruler", checked: false }}>
</RibbonItemDirective>
<RibbonItemDirective type="CheckBox" keyTip='R2' checkBoxSettings={{ label: "Gridlines", checked: false }}>
</RibbonItemDirective>
<RibbonItemDirective type="CheckBox" keyTip='R3' checkBoxSettings={{ label: "Navigation Pane", checked: true }}>
</RibbonItemDirective>
</RibbonItemsDirective>
</RibbonCollectionDirective>
</RibbonCollectionsDirective>
</RibbonGroupDirective>
</RibbonGroupsDirective>
</RibbonTabDirective>
</RibbonTabsDirective>
<Inject services={[RibbonGallery, RibbonColorPicker, RibbonKeyTip]} />
</RibbonComponent>
</div>
);
}
export default App;
ReactDom.render(<App />, document.getElementById("element"));
import * as React from "react";
import * as ReactDom from "react-dom";
import { RibbonComponent, RibbonTabsDirective, RibbonTabDirective, RibbonCollectionsDirective, RibbonCollectionDirective, RibbonGroupsDirective, RibbonGroupDirective, RibbonItemsDirective, RibbonItemDirective, Inject, RibbonGallery, RibbonGallerySettingsModel, RibbonItemSize, RibbonGroupButtonSelection, RibbonColorPicker, RibbonKeyTip } from '@syncfusion/ej2-react-ribbon';
import { ItemModel } from '@syncfusion/ej2-splitbuttons';
function App() {
let ribbonObj = React.useRef<RibbonComponent>(null);
const ribbonCreated = () => {
ribbonObj.current.ribbonKeyTipModule.showKeyTips('H');
};
const gallerySettings: RibbonGallerySettingsModel = (
{
itemCount: 3,
groups: [{
itemWidth: '100',
header: 'Styles',
items: [{
content: 'Normal'
}, {
content: 'No Spacing'
}, {
content: 'Heading 1'
}, {
content: 'Heading 2'
}, {
content: 'Heading 3'
}, {
content: 'Heading 4'
}, {
content: 'Heading 5'
}]
}]
}
);
const tableOptions: ItemModel[] = [{ text: "Insert Table" }, { text: "Draw Table" }, { text: "Convert Table" }, { text: "Excel SpreadSheet" }];
const pasteOptions: ItemModel[] = [{ text: "Keep Source Format" }, { text: "Merge Format" }, { text: "Keep Text Only" }];
const fontSize: string[] = ["8", "9", "10", "11", "12", "14", "16", "18", "20", "22", "24", "26", "28", "36", "48", "72", "96"];
const fontStyle: string[] = ["Algerian", "Arial", "Calibri", "Cambria", "Cambria Math", "Courier New", "Candara", "Georgia", "Impact", "Segoe Print", "Segoe Script", "Segoe UI", "Symbol", "Times New Roman", "Verdana", "Windings"];
return (
<div>
<RibbonComponent id='ribbon' ref={ribbonObj} enableKeyTips={true} created={ribbonCreated}>
<RibbonTabsDirective>
<RibbonTabDirective header='Home' keyTip='H'>
<RibbonGroupsDirective>
<RibbonGroupDirective header="Clipboard" id="clipboard" keyTip='CD' groupIconCss="e-icons e-paste" showLauncherIcon={true}>
<RibbonCollectionsDirective>
<RibbonCollectionDirective>
<RibbonItemsDirective>
<RibbonItemDirective type="SplitButton" keyTip='PA' id="pastebtn" allowedSizes={RibbonItemSize.Large}
splitButtonSettings={{ iconCss: "e-icons e-paste", items: pasteOptions, content: "Paste" }}>
</RibbonItemDirective>
</RibbonItemsDirective>
</RibbonCollectionDirective>
<RibbonCollectionDirective>
<RibbonItemsDirective>
<RibbonItemDirective type="Button" keyTip='CU' buttonSettings={{ iconCss: "e-icons e-cut", content: "Cut" }}>
</RibbonItemDirective>
<RibbonItemDirective type="Button" keyTip='CO' buttonSettings={{ iconCss: "e-icons e-copy", content: "Copy" }}>
</RibbonItemDirective>
<RibbonItemDirective type="Button" keyTip='CS' buttonSettings={{ iconCss: "e-icons e-format-painter", content: "Format Painter" }}>
</RibbonItemDirective>
</RibbonItemsDirective>
</RibbonCollectionDirective>
</RibbonCollectionsDirective>
</RibbonGroupDirective>
<RibbonGroupDirective header="Font" keyTip='FB' overflowHeader="More Font Options" groupIconCss="e-icons e-bold" isCollapsible={false} enableGroupOverflow={true} orientation="Row" cssClass='font-group'>
<RibbonCollectionsDirective>
<RibbonCollectionDirective>
<RibbonItemsDirective>
<RibbonItemDirective type="ComboBox" keyTip='O1' comboBoxSettings={{ dataSource: fontStyle, index: 3, label: 'Font Style', width: '115px', popupWidth: '150px', allowFiltering: true }}>
</RibbonItemDirective>
<RibbonItemDirective type="ComboBox" keyTip='O2' comboBoxSettings={{ dataSource: fontSize, index: 3, label: 'Font Size', width: '65px', popupWidth: '85px', allowFiltering: true }}>
</RibbonItemDirective>
</RibbonItemsDirective>
</RibbonCollectionDirective>
<RibbonCollectionDirective>
<RibbonItemsDirective>
<RibbonItemDirective type="GroupButton" keyTip='GB' allowedSizes={RibbonItemSize.Small} groupButtonSettings={{selection: RibbonGroupButtonSelection.Single, items: [{iconCss: 'e-icons e-bold', keyTip: '1', content: 'Bold', selected: true}, {iconCss: 'e-icons e-italic', keyTip: '2', content: 'Italic'}, {iconCss: 'e-icons e-underline', keyTip: '3', content: 'Underline'}, {iconCss: 'e-icons e-strikethrough', keyTip: '4', content: 'Strikethrough'},{iconCss: 'e-icons e-change-case', keyTip: '5', content: 'Change Case'}]}}>
</RibbonItemDirective>
<RibbonItemDirective type="ColorPicker" keyTip='CP' allowedSizes={RibbonItemSize.Small} colorPickerSettings={{value: '#123456'}}>
</RibbonItemDirective>
</RibbonItemsDirective>
</RibbonCollectionDirective>
</RibbonCollectionsDirective>
</RibbonGroupDirective>
<RibbonGroupDirective header="Gallery">
<RibbonCollectionsDirective>
<RibbonCollectionDirective>
<RibbonItemsDirective>
<RibbonItemDirective type="Gallery" keyTip='GY' gallerySettings={gallerySettings} >
</RibbonItemDirective>
</RibbonItemsDirective>
</RibbonCollectionDirective>
</RibbonCollectionsDirective>
</RibbonGroupDirective>
<RibbonGroupDirective header="Tables" isCollapsible={false}>
<RibbonCollectionsDirective>
<RibbonCollectionDirective>
<RibbonItemsDirective>
<RibbonItemDirective type="DropDown" keyTip='T' allowedSizes={RibbonItemSize.Large} dropDownSettings={{ iconCss: "e-icons e-table", items: tableOptions, content: "Table" }}>
</RibbonItemDirective>
</RibbonItemsDirective>
</RibbonCollectionDirective>
</RibbonCollectionsDirective>
</RibbonGroupDirective>
<RibbonGroupDirective header="Show" isCollapsible={true}>
<RibbonCollectionsDirective>
<RibbonCollectionDirective>
<RibbonItemsDirective>
<RibbonItemDirective type="CheckBox" keyTip='R1' checkBoxSettings={{ label: "Ruler", checked: false }}>
</RibbonItemDirective>
<RibbonItemDirective type="CheckBox" keyTip='R2' checkBoxSettings={{ label: "Gridlines", checked: false }}>
</RibbonItemDirective>
<RibbonItemDirective type="CheckBox" keyTip='R3' checkBoxSettings={{ label: "Navigation Pane", checked: true }}>
</RibbonItemDirective>
</RibbonItemsDirective>
</RibbonCollectionDirective>
</RibbonCollectionsDirective>
</RibbonGroupDirective>
</RibbonGroupsDirective>
</RibbonTabDirective>
</RibbonTabsDirective>
<Inject services={[RibbonGallery, RibbonColorPicker, RibbonKeyTip]} />
</RibbonComponent>
</div>
);
}
export default App;
ReactDom.render(<App />, document.getElementById("element"));
/* Represents the styles for loader */
#loader {
color: #008cff;
height: 40px;
left: 45%;
position: absolute;
top: 45%;
width: 30%;
}
File menu keytip
You can add keytips to the file menu by using the keyTip property.
import * as React from "react";
import * as ReactDom from "react-dom";
import { RibbonComponent, RibbonTabsDirective, RibbonTabDirective, RibbonCollectionsDirective, RibbonCollectionDirective, RibbonGroupsDirective, RibbonGroupDirective, RibbonItemsDirective, RibbonItemDirective, Inject, RibbonItemSize, RibbonKeyTip, RibbonFileMenu } from '@syncfusion/ej2-react-ribbon';
function App() {
let ribbonObj = React.useRef(null);
const ribbonCreated = () => {
ribbonObj.current?.ribbonKeyTipModule.showKeyTips();
}
const fileOptions = [
{ text: "New", iconCss: "e-icons e-file-new", id: "new" },
{ text: "Open", iconCss: "e-icons e-folder-open", id: "Open" },
{ text: "Rename", iconCss: "e-icons e-rename", id: "rename" },
{ text: "Save as", iconCss: "e-icons e-save", id: "save" }
]
const pasteOptions = [{ text: "Keep Source Format" }, { text: "Merge Format" }, { text: "Keep Text Only" }];
return (
<div>
<RibbonComponent id='ribbon' ref={ribbonObj} enableKeyTips={true} created={ribbonCreated} fileMenu={{ visible: true, keyTip: 'F', menuItems: fileOptions}}>
<RibbonTabsDirective>
<RibbonTabDirective header='Home'>
<RibbonGroupsDirective>
<RibbonGroupDirective header="Clipboard" id="clipboard" groupIconCss="e-icons e-paste" showLauncherIcon={true}>
<RibbonCollectionsDirective>
<RibbonCollectionDirective>
<RibbonItemsDirective>
<RibbonItemDirective type="SplitButton" id="pastebtn" allowedSizes={RibbonItemSize.Large}
splitButtonSettings={{ iconCss: "e-icons e-paste", items: pasteOptions, content: "Paste" }}>
</RibbonItemDirective>
</RibbonItemsDirective>
</RibbonCollectionDirective>
<RibbonCollectionDirective>
<RibbonItemsDirective>
<RibbonItemDirective type="Button" buttonSettings={{ iconCss: "e-icons e-cut", content: "Cut" }}>
</RibbonItemDirective>
<RibbonItemDirective type="Button" buttonSettings={{ iconCss: "e-icons e-copy", content: "Copy" }}>
</RibbonItemDirective>
</RibbonItemsDirective>
</RibbonCollectionDirective>
</RibbonCollectionsDirective>
</RibbonGroupDirective>
</RibbonGroupsDirective>
</RibbonTabDirective>
</RibbonTabsDirective>
<Inject services={[RibbonFileMenu, RibbonKeyTip]} />
</RibbonComponent>
</div>
);
}
export default App;
ReactDom.render(<App />, document.getElementById("element"));
import * as React from "react";
import * as ReactDom from "react-dom";
import { RibbonComponent, RibbonTabsDirective, RibbonTabDirective, RibbonCollectionsDirective, RibbonCollectionDirective, RibbonGroupsDirective, RibbonGroupDirective, RibbonItemsDirective, RibbonItemDirective, Inject, RibbonItemSize, RibbonKeyTip, RibbonFileMenu } from '@syncfusion/ej2-react-ribbon';
import { ItemModel } from '@syncfusion/ej2-splitbuttons';
import { MenuItemModel } from '@syncfusion/ej2-navigations';
function App() {
let ribbonObj = React.useRef<RibbonComponent>(null);
const ribbonCreated = () => {
ribbonObj.current.ribbonKeyTipModule.showKeyTips();
};
const fileOptions: MenuItemModel[] = [
{ text: "New", iconCss: "e-icons e-file-new", id: "new" },
{ text: "Open", iconCss: "e-icons e-folder-open", id: "Open" },
{ text: "Rename", iconCss: "e-icons e-rename", id: "rename" },
{ text: "Save as", iconCss: "e-icons e-save", id: "save" }
];
const pasteOptions: ItemModel[] = [{ text: "Keep Source Format" }, { text: "Merge Format" }, { text: "Keep Text Only" }];
return (
<div>
<RibbonComponent id='ribbon' ref={ribbonObj} enableKeyTips={true} created={ribbonCreated} fileMenu={{ visible: true, keyTip: 'F', menuItems: fileOptions}}>
<RibbonTabsDirective>
<RibbonTabDirective header='Home'>
<RibbonGroupsDirective>
<RibbonGroupDirective header="Clipboard" id="clipboard" groupIconCss="e-icons e-paste" showLauncherIcon={true}>
<RibbonCollectionsDirective>
<RibbonCollectionDirective>
<RibbonItemsDirective>
<RibbonItemDirective type="SplitButton" id="pastebtn" allowedSizes={RibbonItemSize.Large}
splitButtonSettings={{ iconCss: "e-icons e-paste", items: pasteOptions, content: "Paste" }}>
</RibbonItemDirective>
</RibbonItemsDirective>
</RibbonCollectionDirective>
<RibbonCollectionDirective>
<RibbonItemsDirective>
<RibbonItemDirective type="Button" buttonSettings={{ iconCss: "e-icons e-cut", content: "Cut" }}>
</RibbonItemDirective>
<RibbonItemDirective type="Button" buttonSettings={{ iconCss: "e-icons e-copy", content: "Copy" }}>
</RibbonItemDirective>
</RibbonItemsDirective>
</RibbonCollectionDirective>
</RibbonCollectionsDirective>
</RibbonGroupDirective>
</RibbonGroupsDirective>
</RibbonTabDirective>
</RibbonTabsDirective>
<Inject services={[RibbonFileMenu, RibbonKeyTip]} />
</RibbonComponent>
</div>
);
}
export default App;
ReactDom.render(<App />, document.getElementById("element"));
/* Represents the styles for loader */
#loader {
color: #008cff;
height: 40px;
left: 45%;
position: absolute;
top: 45%;
width: 30%;
}
Backstage menu keytip
You can add keytips to backstage menu items by using the keyTip property.
import * as React from "react";
import * as ReactDom from "react-dom";
import { RibbonComponent, RibbonTabsDirective, RibbonTabDirective, RibbonCollectionsDirective, RibbonCollectionDirective, RibbonGroupsDirective, RibbonGroupDirective, RibbonItemsDirective, RibbonItemDirective, Inject, RibbonItemSize, RibbonKeyTip, RibbonBackstage } from '@syncfusion/ej2-react-ribbon';
function App() {
let ribbonObj = React.useRef(null);
const ribbonCreated = () => {
ribbonObj.current?.ribbonKeyTipModule.showKeyTips('F');
}
const backstageSettings = {
visible: true,
keyTip: 'F',
items: [
{ id: 'home', keyTip: 'H', text: 'Home', iconCss: 'e-icons e-home', content: homeContentTemplate() },
{ id: 'new', keyTip: 'N', text: 'New', iconCss: 'e-icons e-file-new', content: newContentTemplate() },
{ id: 'open', keyTip: 'O', text: 'Open', iconCss: 'e-icons e-folder-open', content: openContentTemplate() }
],
backButton: {
text: 'Close',
}
}
const pasteOptions = [{ text: "Keep Source Format" }, { text: "Merge Format" }, { text: "Keep Text Only" }];
function homeContentTemplate () {
return "<div id='home-wrapper' style='padding: 20px;'><div id='new-section' class='new-wrapper'><div class='section-title'> New </div><div class='category_container'><div class='doc_category_image'></div><span class='doc_category_text'> New document </span></div></div><div id='block-wrapper'><div class='section-title'> Recent </div><div class='section-content' style='padding: 12px 0px; cursor: pointer'><table><tbody><tr><td> <span class='doc_icon e-icons e-open-link'></span> </td><td><span style='display: block; font-size: 14px'> Ribbon.docx </span><span style='font-size: 12px'> EJ2 >> Components >> Navigations >> Ribbon >> default </span></td></tr></tbody></table></div></div></div>"
}
function newContentTemplate () {
return (
"<div id='new-content' style='padding: 20px;'><div id='new-section' class='new-wrapper'><div class='section-title'> New </div><div class='category_container'><div class='doc_category_image'></div><span class='doc_category_text'> New document </span></div></div></div> "
)
}
function openContentTemplate () {
return (
"<div style='padding: 20px;'><div class='section-content' style='padding: 12px 0px; cursor: pointer'><table><tbody><tr><td> <span class='doc_icon e-icons e-open-link'></span> </td><td><span style='display: block; font-size: 14px'> Open in Desktop App </span><span style='font-size: 12px'> Use the full functionality of Ribbon </span></td></tr></tbody></table></div><div class='section-content' style='padding: 12px 0px; cursor: pointer'><table><tbody><tr><td> <span class='doc_icon e-icons e-protect-sheet'></span> </td><td><span style='display: block; font-size: 14px'> Protect Document </span><span style='font-size: 12px'>To prevent accidental changes, this document has been set to open as view-only.</span></td></tr></tbody></table></div></div>"
)
}
return (
<div>
<RibbonComponent id='ribbon' ref={ribbonObj} enableKeyTips={true} created={ribbonCreated} backStageMenu={backstageSettings}>
<RibbonTabsDirective>
<RibbonTabDirective header='Home'>
<RibbonGroupsDirective>
<RibbonGroupDirective header="Clipboard" id="clipboard" groupIconCss="e-icons e-paste" showLauncherIcon={true}>
<RibbonCollectionsDirective>
<RibbonCollectionDirective>
<RibbonItemsDirective>
<RibbonItemDirective type="SplitButton" id="pastebtn" allowedSizes={RibbonItemSize.Large}
splitButtonSettings={{ iconCss: "e-icons e-paste", items: pasteOptions, content: "Paste" }}>
</RibbonItemDirective>
</RibbonItemsDirective>
</RibbonCollectionDirective>
<RibbonCollectionDirective>
<RibbonItemsDirective>
<RibbonItemDirective type="Button" buttonSettings={{ iconCss: "e-icons e-cut", content: "Cut" }}>
</RibbonItemDirective>
<RibbonItemDirective type="Button" buttonSettings={{ iconCss: "e-icons e-copy", content: "Copy" }}>
</RibbonItemDirective>
</RibbonItemsDirective>
</RibbonCollectionDirective>
</RibbonCollectionsDirective>
</RibbonGroupDirective>
</RibbonGroupsDirective>
</RibbonTabDirective>
</RibbonTabsDirective>
<Inject services={[RibbonBackstage, RibbonKeyTip]} />
</RibbonComponent>
</div>
);
}
export default App;
ReactDom.render(<App />, document.getElementById("element"));
import * as React from "react";
import * as ReactDom from "react-dom";
import { RibbonComponent, RibbonTabsDirective, RibbonTabDirective, RibbonCollectionsDirective, RibbonCollectionDirective, RibbonGroupsDirective, RibbonGroupDirective, RibbonItemsDirective, RibbonItemDirective, Inject, RibbonItemSize, RibbonKeyTip, BackStageMenuModel, RibbonBackstage } from '@syncfusion/ej2-react-ribbon';
import { ItemModel } from '@syncfusion/ej2-splitbuttons';
function App() {
let ribbonObj = React.useRef<RibbonComponent>(null);
const ribbonCreated = () => {
ribbonObj.current.ribbonKeyTipModule.showKeyTips('F');
};
const backstageSettings: BackStageMenuModel = {
visible: true,
keyTip: 'F',
items: [
{ id: 'home', keyTip: 'H', text: 'Home', iconCss: 'e-icons e-home', content: homeContentTemplate() },
{ id: 'new', keyTip: 'N', text: 'New', iconCss: 'e-icons e-file-new', content: newContentTemplate() },
{ id: 'open', keyTip: 'O', text: 'Open', iconCss: 'e-icons e-folder-open', content: openContentTemplate() }
],
backButton: {
text: 'Close',
}
};
const pasteOptions: ItemModel[] = [{ text: "Keep Source Format" }, { text: "Merge Format" }, { text: "Keep Text Only" }];
function homeContentTemplate () {
return "<div id='home-wrapper' style='padding: 20px;'><div id='new-section' class='new-wrapper'><div class='section-title'> New </div><div class='category_container'><div class='doc_category_image'></div><span class='doc_category_text'> New document </span></div></div><div id='block-wrapper'><div class='section-title'> Recent </div><div class='section-content' style='padding: 12px 0px; cursor: pointer'><table><tbody><tr><td> <span class='doc_icon e-icons e-open-link'></span> </td><td><span style='display: block; font-size: 14px'> Ribbon.docx </span><span style='font-size: 12px'> EJ2 >> Components >> Navigations >> Ribbon >> default </span></td></tr></tbody></table></div></div></div>"
}
function newContentTemplate () {
return (
"<div id='new-content' style='padding: 20px;'><div id='new-section' class='new-wrapper'><div class='section-title'> New </div><div class='category_container'><div class='doc_category_image'></div><span class='doc_category_text'> New document </span></div></div></div> "
)
}
function openContentTemplate () {
return (
"<div style='padding: 20px;'><div class='section-content' style='padding: 12px 0px; cursor: pointer'><table><tbody><tr><td> <span class='doc_icon e-icons e-open-link'></span> </td><td><span style='display: block; font-size: 14px'> Open in Desktop App </span><span style='font-size: 12px'> Use the full functionality of Ribbon </span></td></tr></tbody></table></div><div class='section-content' style='padding: 12px 0px; cursor: pointer'><table><tbody><tr><td> <span class='doc_icon e-icons e-protect-sheet'></span> </td><td><span style='display: block; font-size: 14px'> Protect Document </span><span style='font-size: 12px'>To prevent accidental changes, this document has been set to open as view-only.</span></td></tr></tbody></table></div></div>"
)
}
return (
<div>
<RibbonComponent id='ribbon' ref={ribbonObj} enableKeyTips={true} created={ribbonCreated} backStageMenu={backstageSettings}>
<RibbonTabsDirective>
<RibbonTabDirective header='Home'>
<RibbonGroupsDirective>
<RibbonGroupDirective header="Clipboard" id="clipboard" groupIconCss="e-icons e-paste" showLauncherIcon={true}>
<RibbonCollectionsDirective>
<RibbonCollectionDirective>
<RibbonItemsDirective>
<RibbonItemDirective type="SplitButton" id="pastebtn" allowedSizes={RibbonItemSize.Large}
splitButtonSettings={{ iconCss: "e-icons e-paste", items: pasteOptions, content: "Paste" }}>
</RibbonItemDirective>
</RibbonItemsDirective>
</RibbonCollectionDirective>
<RibbonCollectionDirective>
<RibbonItemsDirective>
<RibbonItemDirective type="Button" buttonSettings={{ iconCss: "e-icons e-cut", content: "Cut" }}>
</RibbonItemDirective>
<RibbonItemDirective type="Button" buttonSettings={{ iconCss: "e-icons e-copy", content: "Copy" }}>
</RibbonItemDirective>
</RibbonItemsDirective>
</RibbonCollectionDirective>
</RibbonCollectionsDirective>
</RibbonGroupDirective>
</RibbonGroupsDirective>
</RibbonTabDirective>
</RibbonTabsDirective>
<Inject services={[RibbonBackstage, RibbonKeyTip]} />
</RibbonComponent>
</div>
);
}
export default App;
ReactDom.render(<App />, document.getElementById("element"));
/* Represents the styles for loader */
#loader {
color: #008cff;
height: 40px;
left: 45%;
position: absolute;
top: 45%;
width: 30%;
}
Ribbon layout switcher keytip
You can add keytip to the layout switcher by using the layoutSwitcherKeyTip property.
import * as React from "react";
import * as ReactDom from "react-dom";
import { RibbonComponent, RibbonTabsDirective, RibbonTabDirective, RibbonCollectionsDirective, RibbonCollectionDirective, RibbonGroupsDirective, RibbonGroupDirective, RibbonItemsDirective, RibbonItemDirective, Inject, RibbonItemSize, RibbonKeyTip, RibbonFileMenu } from '@syncfusion/ej2-react-ribbon';
function App() {
let ribbonObj = React.useRef(null);
const ribbonCreated = () => {
ribbonObj.current?.ribbonKeyTipModule.showKeyTips();
}
const fileOptions = [
{ text: "New", iconCss: "e-icons e-file-new", id: "new" },
{ text: "Open", iconCss: "e-icons e-folder-open", id: "Open" },
{ text: "Rename", iconCss: "e-icons e-rename", id: "rename" },
{ text: "Save as", iconCss: "e-icons e-save", id: "save" }
]
const pasteOptions = [{ text: "Keep Source Format" }, { text: "Merge Format" }, { text: "Keep Text Only" }];
return (
<div>
<RibbonComponent id='ribbon' ref={ribbonObj} enableKeyTips={true} layoutSwitcherKeyTip='LS' created={ribbonCreated} fileMenu={{ visible: true, menuItems: fileOptions}}>
<RibbonTabsDirective>
<RibbonTabDirective header='Home'>
<RibbonGroupsDirective>
<RibbonGroupDirective header="Clipboard" id="clipboard" groupIconCss="e-icons e-paste">
<RibbonCollectionsDirective>
<RibbonCollectionDirective>
<RibbonItemsDirective>
<RibbonItemDirective type="SplitButton" id="pastebtn" allowedSizes={RibbonItemSize.Large}
splitButtonSettings={{ iconCss: "e-icons e-paste", items: pasteOptions, content: "Paste" }}>
</RibbonItemDirective>
</RibbonItemsDirective>
</RibbonCollectionDirective>
<RibbonCollectionDirective>
<RibbonItemsDirective>
<RibbonItemDirective type="Button" buttonSettings={{ iconCss: "e-icons e-cut", content: "Cut" }}>
</RibbonItemDirective>
<RibbonItemDirective type="Button" buttonSettings={{ iconCss: "e-icons e-copy", content: "Copy" }}>
</RibbonItemDirective>
</RibbonItemsDirective>
</RibbonCollectionDirective>
</RibbonCollectionsDirective>
</RibbonGroupDirective>
</RibbonGroupsDirective>
</RibbonTabDirective>
</RibbonTabsDirective>
<Inject services={[RibbonFileMenu, RibbonKeyTip]} />
</RibbonComponent>
</div>
);
}
export default App;
ReactDom.render(<App />, document.getElementById("element"));
import * as React from "react";
import * as ReactDom from "react-dom";
import { RibbonComponent, RibbonTabsDirective, RibbonTabDirective, RibbonCollectionsDirective, RibbonCollectionDirective, RibbonGroupsDirective, RibbonGroupDirective, RibbonItemsDirective, RibbonItemDirective, Inject, RibbonItemSize, RibbonKeyTip, RibbonFileMenu } from '@syncfusion/ej2-react-ribbon';
import { ItemModel } from '@syncfusion/ej2-splitbuttons';
import { MenuItemModel } from '@syncfusion/ej2-navigations';
function App() {
let ribbonObj = React.useRef<RibbonComponent>(null);
const ribbonCreated = () => {
ribbonObj.current.ribbonKeyTipModule.showKeyTips();
};
const fileOptions: MenuItemModel[] = [
{ text: "New", iconCss: "e-icons e-file-new", id: "new" },
{ text: "Open", iconCss: "e-icons e-folder-open", id: "Open" },
{ text: "Rename", iconCss: "e-icons e-rename", id: "rename" },
{ text: "Save as", iconCss: "e-icons e-save", id: "save" }
];
const pasteOptions: ItemModel[] = [{ text: "Keep Source Format" }, { text: "Merge Format" }, { text: "Keep Text Only" }];
return (
<div>
<RibbonComponent id='ribbon' ref={ribbonObj} enableKeyTips={true} layoutSwitcherKeyTip='LS' created={ribbonCreated} fileMenu={{ visible: true, menuItems: fileOptions}}>
<RibbonTabsDirective>
<RibbonTabDirective header='Home'>
<RibbonGroupsDirective>
<RibbonGroupDirective header="Clipboard" id="clipboard" groupIconCss="e-icons e-paste">
<RibbonCollectionsDirective>
<RibbonCollectionDirective>
<RibbonItemsDirective>
<RibbonItemDirective type="SplitButton" id="pastebtn" allowedSizes={RibbonItemSize.Large}
splitButtonSettings={{ iconCss: "e-icons e-paste", items: pasteOptions, content: "Paste" }}>
</RibbonItemDirective>
</RibbonItemsDirective>
</RibbonCollectionDirective>
<RibbonCollectionDirective>
<RibbonItemsDirective>
<RibbonItemDirective type="Button" buttonSettings={{ iconCss: "e-icons e-cut", content: "Cut" }}>
</RibbonItemDirective>
<RibbonItemDirective type="Button" buttonSettings={{ iconCss: "e-icons e-copy", content: "Copy" }}>
</RibbonItemDirective>
</RibbonItemsDirective>
</RibbonCollectionDirective>
</RibbonCollectionsDirective>
</RibbonGroupDirective>
</RibbonGroupsDirective>
</RibbonTabDirective>
</RibbonTabsDirective>
<Inject services={[RibbonFileMenu, RibbonKeyTip]} />
</RibbonComponent>
</div>
);
}
export default App;
ReactDom.render(<App />, document.getElementById("element"));
/* Represents the styles for loader */
#loader {
color: #008cff;
height: 40px;
left: 45%;
position: absolute;
top: 45%;
width: 30%;
}
Ribbon launcher icon keytip
You can add keytip to the launcher icon by using the launcherIconKeyTip property.
import * as React from "react";
import * as ReactDom from "react-dom";
import { RibbonComponent, RibbonTabsDirective, RibbonTabDirective, RibbonCollectionsDirective, RibbonCollectionDirective, RibbonGroupsDirective, RibbonGroupDirective, RibbonItemsDirective, RibbonItemDirective, Inject, RibbonItemSize, RibbonKeyTip, RibbonFileMenu } from '@syncfusion/ej2-react-ribbon';
function App() {
let ribbonObj = React.useRef(null);
const ribbonCreated = () => {
ribbonObj.current?.ribbonKeyTipModule.showKeyTips('H');
}
const fileOptions = [
{ text: "New", iconCss: "e-icons e-file-new", id: "new" },
{ text: "Open", iconCss: "e-icons e-folder-open", id: "Open" },
{ text: "Rename", iconCss: "e-icons e-rename", id: "rename" },
{ text: "Save as", iconCss: "e-icons e-save", id: "save" }
]
const pasteOptions = [{ text: "Keep Source Format" }, { text: "Merge Format" }, { text: "Keep Text Only" }];
return (
<div>
<RibbonComponent id='ribbon' ref={ribbonObj} enableKeyTips={true} created={ribbonCreated} fileMenu={{ visible: true, menuItems: fileOptions}}>
<RibbonTabsDirective>
<RibbonTabDirective header='Home' keyTip='H'>
<RibbonGroupsDirective>
<RibbonGroupDirective header="Clipboard" id="clipboard" groupIconCss="e-icons e-paste" showLauncherIcon={true} launcherIconKeyTip='L'>
<RibbonCollectionsDirective>
<RibbonCollectionDirective>
<RibbonItemsDirective>
<RibbonItemDirective type="SplitButton" id="pastebtn" allowedSizes={RibbonItemSize.Large}
splitButtonSettings={{ iconCss: "e-icons e-paste", items: pasteOptions, content: "Paste" }}>
</RibbonItemDirective>
</RibbonItemsDirective>
</RibbonCollectionDirective>
<RibbonCollectionDirective>
<RibbonItemsDirective>
<RibbonItemDirective type="Button" buttonSettings={{ iconCss: "e-icons e-cut", content: "Cut" }}>
</RibbonItemDirective>
<RibbonItemDirective type="Button" buttonSettings={{ iconCss: "e-icons e-copy", content: "Copy" }}>
</RibbonItemDirective>
</RibbonItemsDirective>
</RibbonCollectionDirective>
</RibbonCollectionsDirective>
</RibbonGroupDirective>
</RibbonGroupsDirective>
</RibbonTabDirective>
</RibbonTabsDirective>
<Inject services={[RibbonFileMenu, RibbonKeyTip]} />
</RibbonComponent>
</div>
);
}
export default App;
ReactDom.render(<App />, document.getElementById("element"));
import * as React from "react";
import * as ReactDom from "react-dom";
import { RibbonComponent, RibbonTabsDirective, RibbonTabDirective, RibbonCollectionsDirective, RibbonCollectionDirective, RibbonGroupsDirective, RibbonGroupDirective, RibbonItemsDirective, RibbonItemDirective, Inject, RibbonItemSize, RibbonKeyTip, RibbonFileMenu } from '@syncfusion/ej2-react-ribbon';
import { ItemModel } from '@syncfusion/ej2-splitbuttons';
import { MenuItemModel } from '@syncfusion/ej2-navigations';
function App() {
let ribbonObj = React.useRef<RibbonComponent>(null);
const ribbonCreated = () => {
ribbonObj.current.ribbonKeyTipModule.showKeyTips('H');
};
const fileOptions: MenuItemModel[] = [
{ text: "New", iconCss: "e-icons e-file-new", id: "new" },
{ text: "Open", iconCss: "e-icons e-folder-open", id: "Open" },
{ text: "Rename", iconCss: "e-icons e-rename", id: "rename" },
{ text: "Save as", iconCss: "e-icons e-save", id: "save" }
];
const pasteOptions: ItemModel[] = [{ text: "Keep Source Format" }, { text: "Merge Format" }, { text: "Keep Text Only" }];
return (
<div>
<RibbonComponent id='ribbon' ref={ribbonObj} enableKeyTips={true} created={ribbonCreated} fileMenu={{ visible: true, menuItems: fileOptions}}>
<RibbonTabsDirective>
<RibbonTabDirective header='Home' keyTip='H'>
<RibbonGroupsDirective>
<RibbonGroupDirective header="Clipboard" id="clipboard" groupIconCss="e-icons e-paste" showLauncherIcon={true} launcherIconKeyTip='L'>
<RibbonCollectionsDirective>
<RibbonCollectionDirective>
<RibbonItemsDirective>
<RibbonItemDirective type="SplitButton" id="pastebtn" allowedSizes={RibbonItemSize.Large}
splitButtonSettings={{ iconCss: "e-icons e-paste", items: pasteOptions, content: "Paste" }}>
</RibbonItemDirective>
</RibbonItemsDirective>
</RibbonCollectionDirective>
<RibbonCollectionDirective>
<RibbonItemsDirective>
<RibbonItemDirective type="Button" buttonSettings={{ iconCss: "e-icons e-cut", content: "Cut" }}>
</RibbonItemDirective>
<RibbonItemDirective type="Button" buttonSettings={{ iconCss: "e-icons e-copy", content: "Copy" }}>
</RibbonItemDirective>
</RibbonItemsDirective>
</RibbonCollectionDirective>
</RibbonCollectionsDirective>
</RibbonGroupDirective>
</RibbonGroupsDirective>
</RibbonTabDirective>
</RibbonTabsDirective>
<Inject services={[RibbonFileMenu, RibbonKeyTip]} />
</RibbonComponent>
</div>
);
}
export default App;
ReactDom.render(<App />, document.getElementById("element"));
/* Represents the styles for loader */
#loader {
color: #008cff;
height: 40px;
left: 45%;
position: absolute;
top: 45%;
width: 30%;
}
Methods
Show keytips
You can use the showKeyTips method to shown the keytips dynamically.
In order to show specific keytips, pass the key string as an argument in the showKeyTips('H')
method.
Hide keytips
You can use the hideKeyTips method in Ribbon to remove the keytips dynamically. This will remove all the visible keytips.
Guidelines for adding keytips
Before adding keytips to the ribbon items consider the following:
- Avoid using the same keytip setting on multiple items.
For example: When you add the keytip text
H
orHF
for the same items, it activates the first item occurrence ofH
, while any subsequent instances ofH
orHF
are ignored.
- Do not use the same first letter for the single and double keytip items.
For example: When accessing keytip text
F
,FP
andFPF
added for the different ribbon items and pressingF
key, only theF
key tip associated item will be activated while theFP
,FPF
configured ribbon items will be ignored.