EasyUI 自定义手风琴(Custom Accordion)

折叠面板 Accordion

源代码

import { Component } from '@angular/core';

@Component({
	selector: 'app-root',
	template: `
		<h2>Custom Accordion</h2>
		<eui-accordion style="height:250px">
			<eui-accordion-panel iconCls="icon-man" headerCls="hd">
				<eui-panel-header>
					<div class="panel-title panel-with-icon">Friends</div>
					<div class="right">
						<span class="count">124</span>
					</div>
				</eui-panel-header>
				<eui-tree [data]="treeData"></eui-tree>
			</eui-accordion-panel>
			<eui-accordion-panel iconCls="icon-help" bodyCls="f-row">
				<eui-panel-header>
					<div class="panel-title panel-with-icon">Helps</div>
					<div class="right">
						<span class="count">1,024</span>
					</div>
				</eui-panel-header>
				<eui-tabs class="f-full" [border]="false">
					<eui-tab-panel [title]="'Java'">
						<p>Java (Indonesian: Jawa) is an island of Indonesia. With a population of 135 million (excluding the 3.6 million on the island of Madura which is administered as part of the provinces of Java), Java is the world's most populous island, and one of the most densely populated places in the world.</p>
					</eui-tab-panel>
					<eui-tab-panel [title]="'C#'">
						<p>C# is a multi-paradigm programming language encompassing strong typing, imperative, declarative, functional, generic, object-oriented (class-based), and component-oriented programming disciplines.</p>
					</eui-tab-panel>
					<eui-tab-panel [title]="'Ruby'">
						<p>A dynamic, reflective, general-purpose object-oriented programming language.</p>
					</eui-tab-panel>
					<eui-tab-panel [title]="'Fortran'">
						<p>Fortran (previously FORTRAN) is a general-purpose, imperative programming language that is especially suited to numeric computation and scientific computing.</p>
					</eui-tab-panel>
				</eui-tabs>
			</eui-accordion-panel>
			<eui-accordion-panel [title]="'Printers'" iconCls="icon-print">
				<p>Printers Content</p>
			</eui-accordion-panel>
		</eui-accordion>
	`,
	styles: [`
		.right{
			position: absolute;
			right: 24px;
			height: 30px;
			top: 5px;
		}
		.count{
			display: inline-block;
			border-radius: 6px;
			background: #666;
			color: #fff;
			padding: 0 6px;
			font-size: 12px;
			line-height: 16px;
			height: 16px;
		}
	`]
})
export class AppComponent {
	treeData: any[] = [{
		"id":1,
		"text":"My Documents",
		"children":[{
			"id":11,
			"text":"Photos",
			"children":[{
				"id":111,
				"text":"Friend"
			},{
				"id":112,
				"text":"Wife"
			},{
				"id":113,
				"text":"Company"
			}]
		},{
			"id":12,
			"text":"Program Files",
			"state":"closed",
			"children":[{
				"id":121,
				"text":"Intel"
			},{
				"id":122,
				"text":"Java"
			},{
				"id":123,
				"text":"Microsoft Office"
			},{
				"id":124,
				"text":"Games"
			}]
		},{
			"id":13,
			"text":"index.html"
		},{
			"id":14,
			"text":"about.html"
		},{
			"id":15,
			"text":"welcome.html"
		}]
	}];
	
}

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