Sheet Tab State Styles
SpreadJS supports the following sheet tab states:
Type
Comments
normal
Sheet tab is normal state.
hover
Mouse hovers over the sheet tab.
protected
Sheet is protected.
active
Sheet tab has focus.
selected
Sheet tab(s) is in the selection range.
Here is an example of setting the sheet tab state styles:
Here is an example of setting the default sheet tab state styles:
var spreadNS = GC.Spread.Sheets;
window.onload = function () {
const spread = new GC.Spread.Sheets.Workbook(document.getElementById("ss"), { sheetCount: 4, font: '16px Calibri' });
initSpread(spread);
};
function initSpread(spread) {
spread.suspendPaint();
const sheet1 = spread.getSheet(0);
const sheet2 = spread.getSheet(1);
const sheet3 = spread.getSheet(2);
const sheet4 = spread.getSheet(3);
sheet3.options.isProtected = true;
sheet4.options.isProtected = true;
// Set sheet tab state style
spread.sheetTabStyles.add(spreadNS.SheetTabState.normal, {
backColor: 'rgb(223, 181, 139)',
foreColor: 'rgb(68, 68, 68)',
font: '16px Calibri',
}, [sheet1.name()]);
spread.sheetTabStyles.add(spreadNS.SheetTabState.active, {
backColor: 'rgb(239, 218, 198)',
foreColor: 'rgb(68, 68, 68)',
font: 'bold 16px Calibri',
}, [sheet1.name()]);
spread.sheetTabStyles.add(spreadNS.SheetTabState.normal, {
backColor: 'rgb(125, 137, 37)',
foreColor: 'rgb(255, 255, 255)',
font: '16px Calibri',
}, [sheet2.name()]);
spread.sheetTabStyles.add(spreadNS.SheetTabState.active, {
backColor: 'rgb(190, 196, 149)',
foreColor: 'rgb(68, 68, 68)',
font: 'bold 16px Calibri',
}, [sheet2.name()]);
spread.sheetTabStyles.add(spreadNS.SheetTabState.normal, {
backColor: 'rgb(140, 36, 30)',
foreColor: 'rgb(255, 255, 255)',
font: '16px Calibri',
}, [sheet3.name()]);
spread.sheetTabStyles.add(spreadNS.SheetTabState.active, {
backColor: 'rgb(197, 147, 143)',
foreColor: 'rgb(68, 68, 68)',
font: 'bold 16px Calibri',
}, [sheet3.name()]);
spread.sheetTabStyles.add(spreadNS.SheetTabState.normal, {
backColor: 'rgb(243, 157, 0)',
foreColor: 'rgb(68, 68, 68)',
font: '16px Calibri',
}, [sheet4.name()]);
spread.sheetTabStyles.add(spreadNS.SheetTabState.active, {
backColor: 'rgb(249, 206, 140)',
foreColor: 'rgb(68, 68, 68)',
font: 'bold 16px Calibri',
}, [sheet4.name()]);
spread.sheetTabStyles.add(spreadNS.SheetTabState.protected, {
icons: [
{
src: 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAAAXNSR0IArs4c6QAAAStJREFUWEftllFuwjAMhn/TiwSpkQKn4CbQkwAn6XaS7RZESiVyEJindGGqEImc8oA2JS99qJ3/yx/HMuHFi16sjwrw9xwwbbtZEG0Z2ABQsYY+w5ebprPW+pK6KnLAtO2eiA4TgVE4gowwzHyww3CUQogBwsmJ6AOAZ+bODsNNfNSK//sAw0BnnXuTQIgBVlpztHmZstkYo+h6DZDq5Jxob1FQ3PgssXetdc/AjpsmCTp1Rgag9Y6AXgJgbrHCaygDEGz6TwGMUbhc1H3lP6ryUC/S2JCfvYL4tPaS5/QohgD/xfyeA88CrLQ+T7rdXA5/cm6ZSk4CTBrPXOHfvFxPqADVgepAdSDtwM9wETrh02tWI4pj1v0MWArjGTjmxjPRPFCqWhJfAaoD3xM7riFdKnShAAAAAElFTkSuQmCC',
position: GC.Spread.Sheets.IconPosition.right
}
]
}, [sheet4.name()]);
// Set default sheet tab state styles
spread.options.defaultSheetTabStyles = {
[spreadNS.SheetTabState.protected]: {
icons: [{ src: 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAAAXNSR0IArs4c6QAAAStJREFUWEftllFuwjAMhn/TiwSpkQKn4CbQkwAn6XaS7RZESiVyEJindGGqEImc8oA2JS99qJ3/yx/HMuHFi16sjwrw9xwwbbtZEG0Z2ABQsYY+w5ebprPW+pK6KnLAtO2eiA4TgVE4gowwzHyww3CUQogBwsmJ6AOAZ+bODsNNfNSK//sAw0BnnXuTQIgBVlpztHmZstkYo+h6DZDq5Jxob1FQ3PgssXetdc/AjpsmCTp1Rgag9Y6AXgJgbrHCaygDEGz6TwGMUbhc1H3lP6ryUC/S2JCfvYL4tPaS5/QohgD/xfyeA88CrLQ+T7rdXA5/cm6ZSk4CTBrPXOHfvFxPqADVgepAdSDtwM9wETrh02tWI4pj1v0MWArjGTjmxjPRPFCqWhJfAaoD3xM7riFdKnShAAAAAElFTkSuQmCC' }]
}
};
// Description
sheet1.setColumnWidth(0, 500);
sheet1.setRowHeight(0, 50);
sheet1.setRowHeight(1, 50);
sheet1.setRowHeight(2, 50);
sheet1.setRowHeight(3, 50);
sheet1.setDefaultValue(0, 0, 'Set normal state styles and active state styles for the first four sheet tabs.');
sheet1.setDefaultValue(1, 0, 'Set protection state for Sheet3 and Sheet4.');
sheet1.setDefaultValue(2, 0, 'A separate protection state style is set for Sheet4.');
sheet1.setDefaultValue(3, 0, 'The default styles of protected state and active state are set for all sheet tabs.');
const style = new spreadNS.Style();
style.font = '18px Calibri';
style.vAlign = spreadNS.VerticalAlign.center;
sheet1.getRange(-1, 0, -1, 1).setStyle(style);
spread.resumePaint();
};
<!doctype html>
<html style="height:100%;font-size:14px;">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" type="text/css" href="$DEMOROOT$/en/purejs/node_modules/@mescius/spread-sheets/styles/gc.spread.sheets.excel2013white.css">
<script src="$DEMOROOT$/en/purejs/node_modules/@mescius/spread-sheets/dist/gc.spread.sheets.all.min.js" type="text/javascript"></script>
<script src="$DEMOROOT$/spread/source/js/license.js" type="text/javascript"></script>
<script src="app.js" type="text/javascript"></script>
<link rel="stylesheet" type="text/css" href="styles.css">
</head>
<body>
<div class="sample-tutorial">
<div id="ss" style="width:100%; height: 100%"></div>
</div>
</body>
</html>
.sample-tutorial {
position: relative;
height: 100%;
overflow: hidden;
}
body {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
}
