src/comps/tabs/tab.ts
inputs | title:tabtitle, |
selector | tab |
styles |
.pane {
padding: 1em;
background-color: white;
border-left: 1px solid #dddddd;
border-right: 1px solid #dddddd;
border-bottom: 1px solid #dddddd;
}
|
template |
|
activated
|
$event type: EventEmitter<any>
|
Defined in src/comps/tabs/tab.ts:38
|
constructor(tabs: Tabs)
|
Defined in src/comps/tabs/tab.ts:31
|
_active |
_active: |
Default value : false
|
Defined in src/comps/tabs/tab.ts:41
|
_show |
_show: |
Default value : true
|
Defined in src/comps/tabs/tab.ts:42
|
Static active |
active: |
Defined in src/comps/tabs/tab.ts:50
|
Static show |
show: |
Defined in src/comps/tabs/tab.ts:62
|
Static title |
title: |
Defined in src/comps/tabs/tab.ts:40
|
import {Component, Host, Output, EventEmitter} from '@angular/core';
import {Tabs} from '../tabs/tabs';
@Component({
selector: 'tab',
inputs: [
'title:tabtitle',
'active'
],
styles: [`
.pane {
padding: 1em;
background-color: white;
border-left: 1px solid #dddddd;
border-right: 1px solid #dddddd;
border-bottom: 1px solid #dddddd;
}
`],
template: `
<div [hidden]="!_active" class="pane">
<ng-content></ng-content>
</div>
`
})
/**
Add this Tab as part of it's parents Tabs component
use @Host to make sure we only look for a parent Tabs dependency injector
and don't go any further to prevent lookup of wrong Tabs under misconfiguration
**/
export class Tab {
constructor(@Host() private tabs: Tabs) {
tabs.addTab(this);
}
@Output()
activated: EventEmitter<any> = new EventEmitter<any>();
public title: string;
_active = false;
_show = true;
public set active(value) {
this._active = value || false;
if (this._active)
this.activated.emit(true);
}
public get active() {
return this._active;
}
public set show(value) {
this._show = value;
if (value == false) {
this._active = false
this.tabs.checkActive();
}
}
public get show() {
return this._show;
}
}