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; } import 'bootstrap.css'; import '@grapecity/wijmo.styles/wijmo.css'; import './styles.css'; import wjCore from '@grapecity/wijmo'; // import { Component, enableProdMode, NgModule } from '@angular/core'; import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'; import { BrowserModule } from '@angular/platform-browser'; import { FormsModule } from '@angular/forms'; import { WjNavModule, WjTabPanel } from '@grapecity/wijmo.angular2.nav'; import { WjInputModule, WjComboBox } from '@grapecity/wijmo.angular2.input'; // @Component({ selector: 'app-component', templateUrl: 'src/app.component.html' }) export class AppComponent { // isAnimated = true; tabAligns = 'Left,Center,Right'.split(','); tabPositions = 'Left,Right,Above,Below'.split(','); constructor() { } tabAlignChanged(cmbTabAlign: WjComboBox, tabCss: WjTabPanel) { (tabCss.hostElement.querySelector('.wj-tabheaders') as HTMLElement).style.textAlign = cmbTabAlign.text; } tabPositionChanged(cmbTabPosition: WjComboBox, tabCss: WjTabPanel) { var host = tabCss.hostElement; cmbTabPosition.itemsSource.forEach(function (pos: string, index: number) { var clsName = 'tabs-' + pos.toLowerCase(); wjCore.toggleClass(host, clsName, index == cmbTabPosition.selectedIndex); }); } customHeaders(e: MouseEvent, tabCss: WjTabPanel) { wjCore.toggleClass(tabCss.hostElement, 'custom-headers', (e.target as HTMLInputElement).checked); } } // @NgModule({ imports: [WjNavModule, WjInputModule, FormsModule, BrowserModule], declarations: [AppComponent], providers: [], bootstrap: [AppComponent] }) export class AppModule { } // enableProdMode(); // Bootstrap application with hash style navigation and global services. platformBrowserDynamic().bootstrapModule(AppModule); <!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"> <!-- Polyfills --> <script src="node_modules/core-js/client/shim.min.js"></script> <script src="node_modules/zone.js/dist/zone.min.js"></script> <!-- SystemJS --> <script src="node_modules/systemjs/dist/system.js"></script> <script src="systemjs.config.js"></script> <script> // workaround to load 'rxjs/operators' from the rxjs bundle System.import('rxjs').then(function (m) { System.set(SystemJS.resolveSync('rxjs/operators'), System.newModule(m.operators)); System.import('./src/app.component'); }); </script> </head> <body> <app-component></app-component> </body> </html> <div class="container-fluid"> <wj-tab-panel #tabCss class="custom-tab" [(isAnimated)]="isAnimated"> <wj-tab> <a>Africa</a> <div> <ul> <li>Algeria</li> <li>Angola</li> <li>Benin</li> <li>Botswana</li> </ul> </div> </wj-tab> <wj-tab> <a>America</a> <div> <ul> <li>Canada</li> <li>Chile</li> <li>Mexico</li> <li>United States</li> </ul> </div> </wj-tab> <wj-tab> <a>Asia</a> <div> <ul> <li>China</li> <li>Korea</li> <li>India</li> <li>Japan</li> </ul> </div> </wj-tab> <wj-tab> <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> </wj-tab> <wj-tab> <a>Oceania</a> <div> <ul> <li>Australia</li> <li>Fiji</li> <li>New Zealand</li> <li>Samoa</li> </ul> </div> </wj-tab> </wj-tab-panel> <h4> Options </h4> <div> <label for="tabPosition"> Tab Position </label> <wj-combo-box #cmbTabPosition [itemsSource]="tabPositions" [selectedIndex]="2" (selectedIndexChanged)="tabPositionChanged(cmbTabPosition, tabCss)"> </wj-combo-box> </div> <div> <label for="tabAlign"> Tab Alignment </label> <wj-combo-box #cmbTabAlign [itemsSource]="tabAligns" (selectedIndexChanged)="tabAlignChanged(cmbTabAlign, tabCss)"> </wj-combo-box> </div> <div> <label for="isAnimated"> isAnimated </label> <input id="isAnimated" type="checkbox" checked="checked" [(ngModel)]="isAnimated" /> </div> <div> <label for="customHeaders"> Custom Headers </label> <input id="customHeaders" type="checkbox" (click)="customHeaders($event, tabCss)" /> </div> </div> .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; }