タブパネル:スタイル

TabPanelコントロールはシンプルなレイアウトになっているため、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: '左,右,上,下'.split(','), selectedIndexChanged: function (s, e) { var host = theTabPanel.hostElement; s.itemsSource.forEach(function (pos, index) { var clsName = 'tabs-' + 'Left,Right,Above,Below'.split(',')[index].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: '左,中央,右'.split(','), selectedIndexChanged: function (s, e) { var host = theTabPanel.hostElement, headers = host.querySelector('.wj-tabheaders'); headers.style.textAlign = 'Left,Center,Right'.split(',')[s.selectedIndex]; } }); } <!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>アフリカ</a> <div> <ul> <li>アルジェリア</li> <li>アンゴラ</li> <li>ベニン</li> <li>ボツワナ</li> </ul> </div> </div> <div> <a>アメリカ</a> <div> <ul> <li>カナダ</li> <li>チリ</li> <li>メキシコ</li> <li>アメリカ</li> </ul> </div> </div> <div> <a>アジア</a> <div> <ul> <li>中国</li> <li>韓国</li> <li>インド</li> <li>日本</li> </ul> </div> </div> <div> <a>ヨーロッパ</a> <div> <ul> <li>オーストリア</li> <li>イングランド</li> <li>フランス</li> <li>ドイツ</li> <li>オランダ</li> <li>スイス</li> </ul> </div> </div> <div> <a>オセアニア</a> <div> <ul> <li>オーストラリア</li> <li>フィジー</li> <li>ニュージーランド</li> <li>サモア</li> </ul> </div> </div> </div> <h4> オプション </h4> <div> <label for="tabPosition"> タブの位置 </label> <div id="tabPosition"></div> </div> <div> <label for="tabAlign"> タブの配置 </label> <div id="tabAlign"></div> </div> <div> <label for="isAnimated"> アニメーション表示 </label> <input id="isAnimated" type="checkbox" checked="checked"> </div> <div> <label for="customHeaders"> カスタムヘッダー </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: 10em; 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 = '左,中央,右'.split(','); tabPositions = '左,右,上,下'.split(','); constructor() { } tabAlignChanged(cmbTabAlign: WjComboBox, tabCss: WjTabPanel) { (tabCss.hostElement.querySelector('.wj-tabheaders') as HTMLElement).style.textAlign = 'Left,Center,Right'.split(',')[cmbTabAlign.selectedIndex]; } tabPositionChanged(cmbTabPosition: WjComboBox, tabCss: WjTabPanel) { var host = tabCss.hostElement; cmbTabPosition.itemsSource.forEach(function (pos: string, index: number) { var clsName = 'tabs-' + 'Left,Right,Above,Below'.split(',')[index].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>アフリカ</a> <div> <ul> <li>アルジェリア</li> <li>アンゴラ</li> <li>ベニン</li> <li>ボツワナ</li> </ul> </div> </wj-tab> <wj-tab> <a>アメリカ</a> <div> <ul> <li>カナダ</li> <li>チリ</li> <li>メキシコ</li> <li>アメリカ</li> </ul> </div> </wj-tab> <wj-tab> <a>アジア</a> <div> <ul> <li>中国</li> <li>韓国</li> <li>インド</li> <li>日本</li> </ul> </div> </wj-tab> <wj-tab> <a>ヨーロッパ</a> <div> <ul> <li>オーストリア</li> <li>イングランド</li> <li>フランス</li> <li>ドイツ</li> <li>オランダ</li> <li>スイス</li> </ul> </div> </wj-tab> <wj-tab> <a>オセアニア</a> <div> <ul> <li>オーストラリア</li> <li>フィジー</li> <li>ニュージーランド</li> <li>サモア</li> </ul> </div> </wj-tab> </wj-tab-panel> <h4> オプション </h4> <div> <label for="tabPosition"> タブの位置 </label> <wj-combo-box #cmbTabPosition [itemsSource]="tabPositions" [selectedIndex]="2" (selectedIndexChanged)="tabPositionChanged(cmbTabPosition, tabCss)"> </wj-combo-box> </div> <div> <label for="tabAlign"> タブの配置 </label> <wj-combo-box #cmbTabAlign [itemsSource]="tabAligns" (selectedIndexChanged)="tabAlignChanged(cmbTabAlign, tabCss)"> </wj-combo-box> </div> <div> <label for="isAnimated"> アニメーション表示 </label> <input id="isAnimated" type="checkbox" checked="checked" [(ngModel)]="isAnimated" /> </div> <div> <label for="customHeaders"> カスタムヘッダー </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: 10em; text-align: right; margin-right: 6px; } body { margin-bottom: 48pt; }