Styling and CSS

The TabPanel control has a simple layout, which makes it easy to style using CSS. This example lets you change the position and alignment of the tabs. Try changing the settings below to see the result.

import 'bootstrap.css'; import '@grapecity/wijmo.styles/wijmo.css'; import './styles.css'; import * as wjCore from '@grapecity/wijmo'; import * as wjNav from '@grapecity/wijmo.nav'; import * as wjInput from '@grapecity/wijmo.input'; // document.readyState === 'complete' ? init() : window.onload = init; // function init() { var theTabPanel = new wjNav.TabPanel('#theTabPanel'); // change tab position var tabPosition = new wjInput.ComboBox('#tabPosition', { itemsSource: 'Left,Right,Above,Below'.split(','), selectedIndexChanged: function (s, e) { var host = theTabPanel.hostElement; s.itemsSource.forEach(function (pos, index) { var clsName = 'tabs-' + pos.toLowerCase(); wjCore.toggleClass(host, clsName, index == s.selectedIndex); }); }, selectedIndex: 2, }); // toggle animation document.getElementById('isAnimated').addEventListener('click', function (e) { theTabPanel.isAnimated = e.target.checked; }); // toggle custom headers document.getElementById('customHeaders').addEventListener('click', function (e) { wjCore.toggleClass(theTabPanel.hostElement, 'custom-headers', e.target.checked); }); // change tab alignment var tabAlign = new wjInput.ComboBox('#tabAlign', { itemsSource: 'Left,Center,Right'.split(','), selectedIndexChanged: function (s, e) { var host = theTabPanel.hostElement, headers = host.querySelector('.wj-tabheaders'); headers.style.textAlign = s.text; } }); }
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title>GrapeCity Wijmo TabPanel Styling</title> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <!-- SystemJS --> <script src="node_modules/systemjs/dist/system.src.js"></script> <script src="systemjs.config.js"></script> <script> System.import('./src/app'); </script> </head> <body> <div class="container-fluid"> <div id="theTabPanel" class="custom-tab"> <div> <a>Africa</a> <div> <ul> <li>Algeria</li> <li>Angola</li> <li>Benin</li> <li>Botswana</li> </ul> </div> </div> <div> <a>America</a> <div> <ul> <li>Canada</li> <li>Chile</li> <li>Mexico</li> <li>United States</li> </ul> </div> </div> <div> <a>Asia</a> <div> <ul> <li>China</li> <li>Korea</li> <li>India</li> <li>Japan</li> </ul> </div> </div> <div> <a>Europe</a> <div> <ul> <li>Austria</li> <li>England</li> <li>France</li> <li>Germany</li> <li>Netherlands</li> <li>Switzerland</li> </ul> </div> </div> <div> <a>Oceania</a> <div> <ul> <li>Australia</li> <li>Fiji</li> <li>New Zealand</li> <li>Samoa</li> </ul> </div> </div> </div> <h4> Options </h4> <div> <label for="tabPosition"> Tab Position </label> <div id="tabPosition"></div> </div> <div> <label for="tabAlign"> Tab Alignment </label> <div id="tabAlign"></div> </div> <div> <label for="isAnimated"> isAnimated </label> <input id="isAnimated" type="checkbox" checked="checked"> </div> <div> <label for="customHeaders"> Custom Headers </label> <input id="customHeaders" type="checkbox"> </div> </div> </body> </html>
.wj-tabpanel { padding: 0 12px; } .wj-tabpane { padding: 12px; } .wj-tabheader:hover { outline: 2px solid rgba(90, 160, 215, .5); } /* custom-headers */ .wj-tabpanel.custom-headers .wj-tabpanes { border: none; } .wj-tabpanel.custom-headers > div > .wj-tabheaders { background: black; color: white; border: none; } .wj-tabpanel.custom-headers .wj-tabheaders .wj-tabheader.wj-state-active { background: white; color: black; } .wj-tabpanel.custom-headers .wj-tabheaders .wj-tabheader:not(.wj-state-active) { font-weight: normal; } .wj-tabpanel.custom-headers .wj-tabheaders .wj-tabheader.wj-state-active:after { display: none; /* hide underline */ } /* tabs on the left */ .wj-tabpanel.tabs-left > div { display: flex; align-items: center; } .wj-tabpanel.tabs-left .wj-tabheaders { display: flex; flex-direction: column; min-width: 8em; border-right: 1px solid #ddd; } .wj-tabpanel.tabs-left .wj-tabheaders .wj-tabheader { text-align: right; } .wj-tabpanel.tabs-left .wj-tabpanes { display: flex; flex-grow: 1; border-top: none; overflow-x: hidden; } /* tabs on the right */ .wj-tabpanel.tabs-right > div { display: flex; align-items: center; } .wj-tabpanel.tabs-right .wj-tabheaders { display: flex; flex-direction: column; min-width: 8em; border-left: 1px solid #ddd; order: 1; } .wj-tabpanel.tabs-right .wj-tabheaders .wj-tabheader { text-align: left; } .wj-tabpanel.tabs-right .wj-tabpanes { display: flex; flex-grow: 1; border-top: none; overflow-x: hidden; order: 0; } /* tabs below */ .wj-tabpanel.tabs-below > div { display: flex; flex-direction: column; align-items: stretch; } .wj-tabpanel.tabs-below .wj-tabheaders { order: 1; /* headers after panes */ } .wj-tabpanel.tabs-below .wj-tabpanes { order: 0; } .wj-tabpanel.tabs-below .wj-tabheaders .wj-tabheader.wj-state-active:after { top: 0; bottom: unset; } label { width: 8em; text-align: right; margin-right: 6px; } body { margin-bottom: 48pt; }
(function (global) { System.config({ transpiler: 'plugin-babel', babelOptions: { es2015: true }, meta: { '*.css': { loader: 'css' } }, paths: { // paths serve as alias 'npm:': 'node_modules/' }, // map tells the System loader where to look for things map: { 'jszip': 'npm:jszip/dist/jszip.js', '@grapecity/wijmo': 'npm:@grapecity/wijmo/index.js', '@grapecity/wijmo.input': 'npm:@grapecity/wijmo.input/index.js', '@grapecity/wijmo.styles': 'npm:@grapecity/wijmo.styles', '@grapecity/wijmo.cultures': 'npm:@grapecity/wijmo.cultures', '@grapecity/wijmo.chart': 'npm:@grapecity/wijmo.chart/index.js', '@grapecity/wijmo.chart.analytics': 'npm:@grapecity/wijmo.chart.analytics/index.js', '@grapecity/wijmo.chart.animation': 'npm:@grapecity/wijmo.chart.animation/index.js', '@grapecity/wijmo.chart.annotation': 'npm:@grapecity/wijmo.chart.annotation/index.js', '@grapecity/wijmo.chart.finance': 'npm:@grapecity/wijmo.chart.finance/index.js', '@grapecity/wijmo.chart.finance.analytics': 'npm:@grapecity/wijmo.chart.finance.analytics/index.js', '@grapecity/wijmo.chart.hierarchical': 'npm:@grapecity/wijmo.chart.hierarchical/index.js', '@grapecity/wijmo.chart.interaction': 'npm:@grapecity/wijmo.chart.interaction/index.js', '@grapecity/wijmo.chart.radar': 'npm:@grapecity/wijmo.chart.radar/index.js', '@grapecity/wijmo.chart.render': 'npm:@grapecity/wijmo.chart.render/index.js', '@grapecity/wijmo.chart.webgl': 'npm:@grapecity/wijmo.chart.webgl/index.js', '@grapecity/wijmo.gauge': 'npm:@grapecity/wijmo.gauge/index.js', '@grapecity/wijmo.grid': 'npm:@grapecity/wijmo.grid/index.js', '@grapecity/wijmo.grid.detail': 'npm:@grapecity/wijmo.grid.detail/index.js', '@grapecity/wijmo.grid.filter': 'npm:@grapecity/wijmo.grid.filter/index.js', '@grapecity/wijmo.grid.search': 'npm:@grapecity/wijmo.grid.search/index.js', '@grapecity/wijmo.grid.grouppanel': 'npm:@grapecity/wijmo.grid.grouppanel/index.js', '@grapecity/wijmo.grid.multirow': 'npm:@grapecity/wijmo.grid.multirow/index.js', '@grapecity/wijmo.grid.transposed': 'npm:@grapecity/wijmo.grid.transposed/index.js', '@grapecity/wijmo.grid.pdf': 'npm:@grapecity/wijmo.grid.pdf/index.js', '@grapecity/wijmo.grid.sheet': 'npm:@grapecity/wijmo.grid.sheet/index.js', '@grapecity/wijmo.grid.xlsx': 'npm:@grapecity/wijmo.grid.xlsx/index.js', '@grapecity/wijmo.grid.selector': 'npm:@grapecity/wijmo.grid.selector/index.js', '@grapecity/wijmo.grid.cellmaker': 'npm:@grapecity/wijmo.grid.cellmaker/index.js', '@grapecity/wijmo.nav': 'npm:@grapecity/wijmo.nav/index.js', '@grapecity/wijmo.odata': 'npm:@grapecity/wijmo.odata/index.js', '@grapecity/wijmo.olap': 'npm:@grapecity/wijmo.olap/index.js', '@grapecity/wijmo.pdf': 'npm:@grapecity/wijmo.pdf/index.js', '@grapecity/wijmo.viewer': 'npm:@grapecity/wijmo.viewer/index.js', '@grapecity/wijmo.xlsx': 'npm:@grapecity/wijmo.xlsx/index.js', '@grapecity/wijmo.undo': 'npm:@grapecity/wijmo.undo/index.js', '@grapecity/wijmo.interop.grid': 'npm:@grapecity/wijmo.interop.grid/index.js', '@grapecity/wijmo.touch': 'npm:@grapecity/wijmo.touch/index.js', '@grapecity/wijmo.cloud': 'npm:@grapecity/wijmo.cloud/index.js', 'jszip': 'npm:jszip/dist/jszip.js', 'bootstrap.css': 'npm:bootstrap/dist/css/bootstrap.min.css', 'css': 'npm:systemjs-plugin-css/css.js', 'plugin-babel': 'npm:systemjs-plugin-babel/plugin-babel.js', 'systemjs-babel-build':'npm:systemjs-plugin-babel/systemjs-babel-browser.js' }, // packages tells the System loader how to load when no filename and/or no extension packages: { src: { defaultExtension: 'js' }, "node_modules": { defaultExtension: 'js' }, } }); })(this);