Web Demo Mobile Demo Angular Demo Vue Demo React Demo
源代码
import { Component } from '@angular/core';
 
@Component({
    selector: 'app-root',
    template: `
        <app-layout [menus]="menus" [title]="'My System'" (itemClick)="onItemClick($event)">
            <div style="padding:20px">    
                <p *ngIf="selectedMenu">{{selectedMenu.text}}</p>
                <p *ngIf="!selectedMenu">Content.</p>
            </div>
        </app-layout>
    `
})
export class AppComponent {
    menus = [{
        text: 'Forms',
        iconCls: 'fa fa-wpforms',
        state: 'open',
        children: [{
            text: 'Form Element'
        },{
            text: 'Wizard'
        },{
            text: 'File Upload'
        }]
    },{
        text: 'Mail',
        iconCls: 'fa fa-at',
        selected: true,
        children: [{
            text: 'Inbox'
        },{
            text: 'Sent'
        },{
            text: 'Trash',
            children: [{
                text: 'Item1'
            },{
                text: 'Item2'
            }]
        }]
    },{
        text: 'Layout',
        iconCls: 'fa fa-table',
        children: [{
            text: 'Panel'
        },{
            text: 'Accordion'
        },{
            text: 'Tabs'
        }]
    }];

    selectedMenu = null;

    onItemClick(item){
        this.selectedMenu = item;
    }
}
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { BrowserModule } from '@angular/platform-browser';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { HttpModule } from '@angular/http';
import { EasyUIModule } from 'easyui/easyui/easyui.module';


import { AppComponent }   from './app.component';
import { AppLayoutComponent } from './app-layout.component';

@NgModule({
  bootstrap: [
    AppComponent
  ],
  declarations: [
    AppComponent,
    AppLayoutComponent
  ],
  imports: [
    FormsModule,
    BrowserModule,
    BrowserAnimationsModule,
    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);