【angular5项目积累总结】panel组件

view

code

panel.component.css

:host {
    display:flex;
    min-width:300px
   
}

panel.component.html

<header class="fxs-blade-header fxs-header fxs-blade-border fxs-trim-border fxs-trim fxs-blade-loaded">
    <div class="fxs-blade-title-content">
        <div class="fxs-blade-title">
            <h2 class="fxs-blade-title-titleText msportalfx-tooltip-overflow" tabindex="-1">
                {{headerTitle}}
            </h2>
        </div>
        <div class="fxs-blade-actions" role="menubar" *ngIf="!disableAction">
            <button type="button" role="menuitem" class="fxs-blade-collapser fxs-trim-svg fxs-trim-hover" title="Restore" (click)="minmize()" *ngIf="width=='100%'">
                <svg height="100%" width="100%" aria-hidden="true" role="presentation" focusable="false">
                    <g xmlns="http://www.w3.org/2000/svg">
                        <path d="M 11 5 H 2 v 9 h 9 V 5 Z m -7 7 V 7 h 5 v 5 H 4 Z" />
                        <path d="M 8 6 V 3 h 5 v 5 h -3 v 2 h 5 V 1 H 6 v 5 h 2 Z" />
                    </g>
                </svg>
            </button>
            <button type="button" role="menuitem" class="fxs-blade-pin fxs-trim-svg fxs-trim-hover" title="Maximize" (click)="maximize()" *ngIf="width!='100%'">
                <svg height="100%" width="100%" role="presentation">
                    <g xmlns="http://www.w3.org/2000/svg">
                        <path d="M 1 2 v 12 h 14 V 2 H 1 Z m 2 10 V 6 h 10 v 6 H 3 Z" />
                    </g>
                </svg>
            </button>
            <button type="button" role="menuitem" class="fxs-blade-close fxs-trim-svg" title="关闭" (click)="close()">
                <svg height="100%" width="100%" role="presentation">
                    <g xmlns="http://www.w3.org/2000/svg">
                        <path d="M 14 3.3 L 12.7 2 L 8 6.7 L 3.3 2 L 2 3.3 L 6.7 8 L 2 12.7 L 3.3 14 L 8 9.3 l 4.7 4.7 l 1.3 -1.3 L 9.3 8 Z" />
                    </g>
                </svg>
            </button>
        </div>
    </div>
</header>
<div class="fxs-blade-content-container fxs-portal-text" [ngStyle]="{'height.px':height}">
    <div class="fxs-blade-content-container-default fxs-blade-border fxs-portal-border fxs-bladecontent fxs-mode-locked fxs-blade-locked fx-rightClick fxs-bladestyle-default fxs-bladesize-small">
        <div class="fxs-blade-commandBarContainer" *ngIf="menuItems.length>0">
            <div class="fxs-commandBar-target fxs-portal-border fxs-portal-background fxs-portal-svg fxs-commandBar">
                <ul class="fxs-commandBar-itemList" role="menubar" >
                    <li class="fxs-commandBar-item fxs-portal-border fxs-portal-hover" *ngFor="let item of menuItems" (click)="item.event()" [title]="item.title">
                        <div class="fxs-commandBar-item-buttoncontainer">
                            <div class="fxs-commandBar-item-icon">
                                <svg height="100%" width="100%" role="presentation">
                                    <use xmlns:xlink="http://www.w3.org/1999/xlink" [attr.xlink:href]="item.icon"></use>
                                </svg>
                            </div>
                            <div class="fxs-commandBar-item-text msportalfx-tooltip-overflow" preserveFragment="false">
                                {{item.title}}
                            </div>
                        </div>
                    </li>
                </ul>
            </div>
        </div>
        <ng-content></ng-content>
    </div>
</div>

panel.component.ts

import { Component, Input, Output, EventEmitter } from '@angular/core';

@Component({
    selector: 'panel-component',
    templateUrl: './panel.component.html',
    styleUrls: ['./panel.component.css'],
    host: {
        'class': 'fxs-blade fxs-stacklayout-child fxs-blade-maximized fxs-blade-firstblade',
        '[class.whatever]': "{'fxs-blade-maximized': width=='100%'}",
        '[style.width]': 'width'
    }
})
export class PanelComponent {

    width: string;
    height: string;

    @Input()
    initWidth: string;

    @Input()
    headerTitle: string;

    @Input()
    menuItems: Array<{
        title: string,
        icon: string,
        event: string;
    }> = [];

    @Output()
    closeEvent: EventEmitter<any> = new EventEmitter();

    @Input()
    disableAction: boolean = false;

    constructor() {

    }

    ngOnInit() {
        var self = this;
        this.width = this.initWidth;
        this.height = (document.body.clientHeight - 85) + "";
        window.addEventListener("resize", function () {
            self.height = (document.body.clientHeight - 85) + "";
        });
    }

    maximize() {
        this.width = "100%";
    }

    minmize() {
        this.width = this.initWidth;
    }

    close() {
        this.closeEvent.emit();
    }

}

panel.component.module.ts

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { PanelComponent } from './panel.component';
@NgModule({
    declarations: [
        PanelComponent,
    ],
    imports: [
        CommonModule,
    ],
    exports: [
        PanelComponent
    ]
})
export class PanelComponentModuleModule {
}

示例：

<div class="fxs-journey-target fxs-journey">
    <div class="fxs-journey-layout fxs-stacklayout-horizontal fxs-stacklayout fxs-journey-withspacer">
        <panel-component [menuItems]="menuItems" headerTitle="开发者中心" initWidth="600px" (closeEvent)="close()">
        </panel-component>
    </div>
</div>

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

@Component({
    selector: 'devCenter-page',
    templateUrl: './devCenter.html'
})
export class DevCenterPage {
  constructor(private router: Router) { }

    menuItems: any = [
        { title: "添加", icon: "#FxSymbol0-010", event: null },

    ]

    close() {
        this.router.navigate([''], {});
    }
}