Contents
Ribbon Backstage
11 Jun 202424 minutes to read
The Ribbon supports backstage view which is an addition to the traditional file menu. It displays information like application settings, user details, etc. The backstage view can be enabled by setting the backStageMenu property.
The backstage view options are displayed on the left, while the content of each option is shown on the right.
Adding backstage items
The menu items can be added to the backstage view by using the items property. You can show the backstage view by setting the visible property to true. By default, the backstage view is hidden.
<template>
<ejs-ribbon ref="backstageRibbon" :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="Button" :buttonSettings="cutButton">
</e-ribbon-item>
<e-ribbon-item type="Button" :buttonSettings="copyButton">
</e-ribbon-item>
<e-ribbon-item type="Button" :buttonSettings="pasteButton">
</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 { 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";
provide('ribbon', [RibbonBackstage]);
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 = {
visible: true,
items: [
{ id: 'home', text: 'Home', iconCss: 'e-icons e-home', content: homeContentTemplate() },
{ id: 'new', text: 'New', iconCss: 'e-icons e-file-new', content: newContentTemplate() },
{ id: 'open', 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 pasteButton = { iconCss: "e-icons e-paste", content: "Paste" };
</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="backstageRibbon" :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="Button" :buttonSettings="cutButton">
</e-ribbon-item>
<e-ribbon-item type="Button" :buttonSettings="copyButton">
</e-ribbon-item>
<e-ribbon-item type="Button" :buttonSettings="pasteButton">
</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 { 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: [RibbonBackstage]
},
data: function () {
return {
backstageSettings: {
visible: true,
items: [
{ id: 'home', text: 'Home', iconCss: 'e-icons e-home', content: this.homeContentTemplate() },
{ id: 'new', text: 'New', iconCss: 'e-icons e-file-new', content: this.newContentTemplate() },
{ id: 'open', 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"},
pasteButton: { iconCss: "e-icons e-paste", content: "Paste"},
};
},
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>
`;
},
}
};
</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>Adding footer items
You can use the isFooter property in the items collection to add the backstage view footer items. By default, the value is false.
<template>
<ejs-ribbon ref="backstageRibbon" :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="Button" :buttonSettings="cutButton">
</e-ribbon-item>
<e-ribbon-item type="Button" :buttonSettings="copyButton">
</e-ribbon-item>
<e-ribbon-item type="Button" :buttonSettings="pasteButton">
</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 { 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";
provide('ribbon', [RibbonBackstage]);
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 accountContent = () => {
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-people"></span> </td>
<td>
<span style="display: block; font-size: 14px">Account type</span>
<span style="font-size: 12px">Administrator</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-password"></span> </td>
<td>
<span style="display: block; font-size: 14px">Password protected</span>
<span style="font-size: 12px">Yes</span>
</td>
</tr>
</tbody>
</table>
</div>
</div>
`;
};
const backstageSettings = {
visible: true,
items: [
{ id: 'home', text: 'Home', iconCss: 'e-icons e-home', content: homeContentTemplate() },
{ id: 'new', text: 'New', iconCss: 'e-icons e-file-new', content: newContentTemplate() },
{ id: 'open', text: 'Open', iconCss: 'e-icons e-folder-open', content: openContentTemplate() },
{ separator: true, isFooter: true },
{ id: 'account', text: 'Account', isFooter: true, content: accountContent() }
],
backButton: {
text: 'Close',
}
};
const cutButton = { iconCss: "e-icons e-cut", content: "Cut" };
const copyButton = { iconCss: "e-icons e-copy", content: "Copy"};
const pasteButton = { iconCss: "e-icons e-paste", content: "Paste"};
</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="backstageRibbon" :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="Button" :buttonSettings="cutButton">
</e-ribbon-item>
<e-ribbon-item type="Button" :buttonSettings="copyButton">
</e-ribbon-item>
<e-ribbon-item type="Button" :buttonSettings="pasteButton">
</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 { 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: [RibbonBackstage]
},
data: function () {
return {
backstageSettings: {
visible: true,
items: [
{ id: 'home', text: 'Home', iconCss: 'e-icons e-home', content: this.homeContentTemplate() },
{ id: 'new', text: 'New', iconCss: 'e-icons e-file-new', content: this.newContentTemplate() },
{ id: 'open', text: 'Open', iconCss: 'e-icons e-folder-open', content: this.openContentTemplate() },
{ separator: true, isFooter: true },
{ id: 'account', text: 'Account', isFooter: true, content: this.accountContent() }
],
backButton: {
text: 'Close',
}
},
cutButton: { iconCss: "e-icons e-cut", content: "Cut" },
copyButton: { iconCss: "e-icons e-copy", content: "Copy"},
pasteButton: { iconCss: "e-icons e-paste", content: "Paste"},
};
},
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>
`;
},
accountContent () {
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-people"></span> </td>
<td>
<span style="display: block; font-size: 14px">Account type</span>
<span style="font-size: 12px">Administrator</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-password"></span> </td>
<td>
<span style="display: block; font-size: 14px">Password protected</span>
<span style="font-size: 12px">Yes</span>
</td>
</tr>
</tbody>
</table>
</div>
</div>
`;
}
}
};
</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>Adding separator
The separators are horizontal lines used to separate the backstage view items. You can use the separator property to split the menu items.
<template>
<ejs-ribbon ref="backstageRibbon" :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="Button" :buttonSettings="cutButton">
</e-ribbon-item>
<e-ribbon-item type="Button" :buttonSettings="copyButton">
</e-ribbon-item>
<e-ribbon-item type="Button" :buttonSettings="pasteButton">
</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 { 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";
provide('ribbon', [RibbonBackstage]);
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 printContent = () => {
return `
<div style="min-width: 300px; padding: 20px;">
<h2>Print this document</h2>
<button id="togglebtn" class="e-control e-btn e-lib e-flat e-primary">
<span class="e-btn-icon e-btn-sb-icons e-icons e-print e-icon-left">
</span>Print</button>
</div>
`;
};
const backstageSettings = {
visible: true,
items: [
{ id: 'home', text: 'Home', iconCss: 'e-icons e-home', content: homeContentTemplate() },
{ id: 'new', text: 'New', iconCss: 'e-icons e-file-new', content: newContentTemplate() },
{ id: 'open', text: 'Open', iconCss: 'e-icons e-folder-open', content: openContentTemplate() },
{ separator: true },
{ text: 'Print', content: printContent() }
],
backButton: {
text: 'Close',
}
};
const cutButton = { iconCss: "e-icons e-cut", content: "Cut" };
const copyButton = { iconCss: "e-icons e-copy", content: "Copy" };
const pasteButton = { iconCss: "e-icons e-paste", content: "Paste" };
</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: 350px;
height: 530px;
}
.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="backstageRibbon" :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="Button" :buttonSettings="cutButton">
</e-ribbon-item>
<e-ribbon-item type="Button" :buttonSettings="copyButton">
</e-ribbon-item>
<e-ribbon-item type="Button" :buttonSettings="pasteButton">
</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 { 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: [RibbonBackstage]
},
data: function () {
return {
backstageSettings: {
visible: true,
items: [
{ id: 'home', text: 'Home', iconCss: 'e-icons e-home', content: this.homeContentTemplate() },
{ id: 'new', text: 'New', iconCss: 'e-icons e-file-new', content: this.newContentTemplate() },
{ id: 'open', text: 'Open', iconCss: 'e-icons e-folder-open', content: this.openContentTemplate() },
{ separator: true },
{ text: 'Print', content: this.printContent() }
],
backButton: {
text: 'Close',
}
},
cutButton: { iconCss: "e-icons e-cut", content: "Cut" },
copyButton: { iconCss: "e-icons e-copy", content: "Copy"},
pasteButton: { iconCss: "e-icons e-paste", content: "Paste"},
};
},
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>
`;
},
printContent () {
return `
<div style="min-width: 300px; padding: 20px;">
<h2>Print this document</h2>
<button id="togglebtn" class="e-control e-btn e-lib e-flat e-primary">
<span class="e-btn-icon e-btn-sb-icons e-icons e-print e-icon-left">
</span>Print</button>
</div>
`;
}
}
};
</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: 350px;
height: 530px;
}
.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>Back button
You can use the backButton property to customize the text and icon of the close button using the text and iconCss property. You can show the back button by setting the visible property to true.
<template>
<ejs-ribbon ref="backstageRibbon" :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="Button" :buttonSettings="cutButton">
</e-ribbon-item>
<e-ribbon-item type="Button" :buttonSettings="copyButton">
</e-ribbon-item>
<e-ribbon-item type="Button" :buttonSettings="pasteButton">
</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 { 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";
provide('ribbon', [RibbonBackstage]);
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 backstageSettings = {
visible: true,
items: [
{ id: 'home', text: 'Home', iconCss: 'e-icons e-home', content: homeContentTemplate() },
],
backButton: {
text: 'Close',
}
};
const cutButton = { iconCss: "e-icons e-cut", content: "Cut" };
const copyButton = { iconCss: "e-icons e-copy", content: "Copy"};
const pasteButton = { iconCss: "e-icons e-paste", content: "Paste"};
</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="backstageRibbon" :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="Button" :buttonSettings="cutButton">
</e-ribbon-item>
<e-ribbon-item type="Button" :buttonSettings="copyButton">
</e-ribbon-item>
<e-ribbon-item type="Button" :buttonSettings="pasteButton">
</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 { 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: [RibbonBackstage]
},
data: function () {
return {
backstageSettings: {
visible: true,
items: [
{ id: 'home', text: 'Home', iconCss: 'e-icons e-home', content: this.homeContentTemplate() },
],
backButton: {
text: 'Close',
}
},
cutButton: { iconCss: "e-icons e-cut", content: "Cut" },
copyButton: { iconCss: "e-icons e-copy", content: "Copy" },
pasteButton: { iconCss: "e-icons e-paste", content: "Paste" },
};
},
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>
`;
},
}
};
</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>Backstage target
The target property specifies the element selector in which backstage will be displayed. The target element should have the position as relative, else the backstage will be positioned nearest to the relative element. By default, the backstage is positioned to ribbon element.
<template>
<div id="ribbon-backstage-section">
<ejs-ribbon ref="backstageRibbon" :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="Button" :buttonSettings="cutButton">
</e-ribbon-item>
<e-ribbon-item type="Button" :buttonSettings="copyButton">
</e-ribbon-item>
<e-ribbon-item type="Button" :buttonSettings="pasteButton">
</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>
<div id="targetElement"></div>
</div>
</template>
<script setup>
import { provide } from "vue";
import { 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";
provide('ribbon', [RibbonBackstage]);
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 = {
target: '#targetElement',
visible: true,
items: [
{ id: 'home', text: 'Home', iconCss: 'e-icons e-home', content: homeContentTemplate() },
{ id: 'new', text: 'New', iconCss: 'e-icons e-file-new', content: newContentTemplate() },
{ id: 'open', 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 pasteButton = { iconCss: "e-icons e-paste", content: "Paste" };
</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: 530px;
}
#targetElement {
width: 300px;
height: 300px;
}
.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>
<div id="ribbon-backstage-section">
<ejs-ribbon ref="backstageRibbon" :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="Button" :buttonSettings="cutButton">
</e-ribbon-item>
<e-ribbon-item type="Button" :buttonSettings="copyButton">
</e-ribbon-item>
<e-ribbon-item type="Button" :buttonSettings="pasteButton">
</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>
<div id="targetElement"></div>
</div>
</template>
<script>
import { 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: [RibbonBackstage]
},
data: function () {
return {
backstageSettings: {
target: '#targetElement',
visible: true,
items: [
{ id: 'home', text: 'Home', iconCss: 'e-icons e-home', content: this.homeContentTemplate() },
{ id: 'new', text: 'New', iconCss: 'e-icons e-file-new', content: this.newContentTemplate() },
{ id: 'open', 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"},
pasteButton: { iconCss: "e-icons e-paste", content: "Paste"},
};
},
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>
`;
},
}
};
</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: 530px;
}
#targetElement{
width: 300px;
height: 300px;
}
.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
You can use the template property to modify the backstage view menu items and their contents.
<template>
<ejs-ribbon id="ribbon" ref="backstageRibbon" :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="Button" :buttonSettings="cutButton">
</e-ribbon-item>
<e-ribbon-item type="Button" :buttonSettings="copyButton">
</e-ribbon-item>
<e-ribbon-item type="Button" :buttonSettings="pasteButton">
</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 { 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 { onMounted } from 'vue';
provide('ribbon', [RibbonBackstage]);
const backstageSettings = {
visible: true,
template: homeContentTemplate()
};
const cutButton = { iconCss: "e-icons e-cut", content: "Cut" };
const copyButton = { iconCss: "e-icons e-copy", content: "Copy" };
const pasteButton = { iconCss: "e-icons e-paste", content: "Paste" };
displayPopup = () => {
backstagePopup = ribbonEle.querySelector('#ribbon_backstagepopup');
if (backstagePopup) {
backstagePopup.style.display = 'block';
}
}
const contentClick = (id) => {
content = ribbonEle.querySelector('.content-open')
if (content) { content.classList.replace('content-open', 'content-close'); }
ribbonEle.querySelector('#' + id + '-wrapper').classList.add('content-open');
};
const closeContent = () => {
ribbonEle.querySelector('#ribbon_backstagepopup').style.display = 'none'
}
const homeContentTemplate = () => {
return `
<div id="temp-content" style="width: 550px; height: 350px; display: flex">
<div id="items-wrapper" style="width: 130px; height:100%; background: #779de8;">
<ul>
<li id="close" @click="closeContent">
<span class="e-icons e-close"></span>
Close
</li>
<li id="new" @click="contentClick('new')">
<span class="e-icons e-file-new"></span>
New
</li>
<li id="open" @click="contentClick('open')">
<span class="e-icons e-folder-open"></span>
Open
</li>
<li id="save" @click="contentClick('save')">
<span class="e-icons e-save"></span>
Save
</li>
</ul>
</div>
<div id="content-wrapper">
<div id='new-wrapper' class='content-open' 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>
<div id="save-wrapper" class='content-close' style="padding: 20px;">
<div class="section-content" style="padding: 12px 0px; cursor: pointer">
<table>
<tbody>
<tr>
<td> <span class="doc_icon e-icons e-save"></span> </td>
<td>
<span style="display: block; font-size: 14px"> Save as </span>
<span style="font-size: 12px"> Save as copy online </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-rename"></span> </td>
<td>
<span style="display: block; font-size: 14px"> Rename </span>
<span style="font-size: 12px">Rename this file. </span>
</td>
</tr>
</tbody>
</table>
</div>
</div>
<div id="open-wrapper" class='content-close' 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"> Ribbon.docx </span>
<span style="font-size: 12px"> EJ2 >> Components >> Navigations >> Ribbon >> default </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-open-link"></span> </td>
<td>
<span style="display: block; font-size: 14px"> Classic_layout.docx </span>
<span style="font-size: 12px"> EJ2 >> Components >> Navigations >> Ribbon >> layouts </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-open-link"></span> </td>
<td>
<span style="display: block; font-size: 14px"> Simplified_layout.docx </span>
<span style="font-size: 12px"> EJ2 >> Components >> Navigations >> Ribbon >> layouts </span>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
`;
};
onMounted(() => {
ribbonEle = document.getElementById('ribbon');
document.querySelector('.e-ribbon-backstage').onClick = displayPopup.bind(this);
});
</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;
}
#targetElement {
width: 500px;
height: 500px;
}
#items-wrapper ul {
padding: 0;
margin: 0;
}
#items-wrapper li {
height: 38px;
font-size: 16px;
list-style: none;
cursor: pointer;
text-align: center;
padding-top: 10px;
}
#items-wrapper li span {
margin-right: 15px;
font-size: 14px;
}
#items-wrapper ul li:hover {
background-color: #a5bff4;
}
#content-wrapper .content-close {
display: none;
}
#content-wrapper .content-open {
display: block;
}
</style><template>
<ejs-ribbon id="ribbon" ref="backstageRibbon" :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="Button" :buttonSettings="cutButton">
</e-ribbon-item>
<e-ribbon-item type="Button" :buttonSettings="copyButton">
</e-ribbon-item>
<e-ribbon-item type="Button" :buttonSettings="pasteButton">
</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 { RibbonBackstage, 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: [RibbonBackstage]
},
data: function () {
return {
backstageSettings: {
visible: true,
template: this.homeContentTemplate()
},
cutButton: { iconCss: "e-icons e-cut", content: "Cut" },
copyButton: { iconCss: "e-icons e-copy", content: "Copy" },
pasteButton: { iconCss: "e-icons e-paste", content: "Paste" },
};
},
methods: {
displayPopup() {
this.backstagePopup = this.ribbonEle.querySelector('#ribbon_backstagepopup');
if (this.backstagePopup) {
this.backstagePopup.style.display = 'block';
}
},
contentClick(id) {
this.content = this.ribbonEle.querySelector('.content-open')
if (this.content) { this.content.classList.replace('content-open', 'content-close'); }
this.ribbonEle.querySelector('#' + id + '-wrapper').classList.add('content-open');
},
closeContent() {
this.ribbonEle.querySelector('#ribbon_backstagepopup').style.display = 'none';
},
homeContentTemplate() {
return `
<div id="temp-content" style="width: 550px; height: 350px; display: flex">
<div id="items-wrapper" style="width: 130px; height:100%; background: #779de8;">
<ul>
<li id="close" @click="closeContent">
<span class="e-icons e-close"></span>
Close
</li>
<li id="new" @click="contentClick('new')">
<span class="e-icons e-file-new"></span>
New
</li>
<li id="open" @click="contentClick('open')">
<span class="e-icons e-folder-open"></span>
Open
</li>
<li id="save" @click="contentClick('save')">
<span class="e-icons e-save"></span>
Save
</li>
</ul>
</div>
<div id="content-wrapper">
<div id='new-wrapper' class='content-open' 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>
<div id="save-wrapper" class='content-close' style="padding: 20px;">
<div class="section-content" style="padding: 12px 0px; cursor: pointer">
<table>
<tbody>
<tr>
<td> <span class="doc_icon e-icons e-save"></span> </td>
<td>
<span style="display: block; font-size: 14px"> Save as </span>
<span style="font-size: 12px"> Save as copy online </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-rename"></span> </td>
<td>
<span style="display: block; font-size: 14px"> Rename </span>
<span style="font-size: 12px">Rename this file. </span>
</td>
</tr>
</tbody>
</table>
</div>
</div>
<div id="open-wrapper" class='content-close' 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"> Ribbon.docx </span>
<span style="font-size: 12px"> EJ2 >> Components >> Navigations >> Ribbon >> default </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-open-link"></span> </td>
<td>
<span style="display: block; font-size: 14px"> Classic_layout.docx </span>
<span style="font-size: 12px"> EJ2 >> Components >> Navigations >> Ribbon >> layouts </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-open-link"></span> </td>
<td>
<span style="display: block; font-size: 14px"> Simplified_layout.docx </span>
<span style="font-size: 12px"> EJ2 >> Components >> Navigations >> Ribbon >> layouts </span>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
`;
},
},
mounted() {
this.ribbonEle = document.getElementById('ribbon');
document.querySelector('.e-ribbon-backstage').onclick = this.displayPopup.bind(this);
},
};
</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;
}
#targetElement {
width: 500px;
height: 500px;
}
#items-wrapper ul {
padding: 0;
margin: 0;
}
#items-wrapper li {
height: 38px;
font-size: 16px;
list-style: none;
cursor: pointer;
text-align: center;
padding-top: 10px;
}
#items-wrapper li span {
margin-right: 15px;
font-size: 14px;
}
#items-wrapper ul li:hover {
background-color: #a5bff4;
}
#content-wrapper .content-close {
display: none;
}
#content-wrapper .content-open {
display: block;
}
</style>Setting width and height
You can customize the height and width of the backstage view using the height and width property. By default, dimensions are set based on the content added.
<template>
<ejs-ribbon ref="backstageRibbon" :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="Button" :buttonSettings="cutButton">
</e-ribbon-item>
<e-ribbon-item type="Button" :buttonSettings="copyButton">
</e-ribbon-item>
<e-ribbon-item type="Button" :buttonSettings="pasteButton">
</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 { 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";
provide('ribbon', [RibbonBackstage]);
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 = {
visible: true,
items: [
{ id: 'home', text: 'Home', iconCss: 'e-icons e-home', content: homeContentTemplate() },
{ id: 'new', text: 'New', iconCss: 'e-icons e-file-new', content: newContentTemplate() },
{ id: 'open', 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 pasteButton = { iconCss: "e-icons e-paste", content: "Paste"};
</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";
.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="backstageRibbon" :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="Button" :buttonSettings="cutButton">
</e-ribbon-item>
<e-ribbon-item type="Button" :buttonSettings="copyButton">
</e-ribbon-item>
<e-ribbon-item type="Button" :buttonSettings="pasteButton">
</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 { 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: [RibbonBackstage]
},
data: function () {
return {
backstageSettings: {
visible: true,
items: [
{ id: 'home', text: 'Home', iconCss: 'e-icons e-home', content: this.homeContentTemplate() },
{ id: 'new', text: 'New', iconCss: 'e-icons e-file-new', content: this.newContentTemplate() },
{ id: 'open', 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"},
pasteButton: { iconCss: "e-icons e-paste", content: "Paste"},
};
},
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>
`;
},
}
};
</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";
.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>