样式和CSS

TabPanel控件具有简单的布局,这使得使用CSS轻松设置样式。 例如,默认情况下,标签会显示在内容上方,但您可以使用CSS更改其位置并在内容的左侧或右侧显示下方或垂直堆叠。

您还可以选择在切换选项卡时是否使用动画。

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; }