import { Component } from '@angular/core'; @Component({ selector: 'app-root', template: ` <h2>Tab Template</h2> <eui-tabs [headerHeight]="64" style="height:250px"> <eui-tab-panel [title]="'Tab1'"> <ng-template euiHeaderTemplate> <div class="tt-inner"> <img src="https://www.jeasyui.com/demo/main/images/modem.png"> <p>Modem</p> </div> </ng-template> <p>A modem (modulator-demodulator) is a device that modulates an analog carrier signal to encode digital information, and also demodulates such a carrier signal to decode the transmitted information.</p> </eui-tab-panel> <eui-tab-panel [title]="'Tab1'"> <ng-template euiHeaderTemplate> <div class="tt-inner"> <img src="https://www.jeasyui.com/demo/main/images/scanner.png"> <p>Scanner</p> </div> </ng-template> <p>In computing, an image scanner—often abbreviated to just scanner—is a device that optically scans images, printed text, handwriting, or an object, and converts it to a digital image.</p> </eui-tab-panel> <eui-tab-panel [title]="'Tab1'"> <ng-template euiHeaderTemplate> <div class="tt-inner"> <img src="https://www.jeasyui.com/demo/main/images/pda.png"> <p>Pda</p> </div> </ng-template> <p>A personal digital assistant (PDA), also known as a palmtop computer, or personal data assistant, is a mobile device that functions as a personal information manager. PDAs are largely considered obsolete with the widespread adoption of smartphones.</p> </eui-tab-panel> <eui-tab-panel [title]="'Tab1'"> <ng-template euiHeaderTemplate> <div class="tt-inner"> <img src="https://www.jeasyui.com/demo/main/images/tablet.png"> <p>Tablet</p> </div> </ng-template> <p>A tablet computer, or simply tablet, is a one-piece mobile computer. Devices typically have a touchscreen, with finger or stylus gestures replacing the conventional computer mouse.</p> </eui-tab-panel> </eui-tabs> `, styles: [` .tt-inner{ line-height: 12px; padding-top: 5px; width: 80px; }, .tt-inner img{ border: 0; width: 32px; height: 32px; } .tt-inner p{ margin: 0; padding: 0; font-size: 14px; } `] }) export class AppComponent { }
import { NgModule } from '@angular/core'; import { FormsModule } from '@angular/forms'; import { BrowserModule } from '@angular/platform-browser'; import { HttpModule } from '@angular/http'; import { EasyUIModule } from 'easyui/easyui/easyui.module'; import { AppComponent } from './app.component'; @NgModule({ bootstrap: [ AppComponent ], declarations: [ AppComponent ], imports: [ FormsModule, BrowserModule, HttpModule, EasyUIModule ] }) export class AppModule { }
import { enableProdMode } from '@angular/core'; import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'; import { AppModule } from './app.module'; enableProdMode(); platformBrowserDynamic().bootstrapModule(AppModule);