角2中的自定義sidenav

Question

我想創建角2中的自定義sidenav（不使用角材設計）。這個怎麼做？ 有沒有什麼辦法來定義CSS指令。使用指令是否是一個好理想？

@Directive({ 
    selector: 'may-cover' 
}) 

export class MayCover { 
    constructor(
     private elRef: ElementRef, 
     private renderer: Renderer 
    ) { 
     this.renderer.setElementStyle(this.elementRef, 'height', '100%'); 
     this.renderer.setElementStyle(this.elementRef, 'width', '100%'); 
     this.renderer.setElementStyle(this.elementRef, 'transition', '0.5s'); 
    } 

    open() { 
     this.renderer.setElementStyle(this.elementRef, 'margin-top', '0%'); 
    } 

    close() { 
     this.renderer.setElementStyle(this.elementRef, 'margin-top', '-100%'); 
    } 
} 

由於

<may-cover #sidenav>...</may-cover> 

我不想使用div。它看起來像一團糟！

Answer 1

這更像是一個會做，在Angular2

@Directive({ 
    selector: 'may-cover', 
    host: { 
     '[style.height.%]': '100', 
     '[style.width.%]': '100', 
     '[style.transition.s]': '0.5', 
    } 
}) 
export class MayCover { 

    @HostBinding('style.margin-top.%') 
    marginTop:number; 

    open() { 
    this.marginTop = 0; 
    } 

    close() { 
    this.marginTop = 100; 
    } 
} 

或

@Directive({ 
    selector: 'may-cover', 
    styles: [` 
     :host { 
     height: 100%; 
     width: 100%; 
     transition:0.5s; 
     }`], 
    } 
}) 
export class MayCover { 

    @HostBinding('style.margin-top.%') 
    marginTop:number; 

    open() { 
    this.marginTop = 0; 
    } 

    close() { 
    this.marginTop = 100; 
    } 
} 

Plunker example