This sample shows the following:
How to create a "frequently used" button group and place your favorite items in a new ribbon tab.
Using search and replace functions instead of font style buttons.
You can use the ribbon's config property to edit the tabs and button groups within the tabs to show exactly what you want. Just follow these steps:
Clear the ribbon by setting the config.ribbon property to an empty array.
Create a new tab object with id, text, and buttonGroups properties.
Add the tab to the ribbon.
Create a new menu object with label, thumbnailClass, and commandGroup properties.
Add that new menu to the ribbon tab you just created
Set the existing ribbon config to the one you just created.
<template>
<div class="sample-tutorial">
<gc-spread-sheets-designer :styleInfo="styleInfo" :config="config" @designerInitialized="initDesigner" />
</div>
</template>
<script setup>
import GC from "@mescius/spread-sheets";
import { ref } from "vue";
import "@mescius/spread-sheets-print";
import "@mescius/spread-sheets-shapes";
import "@mescius/spread-sheets-pivot-addon";
import "@mescius/spread-sheets-tablesheet";
import '@mescius/spread-sheets-designer-resources-en';
import '@mescius/spread-sheets-designer'
import {registerlic} from '$DEMOROOT$/spread/source/js/designer/react_vue/license.js'
registerlic(GC);
GC.Spread.Common.CultureManager.culture("en-us");
const spreadNS = GC.Spread.Sheets;
const styleInfo = {
height: '100%'
}
const spreadRef = ref();
const initRibbon = () => {
let config = GC.Spread.Sheets.Designer.DefaultConfig;
// clear ribbon
config.ribbon = [];
// add new tab
let newTab = {
id: 'operate',
text: 'Favorite',
buttonGroups: [],
};
config.ribbon.unshift(newTab);
// add new menu
let basicMenu = {
label: 'Frequently used operations',
thumbnailClass: 'Frequently used operations',
commandGroup: {
children: [
{
commands: ['formulaAutoSum'],
},
{
commands: ['insertTable'],
},
{
type: 'separator',
},
{
direction: 'vertical',
children: [
{
commands: ['fontFamily', 'fontSize', 'fontWeight', 'backColor', 'foreColor'],
},
{
commands: ['find', 'replace', 'setFilter'],
},
],
},
{
direction: 'vertical',
commands: ['showHideVGridLine', 'showHideHGridLine'],
},
],
},
};
config.ribbon[0].buttonGroups.unshift(basicMenu);
return config;
};
const config = ref(initRibbon());
const initDesigner = (designer) => {
spreadRef.value = designer.getWorkbook();
}
</script>
<style scoped>
.sample-tutorial {
position: relative;
height: 100%;
overflow: hidden;
}
body {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
}
#app {
height: 100%;
}
.description {
margin: 10px;
width: 40%;
}
table {
font-family: arial, sans-serif;
border-collapse: collapse;
width: 100%;
}
</style>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<title>SpreadJS VUE</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" type="text/css" href="$DEMOROOT$/en/vue3/node_modules/@mescius/spread-sheets/styles/gc.spread.sheets.excel2013white.css">
<link rel="stylesheet" type="text/css" href="$DEMOROOT$/en/vue3/node_modules/@mescius/spread-sheets-designer/styles/gc.spread.sheets.designer.min.css">
<script src="$DEMOROOT$/en/vue3/node_modules/systemjs/dist/system.src.js"></script>
<script src="./systemjs.config.js"></script>
<script src="./compiler.js" type="module"></script>
<script>
var System = SystemJS;
System.import("./src/app.js");
System.import('$DEMOROOT$/en/lib/vue3/license.js');
</script>
</head>
<body>
<div id="app"></div>
</body>
</html>
(function (global) {
SystemJS.config({
transpiler: 'plugin-babel',
babelOptions: {
es2015: true
},
paths: {
// paths serve as alias
'npm:': 'node_modules/'
},
packageConfigPaths: [
'./node_modules/*/package.json',
"./node_modules/@mescius/*/package.json",
"./node_modules/@babel/*/package.json",
"./node_modules/@vue/*/package.json"
],
map: {
'vue': "npm:vue/dist/vue.esm-browser.js",
'tiny-emitter': 'npm:tiny-emitter/index.js',
'plugin-babel': 'npm:systemjs-plugin-babel/plugin-babel.js',
"systemjs-babel-build": "npm:systemjs-plugin-babel/systemjs-babel-browser.js",
'@mescius/spread-sheets': 'npm:@mescius/spread-sheets/index.js',
'@mescius/spread-sheets-vue': 'npm:@mescius/spread-sheets-vue/index.js',
'@mescius/spread-excelio': 'npm:@mescius/spread-excelio/index.js',
'@mescius/spread-sheets-barcode': 'npm:@mescius/spread-sheets-barcode/index.js',
'@mescius/spread-sheets-charts': 'npm:@mescius/spread-sheets-charts/index.js',
'@mescius/spread-sheets-languagepackages': 'npm:@mescius/spread-sheets-languagepackages/index.js',
'@mescius/spread-sheets-print': 'npm:@mescius/spread-sheets-print/index.js',
'@mescius/spread-sheets-pdf': 'npm:@mescius/spread-sheets-pdf/index.js',
'@mescius/spread-sheets-shapes': 'npm:@mescius/spread-sheets-shapes/index.js',
'@mescius/spread-sheets-slicers': 'npm:@mescius/spread-sheets-slicers/index.js',
'@mescius/spread-sheets-formula-panel': 'npm:@mescius/spread-sheets-formula-panel/index.js',
'@mescius/spread-sheets-io': 'npm:@mescius/spread-sheets-io/index.js',
'@mescius/spread-sheets-designer': 'npm:@mescius/spread-sheets-designer/index.js',
'@mescius/spread-sheets-designer-vue': 'npm:@mescius/spread-sheets-designer-vue/index.js',
'@mescius/spread-sheets-pivot-addon': 'npm:@mescius/spread-sheets-pivot-addon/index.js',
'@mescius/spread-sheets-tablesheet': 'npm:@mescius/spread-sheets-tablesheet/index.js',
'@mescius/spread-sheets-designer-resources-en': 'npm:@mescius/spread-sheets-designer-resources-en/index.js',
},
meta: {
'*.css': { loader: 'systemjs-plugin-css' },
'*.vue': { loader: "../plugin-vue/index.js" }
}
});
})(this);
