Contents
- Ribbon items keytip
- File menu keytip
- Backstage menu keytip
- Ribbon layout switcher keytip
- Ribbon launcher icon keytip
- Methods
- Guidelines for adding keytips
Having trouble getting help?
Contact Support
Contact Support
Keytips in Vue Ribbon component
11 Jun 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.
<template>
<ejs-ribbon ref="ribbonKeyTip" :enableKeyTips="true" :created="ribbonCreated">
<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="pasteSettigs">
</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>
</template>
<script setup>
import { provide } from "vue";
import { RibbonKeyTip, RibbonItemSize, RibbonGallery, RibbonGroupButtonSelection, RibbonColorPicker, } from "@syncfusion/ej2-vue-ribbon";
import { RibbonComponent as EjsRibbon, RibbonGroupDirective as ERibbonGroup, RibbonGroupsDirective as ERibbonGroups, RibbonCollectionsDirective as ERibbonCollections, RibbonCollectionDirective as ERibbonCollection, RibbonItemsDirective as ERibbonItems, RibbonItemDirective as ERibbonItem, RibbonTabsDirective as ERibbonTabs, RibbonTabDirective as ERibbonTab } from "@syncfusion/ej2-vue-ribbon";
import { ref } from 'vue';
provide('ribbon', [RibbonKeyTip, RibbonGallery, RibbonColorPicker]);
const ribbonKeyTip=ref(null);
const largeSize = RibbonItemSize.Large;
const cutButton = { iconCss: "e-icons e-cut", content: "Cut" };
const copyButton = { iconCss: "e-icons e-copy", content: "Copy" };
const pasteSettigs = {
iconCss: "e-icons e-paste", content: "Paste",
items: [{ text: "Keep Source Format" }, { text: "Merge format" }, { text: "Keep text only" }]
};
const pasteOptions = { title: "Paste", cssClass: 'custom-tooltip', content: "Paste content here.</br> Add content on the clipboard to your document.", iconCss: "e-icons e-paste" };
const formatButton = { iconCss: "e-icons e-format-painter", content: "Format Painter" };
const styleOptions = {
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
};
const sizeOptions = {
dataSource: ["8", "9", "10", "11", "12", "14", "16", "18", "20", "22", "24", "26", "28", "36", "48", "72", "96"],
index: 4,
width: "65px"
};
const groupButtonSingle = {
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' }
]
};
const colorPicker = { value: "#123456" };
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 tableSettings = {
iconCss: 'e-icons e-table', content: 'Table',
items: [{ text: 'Insert Table' }, { text: 'Draw Table' }, { text: 'Convert Table' }, { text: 'Excel SpreadSheet' }]
};
const rulerSettings = { label: "Ruler", checked: false };
const gridSettings = { label: "Gridlines", checked: false };
const navigationSettings = { label: "Navigation Pane", checked: true };
const ribbonCreated = () => {
ribbonKeyTip.value.ej2Instances.ribbonKeyTipModule.showKeyTips('H');
};
</script>
<style>
@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-vue-ribbon/styles/material.css";
.custom-tooltip.e-paste {
font-size: 50px;
}
</style><template>
<ejs-ribbon ref="ribbonKeyTip" :enableKeyTips="true" :created="ribbonCreated">
<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="pasteSettigs">
</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>
</template>
<script>
import { RibbonKeyTip, RibbonItemSize, RibbonGallery, RibbonGroupButtonSelection, RibbonColorPicker, } from "@syncfusion/ej2-vue-ribbon";
import { RibbonComponent, RibbonGroupDirective, RibbonGroupsDirective, RibbonCollectionsDirective, RibbonCollectionDirective, RibbonItemsDirective, RibbonItemDirective, RibbonTabsDirective, RibbonTabDirective } from "@syncfusion/ej2-vue-ribbon";
export default {
name: "App",
components: {
"ejs-ribbon": RibbonComponent,
"e-ribbon-tabs": RibbonTabsDirective,
"e-ribbon-tab": RibbonTabDirective,
"e-ribbon-groups": RibbonGroupsDirective,
"e-ribbon-group": RibbonGroupDirective,
"e-ribbon-collections": RibbonCollectionsDirective,
"e-ribbon-collection": RibbonCollectionDirective,
"e-ribbon-items": RibbonItemsDirective,
"e-ribbon-item": RibbonItemDirective
},
provide: {
ribbon: [RibbonKeyTip, RibbonGallery, RibbonColorPicker]
},
data: function () {
return {
largeSize: RibbonItemSize.Large,
cutButton: { iconCss: "e-icons e-cut", content: "Cut" },
copyButton: { iconCss: "e-icons e-copy", content: "Copy" },
pasteSettigs: {
iconCss: "e-icons e-paste", content: "Paste",
items: [{ text: "Keep Source Format" }, { text: "Merge format" }, { text: "Keep text only" }]
},
pasteOptions: { title: "Paste", cssClass: 'custom-tooltip', content: "Paste content here.</br> Add content on the clipboard to your document.", iconCss: "e-icons e-paste" },
formatButton: { iconCss: "e-icons e-format-painter", content: "Format Painter" },
styleOptions: {
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
},
sizeOptions: {
dataSource: ["8", "9", "10", "11", "12", "14", "16", "18", "20", "22", "24", "26", "28", "36", "48", "72", "96"],
index: 4,
width: "65px"
},
groupButtonSingle: {
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' }
]
},
colorPicker: { value: "#123456" },
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'
}]
}]
},
tableSettings:{
iconCss: 'e-icons e-table', content: 'Table',
items: [{ text: 'Insert Table' }, { text: 'Draw Table' }, { text: 'Convert Table' }, { text: 'Excel SpreadSheet' }]
},
rulerSettings: { label: "Ruler", checked: false },
gridSettings: { label: "Gridlines", checked: false },
navigationSettings: { label: "Navigation Pane", checked: true }
};
},
methods: {
ribbonCreated: function () {
this.$refs.ribbonKeyTip.ej2Instances.ribbonKeyTipModule.showKeyTips('H');
}
}
};
</script>
<style>
@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-vue-ribbon/styles/material.css";
.custom-tooltip.e-paste{
font-size: 50px;
}
</style>File menu keytip
You can add keytips to the file menu by using the keyTip property.
<template>
<ejs-ribbon ref="ribbonKeyTip" :fileMenu="fileSettings" :enableKeyTips="true" :created="ribbonCreated">
<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" :allowedSizes="largeSize" :splitButtonSettings="pasteSettigs">
</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>
</template>
<script setup>
import { provide } from "vue";
import { RibbonKeyTip, RibbonItemSize, RibbonFileMenu } from "@syncfusion/ej2-vue-ribbon";
import { RibbonComponent as EjsRibbon, RibbonGroupDirective as ERibbonGroup, RibbonGroupsDirective as ERibbonGroups, RibbonCollectionsDirective as ERibbonCollections, RibbonCollectionDirective as ERibbonCollection, RibbonItemsDirective as ERibbonItems, RibbonItemDirective as ERibbonItem, RibbonTabsDirective as ERibbonTabs, RibbonTabDirective as ERibbonTab } from "@syncfusion/ej2-vue-ribbon";
import { ref } from 'vue';
provide('ribbon', [RibbonKeyTip, RibbonFileMenu]);
const ribbonKeyTip = ref(null);
const largeSize = RibbonItemSize.Large;
const fileSettings = {
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" }
]
};
const cutButton = { iconCss: "e-icons e-cut", content: "Cut" };
const copyButton = { iconCss: "e-icons e-copy", content: "Copy" };
const pasteSettigs = {
iconCss: "e-icons e-paste", content: "Paste",
items: [{ text: "Keep Source Format" }, { text: "Merge format" }, { text: "Keep text only" }]
};
const ribbonCreated = () => {
ribbonKeyTip.value.ej2Instances.ribbonKeyTipModule.showKeyTips();
};
</script>
<style>
@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-vue-ribbon/styles/material.css";
</style><template>
<ejs-ribbon ref="ribbonKeyTip" :fileMenu="fileSettings" :enableKeyTips="true" :created="ribbonCreated">
<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" :allowedSizes="largeSize" :splitButtonSettings="pasteSettigs">
</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>
</template>
<script>
import { RibbonKeyTip, RibbonItemSize, RibbonFileMenu } from "@syncfusion/ej2-vue-ribbon";
import { RibbonComponent, RibbonGroupDirective, RibbonGroupsDirective, RibbonCollectionsDirective, RibbonCollectionDirective, RibbonItemsDirective, RibbonItemDirective, RibbonTabsDirective, RibbonTabDirective } from "@syncfusion/ej2-vue-ribbon";
export default {
name: "App",
components: {
"ejs-ribbon": RibbonComponent,
"e-ribbon-tabs": RibbonTabsDirective,
"e-ribbon-tab": RibbonTabDirective,
"e-ribbon-groups": RibbonGroupsDirective,
"e-ribbon-group": RibbonGroupDirective,
"e-ribbon-collections": RibbonCollectionsDirective,
"e-ribbon-collection": RibbonCollectionDirective,
"e-ribbon-items": RibbonItemsDirective,
"e-ribbon-item": RibbonItemDirective
},
provide: {
ribbon: [RibbonKeyTip, RibbonFileMenu]
},
data: function () {
return {
largeSize: RibbonItemSize.Large,
fileSettings: {
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" }
]
},
cutButton: { iconCss: "e-icons e-cut", content: "Cut" },
copyButton: { iconCss: "e-icons e-copy", content: "Copy" },
pasteSettigs: {
iconCss: "e-icons e-paste", content: "Paste",
items: [{ text: "Keep Source Format" }, { text: "Merge format" }, { text: "Keep text only" }]
},
};
},
methods: {
ribbonCreated: function () {
this.$refs.ribbonKeyTip.ej2Instances.ribbonKeyTipModule.showKeyTips();
}
}
};
</script>
<style>
@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-vue-ribbon/styles/material.css";
</style>Backstage menu keytip
You can add keytips to backstage menu items by using the keyTip property.
<template>
<ejs-ribbon ref="ribbonKeyTip" :backStageMenu="backstageSettings" :enableKeyTips="true" :created="ribbonCreated">
<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" :allowedSizes="largeSize" :splitButtonSettings="pasteSettigs">
</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>
</template>
<script setup>
import { provide } from "vue";
import { RibbonKeyTip, RibbonItemSize, RibbonBackstage } from "@syncfusion/ej2-vue-ribbon";
import { RibbonComponent as EjsRibbon, RibbonGroupDirective as ERibbonGroup, RibbonGroupsDirective as ERibbonGroups, RibbonCollectionsDirective as ERibbonCollections, RibbonCollectionDirective as ERibbonCollection, RibbonItemsDirective as ERibbonItems, RibbonItemDirective as ERibbonItem, RibbonTabsDirective as ERibbonTabs, RibbonTabDirective as ERibbonTab } from "@syncfusion/ej2-vue-ribbon";
import {ref} from 'vue';
provide('ribbon', [RibbonKeyTip, RibbonBackstage]);
const ribbonKeyTip=ref(null);
const largeSize = RibbonItemSize.Large;
const 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>
`;
};
const 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>
`;
};
const 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>
`;
};
const backstageSettings = {
keyTip: 'F',
visible: true,
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 cutButton = { iconCss: "e-icons e-cut", content: "Cut" };
const copyButton = { iconCss: "e-icons e-copy", content: "Copy" };
const pasteSettigs = {
iconCss: "e-icons e-paste", content: "Paste",
items: [{ text: "Keep Source Format" }, { text: "Merge format" }, { text: "Keep text only" }]
};
const ribbonCreated =() => {
ribbonKeyTip.value.ej2Instances.ribbonKeyTipModule.showKeyTips('F');
};
</script>
<style>
@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-vue-ribbon/styles/material.css";
.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;
}
</style><template>
<ejs-ribbon ref="ribbonKeyTip" :backStageMenu="backstageSettings" :enableKeyTips="true" :created="ribbonCreated">
<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" :allowedSizes="largeSize" :splitButtonSettings="pasteSettigs">
</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>
</template>
<script>
import { RibbonKeyTip, RibbonItemSize, RibbonBackstage } from "@syncfusion/ej2-vue-ribbon";
import { RibbonComponent, RibbonGroupDirective, RibbonGroupsDirective, RibbonCollectionsDirective, RibbonCollectionDirective, RibbonItemsDirective, RibbonItemDirective, RibbonTabsDirective, RibbonTabDirective } from "@syncfusion/ej2-vue-ribbon";
export default {
name: "App",
components: {
"ejs-ribbon": RibbonComponent,
"e-ribbon-tabs": RibbonTabsDirective,
"e-ribbon-tab": RibbonTabDirective,
"e-ribbon-groups": RibbonGroupsDirective,
"e-ribbon-group": RibbonGroupDirective,
"e-ribbon-collections": RibbonCollectionsDirective,
"e-ribbon-collection": RibbonCollectionDirective,
"e-ribbon-items": RibbonItemsDirective,
"e-ribbon-item": RibbonItemDirective
},
provide: {
ribbon: [RibbonKeyTip, RibbonBackstage]
},
data: function () {
return {
largeSize: RibbonItemSize.Large,
backstageSettings: {
keyTip: 'F',
visible: true,
items: [
{ id: 'home', keyTip: 'H', text: 'Home', iconCss: 'e-icons e-home', content: this.homeContentTemplate() },
{ id: 'new', keyTip: 'N', text: 'New', iconCss: 'e-icons e-file-new', content: this.newContentTemplate() },
{ id: 'open', keyTip: 'O', text: 'Open', iconCss: 'e-icons e-folder-open', content: this.openContentTemplate() }
],
backButton: {
text: 'Close',
}
},
cutButton: { iconCss: "e-icons e-cut", content: "Cut" },
copyButton: { iconCss: "e-icons e-copy", content: "Copy" },
pasteSettigs: {
iconCss: "e-icons e-paste", content: "Paste",
items: [{ text: "Keep Source Format" }, { text: "Merge format" }, { text: "Keep text only" }]
},
};
},
methods: {
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>
`;
},
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>
`;
},
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>
`;
},
ribbonCreated: function () {
this.$refs.ribbonKeyTip.ej2Instances.ribbonKeyTipModule.showKeyTips('F');
}
}
};
</script>
<style>
@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-vue-ribbon/styles/material.css";
.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;
}
</style>Ribbon layout switcher keytip
You can add keytip to the layout switcher by using the layoutSwitcherKeyTip property.
<template>
<ejs-ribbon ref="ribbonKeyTip" :fileMenu="fileSettings" :enableKeyTips="true" layoutSwitcherKeyTip="LS" :created="ribbonCreated">
<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" :allowedSizes="largeSize" :splitButtonSettings="pasteSettigs">
</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>
</template>
<script setup>
import { provide } from "vue";
import { RibbonKeyTip, RibbonItemSize, RibbonFileMenu } from "@syncfusion/ej2-vue-ribbon";
import { RibbonComponent as EjsRibbon, RibbonGroupDirective as ERibbonGroup, RibbonGroupsDirective as ERibbonGroups, RibbonCollectionsDirective as ERibbonCollections, RibbonCollectionDirective as ERibbonCollection, RibbonItemsDirective as ERibbonItems, RibbonItemDirective as ERibbonItem, RibbonTabsDirective as ERibbonTabs, RibbonTabDirective as ERibbonTab } from "@syncfusion/ej2-vue-ribbon";
import {ref} from 'vue';
provide('ribbon', [RibbonKeyTip, RibbonFileMenu]);
const ribbonKeyTip=ref(null);
const largeSize = RibbonItemSize.Large;
const fileSettings = {
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" }
]
};
const cutButton = { iconCss: "e-icons e-cut", content: "Cut" };
const copyButton = { iconCss: "e-icons e-copy", content: "Copy" };
const pasteSettigs = {
iconCss: "e-icons e-paste", content: "Paste",
items: [{ text: "Keep Source Format" }, { text: "Merge format" }, { text: "Keep text only" }]
};
const ribbonCreated = () => {
ribbonKeyTip.value.ej2Instances.ribbonKeyTipModule.showKeyTips();
}
</script>
<style>
@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-vue-ribbon/styles/material.css";
</style><template>
<ejs-ribbon ref="ribbonKeyTip" :fileMenu="fileSettings" :enableKeyTips="true" layoutSwitcherKeyTip="LS" :created="ribbonCreated">
<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" :allowedSizes="largeSize" :splitButtonSettings="pasteSettigs">
</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>
</template>
<script>
import { RibbonKeyTip, RibbonItemSize, RibbonFileMenu } from "@syncfusion/ej2-vue-ribbon";
import { RibbonComponent, RibbonGroupDirective, RibbonGroupsDirective, RibbonCollectionsDirective, RibbonCollectionDirective, RibbonItemsDirective, RibbonItemDirective, RibbonTabsDirective, RibbonTabDirective } from "@syncfusion/ej2-vue-ribbon";
export default {
name: "App",
components: {
"ejs-ribbon": RibbonComponent,
"e-ribbon-tabs": RibbonTabsDirective,
"e-ribbon-tab": RibbonTabDirective,
"e-ribbon-groups": RibbonGroupsDirective,
"e-ribbon-group": RibbonGroupDirective,
"e-ribbon-collections": RibbonCollectionsDirective,
"e-ribbon-collection": RibbonCollectionDirective,
"e-ribbon-items": RibbonItemsDirective,
"e-ribbon-item": RibbonItemDirective
},
provide: {
ribbon: [RibbonKeyTip, RibbonFileMenu]
},
data: function () {
return {
largeSize: RibbonItemSize.Large,
fileSettings: {
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" }
]
},
cutButton: { iconCss: "e-icons e-cut", content: "Cut" },
copyButton: { iconCss: "e-icons e-copy", content: "Copy" },
pasteSettigs: {
iconCss: "e-icons e-paste", content: "Paste",
items: [{ text: "Keep Source Format" }, { text: "Merge format" }, { text: "Keep text only" }]
},
};
},
methods: {
ribbonCreated: function () {
this.$refs.ribbonKeyTip.ej2Instances.ribbonKeyTipModule.showKeyTips();
}
}
};
</script>
<style>
@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-vue-ribbon/styles/material.css";
</style>Ribbon launcher icon keytip
You can add keytip to the launcher icon by using the launcherIconKeyTip property.
<template>
<ejs-ribbon ref="ribbonKeyTip" :fileMenu="fileSettings" :enableKeyTips="true" :created="ribbonCreated">
<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" :allowedSizes="largeSize" :splitButtonSettings="pasteSettigs">
</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>
</template>
<script setup>
import { provide } from "vue";
import { RibbonKeyTip, RibbonItemSize, RibbonFileMenu } from "@syncfusion/ej2-vue-ribbon";
import { RibbonComponent as EjsRibbon, RibbonGroupDirective as ERibbonGroup, RibbonGroupsDirective as ERibbonGroups, RibbonCollectionsDirective as ERibbonCollections, RibbonCollectionDirective as ERibbonCollection, RibbonItemsDirective as ERibbonItems, RibbonItemDirective as ERibbonItem, RibbonTabsDirective as ERibbonTabs, RibbonTabDirective as ERibbonTab } from "@syncfusion/ej2-vue-ribbon";
import {ref} from 'vue';
provide('ribbon', [RibbonKeyTip, RibbonFileMenu]);
const ribbonKeyTip = ref(null);
const largeSize = RibbonItemSize.Large;
const fileSettings = {
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" }
]
};
const cutButton = { iconCss: "e-icons e-cut", content: "Cut" };
const copyButton = { iconCss: "e-icons e-copy", content: "Copy" };
const pasteSettigs = {
iconCss: "e-icons e-paste", content: "Paste",
items: [{ text: "Keep Source Format" }, { text: "Merge format" }, { text: "Keep text only" }]
};
const ribbonCreated =()=> {
ribbonKeyTip.value.ej2Instances.ribbonKeyTipModule.showKeyTips('H');
};
</script>
<style>
@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-vue-ribbon/styles/material.css";
</style><template>
<ejs-ribbon ref="ribbonKeyTip" :fileMenu="fileSettings" :enableKeyTips="true" :created="ribbonCreated">
<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" :allowedSizes="largeSize" :splitButtonSettings="pasteSettigs">
</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>
</template>
<script>
import { RibbonKeyTip, RibbonItemSize, RibbonFileMenu } from "@syncfusion/ej2-vue-ribbon";
import { RibbonComponent, RibbonGroupDirective, RibbonGroupsDirective, RibbonCollectionsDirective, RibbonCollectionDirective, RibbonItemsDirective, RibbonItemDirective, RibbonTabsDirective, RibbonTabDirective } from "@syncfusion/ej2-vue-ribbon";
export default {
name: "App",
components: {
"ejs-ribbon": RibbonComponent,
"e-ribbon-tabs": RibbonTabsDirective,
"e-ribbon-tab": RibbonTabDirective,
"e-ribbon-groups": RibbonGroupsDirective,
"e-ribbon-group": RibbonGroupDirective,
"e-ribbon-collections": RibbonCollectionsDirective,
"e-ribbon-collection": RibbonCollectionDirective,
"e-ribbon-items": RibbonItemsDirective,
"e-ribbon-item": RibbonItemDirective
},
provide: {
ribbon: [RibbonKeyTip, RibbonFileMenu]
},
data: function () {
return {
largeSize: RibbonItemSize.Large,
fileSettings: {
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" }
]
},
cutButton: { iconCss: "e-icons e-cut", content: "Cut" },
copyButton: { iconCss: "e-icons e-copy", content: "Copy" },
pasteSettigs: {
iconCss: "e-icons e-paste", content: "Paste",
items: [{ text: "Keep Source Format" }, { text: "Merge format" }, { text: "Keep text only" }]
},
};
},
methods: {
ribbonCreated: function () {
this.$refs.ribbonKeyTip.ej2Instances.ribbonKeyTipModule.showKeyTips('H');
}
}
};
</script>
<style>
@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-vue-ribbon/styles/material.css";
</style>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
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.