EasyUI 手风琴风格(Accordion Style)

折叠面板 Accordion

源代码

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

@Component({
	selector: 'app-root',
	template: `
		<h2>Accordion Style</h2>
		<eui-accordion class="a1" [animate]="true">
			<eui-accordion-panel *ngFor="let menu of menus" [title]="menu.text" iconCls="fa fa-{{menu.iconCls}}">
				<div style="padding: 5px">
					<a class="item" href="#" *ngFor="let item of menu.submenus">{{item}}</a>
				</div>
			</eui-accordion-panel>
		</eui-accordion>
	`,
	encapsulation: ViewEncapsulation.None,
	styles: [`
		.a1 .accordion .accordion-header{
			border-bottom-color: transparent;
			background: #f3f5f6;
			color: #768399;
		}
		.a1 .accordion .accordion-body{
			border-bottom-color: transparent;
			background: #fcfcfd;
			color: #768399;
		}
		.a1 .accordion .accordion-header .panel-title{
			color: #768399;
			height: 30px;
			line-height: 30px;
			padding-left: 20px;
		}
		.a1 .accordion .accordion-header-selected,
		.a1 .accordion .accordion-header:hover{
			color: #768399;
			background: #eaeeef;
		}
		.a1 .item{
			text-decoration: none;
			display: block;
			color: #616161;
			padding: 7px 0 7px 20px;
		}
		.a1 .item:hover{
			color: #428bca;
		}
	`,`
		@import '//netdna.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css'
	`]
})
export class AppComponent {
	menus = [{
		text: 'Forms',
		iconCls: 'wpforms',
		submenus: ['Form Element','Wizard','File Upload']
	},{
		text: 'Mail',
		iconCls: 'at',
		submenus: ['Inbox','Sent','Trash']
	},{
		text: 'Layout',
		iconCls: 'table',
		submenus: ['Panel','Accordion','Tabs']
	}]
}

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