Keytip in Angular Ribbon Component
27 Aug 202524 minutes to read
The Ribbon component supports KeyTips to provide keyboard navigation for its items. This feature can be enabled by setting the enableKeyTips property to true.
The keytips will be shown when the Alt + Windows/Command keys are pressed. This allows users to access any Ribbon element by pressing the corresponding keys.
Ribbon Item KeyTip
You can assign a KeyTip to any Ribbon item, including tabs, groups, and individual controls, using the keyTip property.
import { NgModule } from '@angular/core'
import { BrowserModule } from '@angular/platform-browser'
import { RibbonModule, RibbonGroupButtonService, RibbonGalleryService, RibbonKeyTipService, RibbonColorPickerService } from '@syncfusion/ej2-angular-ribbon'
import { Component, ViewChild } from "@angular/core";
import { RibbonItemSize, RibbonButtonSettingsModel, RibbonGroupButtonSelection, RibbonSplitButtonSettingsModel, RibbonComponent, RibbonComboBoxSettingsModel, RibbonGroupButtonSettingsModel, RibbonColorPickerSettingsModel, RibbonGallerySettingsModel, RibbonDropDownSettingsModel, RibbonCheckBoxSettingsModel } from '@syncfusion/ej2-angular-ribbon';
@Component({
imports: [ RibbonModule],
providers: [ RibbonGroupButtonService, RibbonGalleryService, RibbonKeyTipService, RibbonColorPickerService ],
standalone: true,
selector: 'app-root',
templateUrl: './app.component.html'
})
export class AppComponent {
@ViewChild('ribbon') ribbon!: RibbonComponent;
public largeSize = RibbonItemSize.Large;
public pasteSettings: RibbonSplitButtonSettingsModel = { iconCss: "e-icons e-paste", content: "Paste", items: [{ text: 'Keep Source Format' }, { text: 'Merge format' }, { text: 'Keep text only' }] };
public copyButton: RibbonButtonSettingsModel = { iconCss: "e-icons e-copy", content: "Copy" };
public cutButton: RibbonButtonSettingsModel = { iconCss: "e-icons e-cut", content: "Cut" };
public pasteOptions = { title: "Paste", cssClass: 'custom-tooltip', content: "Paste content here.</br> Add content on the clipboard to your document.", iconCss: "e-icons e-paste" }
public formatButton: RibbonButtonSettingsModel = { iconCss: "e-icons e-format-painter", content: "Format Painter" }
public styleOptions: RibbonComboBoxSettingsModel = {
dataSource: ["Algerian", "Arial", "Calibri", "Cambria", "Cambria Math", "Courier New", "Candara", "Georgia", "Impact", "Segoe Print", "Segoe Script", "Segoe UI", "Symbol", "Times New Roman", "Verdana", "Windings"],
index: 2,
width: '150px',
allowFiltering: true
}
public sizeOptions: RibbonComboBoxSettingsModel = {
dataSource: ["8", "9", "10", "11", "12", "14", "16", "18", "20", "22", "24", "26", "28", "36", "48", "72", "96"],
index: 4,
width: "65px"
}
public groupButtonSingle: RibbonGroupButtonSettingsModel = {
selection: RibbonGroupButtonSelection.Single,
items: [
{ iconCss: 'e-icons e-bold', keyTip: '1', selected: true },
{ iconCss: 'e-icons e-italic', keyTip: '2' },
{ iconCss: 'e-icons e-underline', keyTip: '3' },
{ iconCss: 'e-icons e-strikethrough', keyTip: '4' },
{ iconCss: 'e-icons e-change-case', keyTip: '5' }
]
}
public colorPicker: RibbonColorPickerSettingsModel = { value: "#123456" }
public 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'
}]
}]
}
public tableSettings: RibbonDropDownSettingsModel = {
iconCss: 'e-icons e-table', content: 'Table',
items: [{ text: 'Insert Table' }, { text: 'Draw Table' }, { text: 'Convert Table' }, { text: 'Excel SpreadSheet' }]
}
public rulerSettings: RibbonCheckBoxSettingsModel = { label: "Ruler", checked: false }
public gridSettings: RibbonCheckBoxSettingsModel = { label: "Gridlines", checked: false }
public navigationSettings: RibbonCheckBoxSettingsModel = { label: "Navigation Pane", checked: true }
ribbonCreated(): void {
this.ribbon.ribbonKeyTipModule.showKeyTips('H');
}
}import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));<ejs-ribbon #ribbon id="ribbon" (created)="ribbonCreated()" [enableKeyTips]="true">
<e-ribbon-tabs>
<e-ribbon-tab header="Home" keyTip="H">
<e-ribbon-groups>
<e-ribbon-group header="Clipboard" groupIconCss="e-icons e-paste" keyTip="CD">
<e-ribbon-collections>
<e-ribbon-collection>
<e-ribbon-items>
<e-ribbon-item type="SplitButton" [allowedSizes]="largeSize" keyTip="PA" [ribbonTooltipSettings]="pasteOptions" [splitButtonSettings]="pasteSettings">
</e-ribbon-item>
</e-ribbon-items>
</e-ribbon-collection>
<e-ribbon-collection>
<e-ribbon-items>
<e-ribbon-item type="Button" keyTip="CU" [buttonSettings]="cutButton">
</e-ribbon-item>
<e-ribbon-item type="Button" keyTip="CO" [buttonSettings]="copyButton">
</e-ribbon-item>
<e-ribbon-item type="Button" keyTip="CS" [buttonSettings]="formatButton">
</e-ribbon-item>
</e-ribbon-items>
</e-ribbon-collection>
</e-ribbon-collections>
</e-ribbon-group>
<e-ribbon-group header="Font" orientation="Row" [enableGroupOverflow]="true" keyTip="FB" groupIconCss="e-icons e-bold" cssClass="font-group" >
<e-ribbon-collections>
<e-ribbon-collection>
<e-ribbon-items>
<e-ribbon-item type="ComboBox" keyTip="01" [comboBoxSettings]="styleOptions" >
</e-ribbon-item>
<e-ribbon-item type="ComboBox" keyTip="02" [comboBoxSettings]="sizeOptions">
</e-ribbon-item>
</e-ribbon-items>
</e-ribbon-collection>
<e-ribbon-collection>
<e-ribbon-items>
<e-ribbon-item type="GroupButton" keyTip="GB" [groupButtonSettings]="groupButtonSingle"></e-ribbon-item>
<e-ribbon-item type="ColorPicker" keyTip="CP" [colorPickerSettings]="colorPicker" >
</e-ribbon-item>
</e-ribbon-items>
</e-ribbon-collection>
</e-ribbon-collections>
</e-ribbon-group>
<e-ribbon-group header="Gallery" groupIconCss="e-icons e-paste" [showLauncherIcon]=true>
<e-ribbon-collections>
<e-ribbon-collection>
<e-ribbon-items>
<e-ribbon-item type="Gallery" keyTip="GY" [gallerySettings]="gallerySettings">
</e-ribbon-item>
</e-ribbon-items>
</e-ribbon-collection>
</e-ribbon-collections>
</e-ribbon-group>
<e-ribbon-group header="Tables" groupIconCss="e-icons e-table">
<e-ribbon-collections>
<e-ribbon-collection>
<e-ribbon-items>
<e-ribbon-item type="DropDown" keyTip="T" [allowedSizes]="largeSize" [dropDownSettings]="tableSettings">
</e-ribbon-item>
</e-ribbon-items>
</e-ribbon-collection>
</e-ribbon-collections>
</e-ribbon-group>
<e-ribbon-group header="show" groupIconCss="e-icons e-copy">
<e-ribbon-collections>
<e-ribbon-collection>
<e-ribbon-items>
<e-ribbon-item type="CheckBox" keyTip="R1" [checkBoxSettings]="rulerSettings">
</e-ribbon-item>
<e-ribbon-item type="CheckBox" keyTip="R2" [checkBoxSettings]="gridSettings">
</e-ribbon-item>
<e-ribbon-item type="CheckBox" keyTip="R3" [checkBoxSettings]="navigationSettings">
</e-ribbon-item>
</e-ribbon-items>
</e-ribbon-collection>
</e-ribbon-collections>
</e-ribbon-group>
</e-ribbon-groups>
</e-ribbon-tab>
</e-ribbon-tabs>
</ejs-ribbon>@import 'node_modules/@syncfusion/ej2-base/styles/material.css';
@import 'node_modules/@syncfusion/ej2-buttons/styles/material.css';
@import 'node_modules/@syncfusion/ej2-popups/styles/material.css';
@import 'node_modules/@syncfusion/ej2-splitbuttons/styles/material.css';
@import 'node_modules/@syncfusion/ej2-inputs/styles/material.css';
@import 'node_modules/@syncfusion/ej2-lists/styles/material.css';
@import 'node_modules/@syncfusion/ej2-dropdowns/styles/material.css';
@import 'node_modules/@syncfusion/ej2-navigations/styles/material.css';
@import 'node_modules/@syncfusion/ej2-ribbon/styles/material.css';
@import 'node_modules/@syncfusion/ej2-angular-base/styles/material.css';
.custom-tooltip.e-paste{
font-size: 50px;
}File Menu KeyTip
A KeyTip can be assigned to the File Menu button using the keyTip property within the fileMenuSettings.
import { NgModule } from '@angular/core'
import { BrowserModule } from '@angular/platform-browser'
import { RibbonModule, RibbonFileMenuService, RibbonKeyTipService } from '@syncfusion/ej2-angular-ribbon'
import { Component, ViewChild } from "@angular/core";
import { RibbonButtonSettingsModel, FileMenuSettingsModel, RibbonSplitButtonSettingsModel, RibbonComponent } from '@syncfusion/ej2-angular-ribbon';
@Component({
imports: [ RibbonModule],
providers: [ RibbonFileMenuService, RibbonKeyTipService ],
standalone: true,
selector: 'app-root',
templateUrl: './app.component.html'
})
export class AppComponent {
@ViewChild('ribbon') ribbon!: RibbonComponent;
public pasteSettings: RibbonSplitButtonSettingsModel = { iconCss: "e-icons e-paste", content: "Paste", items: [{ text: 'Keep Source Format' }, { text: 'Merge format' }, { text: 'Keep text only' }] };
public copyButton: RibbonButtonSettingsModel = { iconCss: "e-icons e-copy", content: "Copy" };
public cutButton: RibbonButtonSettingsModel = { iconCss: "e-icons e-cut", content: "Cut" };
public fileMenuSettings: FileMenuSettingsModel = {
keyTip: "F",
visible: true,
menuItems: [
{ 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" }
]
};
ribbonCreated(): void {
this.ribbon.ribbonKeyTipModule.showKeyTips();
}
}import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));<ejs-ribbon #ribbon id="ribbon" (created)="ribbonCreated()" [enableKeyTips]="true" [fileMenu]="fileMenuSettings">
<e-ribbon-tabs>
<e-ribbon-tab header="Home">
<e-ribbon-groups>
<e-ribbon-group header="Clipboard">
<e-ribbon-collections>
<e-ribbon-collection>
<e-ribbon-items>
<e-ribbon-item type="SplitButton" [splitButtonSettings]="pasteSettings">
</e-ribbon-item>
</e-ribbon-items>
</e-ribbon-collection>
<e-ribbon-collection>
<e-ribbon-items>
<e-ribbon-item type="Button" [buttonSettings]="cutButton">
</e-ribbon-item>
<e-ribbon-item type="Button" [buttonSettings]="copyButton">
</e-ribbon-item>
</e-ribbon-items>
</e-ribbon-collection>
</e-ribbon-collections>
</e-ribbon-group>
</e-ribbon-groups>
</e-ribbon-tab>
</e-ribbon-tabs>
</ejs-ribbon>@import 'node_modules/@syncfusion/ej2-base/styles/material.css';
@import 'node_modules/@syncfusion/ej2-buttons/styles/material.css';
@import 'node_modules/@syncfusion/ej2-popups/styles/material.css';
@import 'node_modules/@syncfusion/ej2-splitbuttons/styles/material.css';
@import 'node_modules/@syncfusion/ej2-inputs/styles/material.css';
@import 'node_modules/@syncfusion/ej2-lists/styles/material.css';
@import 'node_modules/@syncfusion/ej2-dropdowns/styles/material.css';
@import 'node_modules/@syncfusion/ej2-navigations/styles/material.css';
@import 'node_modules/@syncfusion/ej2-ribbon/styles/material.css';
@import 'node_modules/@syncfusion/ej2-angular-base/styles/material.css';Backstage Menu KeyTip
You can assign KeyTips to Backstage menu items by defining the keyTip property for each item in the Backstage configuration.
import { NgModule } from '@angular/core'
import { BrowserModule } from '@angular/platform-browser'
import { RibbonModule, RibbonBackstageService, RibbonKeyTipService } from '@syncfusion/ej2-angular-ribbon'
import { Component, ViewChild } from "@angular/core";
import { RibbonButtonSettingsModel, BackStageMenuModel, BackstageItemModel, RibbonSplitButtonSettingsModel, RibbonComponent } from '@syncfusion/ej2-angular-ribbon';
@Component({
imports: [ RibbonModule],
providers: [ RibbonBackstageService, RibbonKeyTipService ],
standalone: true,
selector: 'app-root',
templateUrl: './app.component.html'
})
export class AppComponent {
@ViewChild('ribbon') ribbon!: RibbonComponent;
public pasteSettings: RibbonSplitButtonSettingsModel = { iconCss: "e-icons e-paste", content: "Paste", items: [{ text: 'Keep Source Format' }, { text: 'Merge format' }, { text: 'Keep text only' }] };
public copyButton: RibbonButtonSettingsModel = { iconCss: "e-icons e-copy", content: "Copy" };
public cutButton: RibbonButtonSettingsModel = { iconCss: "e-icons e-cut", content: "Cut" };
public getBackstageContent(item: string): string {
var content = "";
switch (item) {
case "home":
{
content = "<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>";
break;
}
case "new":
{
content = "<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>";
break;
}
case "open":
{
content = "<div id='open-content' 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>";
break;
}
}
return content;
}
public menuItems: BackstageItemModel[] = [
{ id: 'home', keyTip: 'H', text: 'Home', iconCss: 'e-icons e-home', content: this.getBackstageContent('home') },
{ id: 'new', keyTip: 'N', text: 'New', iconCss: 'e-icons e-file-new', content: this.getBackstageContent('new') },
{ id: 'open', keyTip: 'O', text: 'Open', iconCss: 'e-icons e-folder-open', content: this.getBackstageContent('open') }
];
public backstageSettings: BackStageMenuModel = {
keyTip: 'F',
visible: true,
items: this.menuItems,
backButton: {
text: 'Close',
}
}
ribbonCreated(): void {
this.ribbon.ribbonKeyTipModule.showKeyTips('F');
}
}import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));<ejs-ribbon #ribbon id="ribbon" (created)="ribbonCreated()" [enableKeyTips]="true" [backStageMenu]="backstageSettings">
<e-ribbon-tabs>
<e-ribbon-tab header="Home">
<e-ribbon-groups>
<e-ribbon-group header="Clipboard">
<e-ribbon-collections>
<e-ribbon-collection>
<e-ribbon-items>
<e-ribbon-item type="SplitButton" [splitButtonSettings]="pasteSettings">
</e-ribbon-item>
</e-ribbon-items>
</e-ribbon-collection>
<e-ribbon-collection>
<e-ribbon-items>
<e-ribbon-item type="Button" [buttonSettings]="cutButton">
</e-ribbon-item>
<e-ribbon-item type="Button" [buttonSettings]="copyButton">
</e-ribbon-item>
</e-ribbon-items>
</e-ribbon-collection>
</e-ribbon-collections>
</e-ribbon-group>
</e-ribbon-groups>
</e-ribbon-tab>
</e-ribbon-tabs>
</ejs-ribbon>@import 'node_modules/@syncfusion/ej2-base/styles/material.css';
@import 'node_modules/@syncfusion/ej2-buttons/styles/material.css';
@import 'node_modules/@syncfusion/ej2-popups/styles/material.css';
@import 'node_modules/@syncfusion/ej2-splitbuttons/styles/material.css';
@import 'node_modules/@syncfusion/ej2-inputs/styles/material.css';
@import 'node_modules/@syncfusion/ej2-lists/styles/material.css';
@import 'node_modules/@syncfusion/ej2-dropdowns/styles/material.css';
@import 'node_modules/@syncfusion/ej2-navigations/styles/material.css';
@import 'node_modules/@syncfusion/ej2-ribbon/styles/material.css';
@import 'node_modules/@syncfusion/ej2-angular-base/styles/material.css';
/* Component custom styles */
.e-ribbon-backstage-content{
width: 550px;
height: 350px;
}
.section-title {
font-size: 22px;
}
.new-docs {
display: flex;
justify-content: space-around;
flex-wrap: wrap;
}
.category_container {
width: 150px;
padding: 15px;
text-align: center;
cursor: pointer;
}
.doc_category_image {
width: 80px;
height: 100px;
background-color: #fff;
border: 1px solid rgb(125, 124, 124);
text-align: center;
overflow: hidden;
margin: 0px auto 10px;
}
.doc_category_text {
font-size: 16px;
}
.section-content {
padding: 12px 0px;
cursor: pointer;
}
.doc_icon {
font-size: 16px;
padding: 0px 10px;
}
.category_container:hover, .section-content:hover {
background-color: #dfdfdf;
border-radius: 5px;
transition: all 0.3s;
}Ribbon Layout Switcher KeyTip
A KeyTip can be added to the layout switcher button using the layoutSwitcherKeyTip property.
import { NgModule } from '@angular/core'
import { BrowserModule } from '@angular/platform-browser'
import { RibbonModule, RibbonFileMenuService, RibbonKeyTipService } from '@syncfusion/ej2-angular-ribbon'
import { Component, ViewChild } from "@angular/core";
import { RibbonButtonSettingsModel, FileMenuSettingsModel, RibbonSplitButtonSettingsModel, RibbonComponent } from '@syncfusion/ej2-angular-ribbon';
@Component({
imports: [ RibbonModule],
providers: [ RibbonFileMenuService, RibbonKeyTipService ],
standalone: true,
selector: 'app-root',
templateUrl: './app.component.html'
})
export class AppComponent {
@ViewChild('ribbon') ribbon!: RibbonComponent;
public pasteSettings: RibbonSplitButtonSettingsModel = { iconCss: "e-icons e-paste", content: "Paste", items: [{ text: 'Keep Source Format' }, { text: 'Merge format' }, { text: 'Keep text only' }] };
public copyButton: RibbonButtonSettingsModel = { iconCss: "e-icons e-copy", content: "Copy" };
public cutButton: RibbonButtonSettingsModel = { iconCss: "e-icons e-cut", content: "Cut" };
public fileMenuSettings: FileMenuSettingsModel = {
visible: true,
menuItems: [
{ 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" }
]
}
ribbonCreated(): void {
this.ribbon.ribbonKeyTipModule.showKeyTips();
}
}import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));<ejs-ribbon #ribbon id="ribbon" (created)="ribbonCreated()" [enableKeyTips]="true" layoutSwitcherKeyTip="LS" [fileMenu]="fileMenuSettings">
<e-ribbon-tabs>
<e-ribbon-tab header="Home">
<e-ribbon-groups>
<e-ribbon-group header="Clipboard">
<e-ribbon-collections>
<e-ribbon-collection>
<e-ribbon-items>
<e-ribbon-item type="SplitButton" [splitButtonSettings]="pasteSettings">
</e-ribbon-item>
</e-ribbon-items>
</e-ribbon-collection>
<e-ribbon-collection>
<e-ribbon-items>
<e-ribbon-item type="Button" [buttonSettings]="cutButton">
</e-ribbon-item>
<e-ribbon-item type="Button" [buttonSettings]="copyButton">
</e-ribbon-item>
</e-ribbon-items>
</e-ribbon-collection>
</e-ribbon-collections>
</e-ribbon-group>
</e-ribbon-groups>
</e-ribbon-tab>
</e-ribbon-tabs>
</ejs-ribbon>@import 'node_modules/@syncfusion/ej2-base/styles/material.css';
@import 'node_modules/@syncfusion/ej2-buttons/styles/material.css';
@import 'node_modules/@syncfusion/ej2-popups/styles/material.css';
@import 'node_modules/@syncfusion/ej2-splitbuttons/styles/material.css';
@import 'node_modules/@syncfusion/ej2-inputs/styles/material.css';
@import 'node_modules/@syncfusion/ej2-lists/styles/material.css';
@import 'node_modules/@syncfusion/ej2-dropdowns/styles/material.css';
@import 'node_modules/@syncfusion/ej2-navigations/styles/material.css';
@import 'node_modules/@syncfusion/ej2-ribbon/styles/material.css';
@import 'node_modules/@syncfusion/ej2-angular-base/styles/material.css';Ribbon Launcher Icon KeyTip
A KeyTip can be assigned to a group’s launcher icon using the launcherIconKeyTip property.
import { NgModule } from '@angular/core'
import { BrowserModule } from '@angular/platform-browser'
import { RibbonModule, RibbonFileMenuService, RibbonKeyTipService } from '@syncfusion/ej2-angular-ribbon'
import { Component, ViewChild } from "@angular/core";
import { RibbonButtonSettingsModel, FileMenuSettingsModel, RibbonSplitButtonSettingsModel, RibbonComponent } from '@syncfusion/ej2-angular-ribbon';
@Component({
imports: [ RibbonModule],
providers: [ RibbonFileMenuService, RibbonKeyTipService ],
standalone: true,
selector: 'app-root',
templateUrl: './app.component.html'
})
export class AppComponent {
@ViewChild('ribbon') ribbon!: RibbonComponent;
public pasteSettings: RibbonSplitButtonSettingsModel = { iconCss: "e-icons e-paste", content: "Paste", items: [{ text: 'Keep Source Format' }, { text: 'Merge format' }, { text: 'Keep text only' }] };
public copyButton: RibbonButtonSettingsModel = { iconCss: "e-icons e-copy", content: "Copy" };
public cutButton: RibbonButtonSettingsModel = { iconCss: "e-icons e-cut", content: "Cut" };
public fileMenuSettings: FileMenuSettingsModel = {
visible: true,
menuItems: [
{ 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" }
]
}
ribbonCreated(): void {
this.ribbon.ribbonKeyTipModule.showKeyTips('H');
}
}import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));<ejs-ribbon #ribbon id="ribbon" (created)="ribbonCreated()" [enableKeyTips]="true" [fileMenu]="fileMenuSettings">
<e-ribbon-tabs>
<e-ribbon-tab header="Home" keyTip="H">
<e-ribbon-groups>
<e-ribbon-group header="Clipboard" [showLauncherIcon]="true" launcherIconKeyTip="L">
<e-ribbon-collections>
<e-ribbon-collection>
<e-ribbon-items>
<e-ribbon-item type="SplitButton" [splitButtonSettings]="pasteSettings">
</e-ribbon-item>
</e-ribbon-items>
</e-ribbon-collection>
<e-ribbon-collection>
<e-ribbon-items>
<e-ribbon-item type="Button" [buttonSettings]="cutButton">
</e-ribbon-item>
<e-ribbon-item type="Button" [buttonSettings]="copyButton">
</e-ribbon-item>
</e-ribbon-items>
</e-ribbon-collection>
</e-ribbon-collections>
</e-ribbon-group>
</e-ribbon-groups>
</e-ribbon-tab>
</e-ribbon-tabs>
</ejs-ribbon>@import 'node_modules/@syncfusion/ej2-base/styles/material.css';
@import 'node_modules/@syncfusion/ej2-buttons/styles/material.css';
@import 'node_modules/@syncfusion/ej2-popups/styles/material.css';
@import 'node_modules/@syncfusion/ej2-splitbuttons/styles/material.css';
@import 'node_modules/@syncfusion/ej2-inputs/styles/material.css';
@import 'node_modules/@syncfusion/ej2-lists/styles/material.css';
@import 'node_modules/@syncfusion/ej2-dropdowns/styles/material.css';
@import 'node_modules/@syncfusion/ej2-navigations/styles/material.css';
@import 'node_modules/@syncfusion/ej2-ribbon/styles/material.css';
@import 'node_modules/@syncfusion/ej2-angular-base/styles/material.css';Methods
Show keytips
Use the showKeyTips method to display the KeyTips dynamically. To navigate into a specific tab’s or group’s KeyTips, pass its KeyTip as an argument. For instance, showKeyTips('H') will show the KeyTips for all items under the element assigned the ‘H’ KeyTip.
Hide KeyTips
Use the hideKeyTips method to hide all visible KeyTips on the Ribbon.
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
HorHFfor the same items, it activates the first item occurrence ofH, while any subsequent instances ofHorHFare ignored.
- Do not use the same first letter for the single and double keytip items.
For example: When accessing keytip text
F,FPandFPFadded for the different ribbon items and pressingFkey, only theFkey tip associated item will be activated while theFP,FPFconfigured ribbon items will be ignored.