Web Demo Mobile Demo Angular Demo Vue Demo React Demo
源代码
import { Component } from '@angular/core';

@Component({
	selector: 'app-root',
	template: `
		<h2>Dynamic Accordion</h2>
		<div style="margin-bottom:10px">
			<eui-linkbutton iconCls="icon-add" (click)="add()">Add</eui-linkbutton>
			<eui-linkbutton iconCls="icon-remove" (click)="remove(a.getSelectedIndex())">Remove</eui-linkbutton>
		</div>
		<eui-accordion #a [selectedIndex]="selectedIndex" style="height:250px">
			<eui-accordion-panel *ngFor="let p of panels" [title]="p.title">
				<p>{{p.content}}</p>
			</eui-accordion-panel>
		</eui-accordion>
	`
})
export class AppComponent {
	panelIndex: number = 4;
	selectedIndex: number = 0;
	panels = [
		{title:'Title1', content: 'Content1'},
		{title:'Title2', content: 'Content2'},
		{title:'Title3', content: 'Content3'}
	];

	add() {
		if (this.panels.length >= 6){
			return;
		}
		this.panels.push({
			title: 'Title' + this.panelIndex,
			content: 'Content' + this.panelIndex
		});
		setTimeout(() => {
			this.selectedIndex = this.panels.length - 1;
			this.panelIndex ++;
		});
	}

	remove(index: number) {
		this.panels.splice(index, 1);
		this.selectedIndex = 0;
	}

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

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