EasyUI 分割面板(SplitPanel)

布局 Layout

源代码

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

@Component({
	selector: 'app-root',
	template: `
		<h2>Split Panel</h2>
		<eui-layout style="width:700px;height:250px;">
			<eui-layout-panel region="west" [bodyStyle]="{padding:'5px'}" style="width:150px;">
				<eui-tree [data]="menuData"></eui-tree>
			</eui-layout-panel>
			<eui-tabs style="height:100%">
				<eui-tab-panel [title]="'Tab1'" [bodyStyle]="{display:'flex',padding:'5px'}">
					<eui-datagrid [data]="gridData" class="f-full">
						<eui-grid-column field="itemid" title="Item ID"></eui-grid-column>
						<eui-grid-column field="name" title="Name"></eui-grid-column>
						<eui-grid-column field="listprice" title="List Price" align="right"></eui-grid-column>
						<eui-grid-column field="unitcost" title="Unit Cost" align="right"></eui-grid-column>
						<eui-grid-column field="attr" title="Attribute" width="30%"></eui-grid-column>
						<eui-grid-column field="status" title="Status" align="center"></eui-grid-column>
					</eui-datagrid>
				</eui-tab-panel>
				<eui-tab-panel [title]="'Tab2'"></eui-tab-panel>
				<eui-tab-panel [title]="'Tab3'"></eui-tab-panel>
			</eui-tabs>
		</eui-layout>
	`
})
export class AppComponent {
	menuData = [
		{text:'Item1',children:[
			{text:'Item11'},
			{text:'Item12',state:'closed',children:[
				{text:'Iteme121'},
				{text:'Iteme122'},
				{text:'Iteme123'}
			]},
			{text:'Item13'},
			{text:'Item14'}
		]},
		{text:'Item2'}
	];
	gridData = [
		{"code":"FI-SW-01","name":"Koi","unitcost":10.00,"status":"P","listprice":36.50,"attr":"Large","itemid":"EST-1"},
		{"code":"K9-DL-01","name":"Dalmation","unitcost":12.00,"status":"P","listprice":18.50,"attr":"Spotted Adult Female","itemid":"EST-10"},
		{"code":"RP-SN-01","name":"Rattlesnake","unitcost":12.00,"status":"P","listprice":38.50,"attr":"Venomless","itemid":"EST-11"},
		{"code":"RP-SN-01","name":"Rattlesnake","unitcost":12.00,"status":"P","listprice":26.50,"attr":"Rattleless","itemid":"EST-12"},
		{"code":"RP-LI-02","name":"Iguana","unitcost":12.00,"status":"P","listprice":35.50,"attr":"Green Adult","itemid":"EST-13"},
		{"code":"FL-DSH-01","name":"Manx","unitcost":12.00,"status":"P","listprice":158.50,"attr":"Tailless","itemid":"EST-14"},
		{"code":"FL-DSH-01","name":"Manx","unitcost":12.00,"status":"P","listprice":83.50,"attr":"With tail","itemid":"EST-15"},
		{"code":"FL-DLH-02","name":"Persian","unitcost":12.00,"status":"P","listprice":23.50,"attr":"Adult Female","itemid":"EST-16"},
		{"code":"FL-DLH-02","name":"Persian","unitcost":12.00,"status":"P","listprice":89.50,"attr":"Adult Male","itemid":"EST-17"},
		{"code":"AV-CB-01","name":"Amazon Parrot","unitcost":92.00,"status":"P","listprice":63.50,"attr":"Adult Male","itemid":"EST-18"}
	];
}

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