Disabled and Invisible Tabs

You can disable or hide individual tabs using the Tab's isDisabled and isVisible properties. Invisible and disabled tabs cannot be selected by the user. This sample demonstrates disabling tabs and showing and hiding tabs.

import 'bootstrap.css'; import '@grapecity/wijmo.styles/wijmo.css'; import './styles.css'; import * as wjNav from '@grapecity/wijmo.nav'; // document.readyState === 'complete' ? init() : window.onload = init; // function init() { var theTabPanel = new wjNav.TabPanel('#theTabPanel'); // toggle Europe's disabled state document.getElementById('disableEurope').addEventListener('click', function (e) { theTabPanel.getTab('tab-europe').isDisabled = e.target.checked; }); // toggle Oceania's visibility document.getElementById('showOceania').addEventListener('click', function (e) { theTabPanel.getTab('tab-oceania').isVisible = e.target.checked; }); } <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title>GrapeCity Wijmo TabPanel Disabled and Invisible Tabs</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"> <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 id="tab-europe" class="wj-state-disabled">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 id="tab-oceania">Oceania</a> <div> <ul> <li>Australia</li> <li>Fiji</li> <li>New Zealand</li> <li>Samoa</li> </ul> </div> </div> </div> <div> <label for="disableEurope"> Disable Europe </label> <input id="disableEurope" type="checkbox" checked> </div> <div> <label for="showOceania"> Show Oceania </label> <input id="showOceania" type="checkbox" checked> </div> </div> </body> </html> .wj-tabpane { padding: 12px; } 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 { 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 } from '@grapecity/wijmo.angular2.nav'; // @Component({ selector: 'app-component', templateUrl: 'src/app.component.html' }) export class AppComponent { isDisabled = true; isVisible = true // constructor() { } } // @NgModule({ imports: [WjNavModule, 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 Disabled and Invisible Tabs</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 #tabDisableHide> <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 [isDisabled]="isDisabled"> <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 [isVisible]="isVisible"> <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> <div> <label for="disableEurope"> Disable Europe </label> <input id="disableEurope" type="checkbox" [(ngModel)]="isDisabled"> </div> <div> <label for="showOceania"> Show Oceania </label> <input id="showOceania" type="checkbox" [(ngModel)]="isVisible"> </div> </div> .wj-tabpane { padding: 12px; } body { margin-bottom: 48pt; }