src/tabs/tab-header.directive.ts
AfterViewInit
| Selector | [cdsTabHeader], [ibmTabHeader] |
Properties |
|
Methods |
Inputs |
Outputs |
HostBindings |
HostListeners |
Accessors |
constructor(host: ElementRef)
|
||||||
|
Defined in src/tabs/tab-header.directive.ts:78
|
||||||
|
Parameters :
|
| active | |
Type : boolean
|
|
Default value : false
|
|
|
Defined in src/tabs/tab-header.directive.ts:54
|
|
|
Indicates whether the |
|
| cacheActive | |
Type : boolean
|
|
|
Defined in src/tabs/tab-header.directive.ts:32
|
|
|
Set to 'true' to have pane reference cached and not reloaded on tab switching. |
|
| disabled | |
Type : boolean
|
|
Default value : false
|
|
|
Defined in src/tabs/tab-header.directive.ts:58
|
|
|
Indicates whether or not the |
|
| paneReference | |
Type : Tab
|
|
|
Defined in src/tabs/tab-header.directive.ts:69
|
|
|
Reference to the corresponsing tab pane. |
|
| paneTabIndex | |
Type : number | null
|
|
|
Defined in src/tabs/tab-header.directive.ts:41
|
|
| title | |
Type : any
|
|
|
Defined in src/tabs/tab-header.directive.ts:70
|
|
| selected | |
Type : EventEmitter
|
|
|
Defined in src/tabs/tab-header.directive.ts:76
|
|
|
Value 'selected' to be emitted after a new |
|
| attr.aria-disabled |
Type : boolean
|
Default value : this.disabled
|
|
Defined in src/tabs/tab-header.directive.ts:62
|
| attr.aria-selected |
Type : boolean
|
Default value : this.active
|
|
Defined in src/tabs/tab-header.directive.ts:61
|
| attr.tabIndex |
Type : 0 | -1
|
|
Defined in src/tabs/tab-header.directive.ts:18
|
| attr.type |
Type : string
|
Default value : "button"
|
|
Defined in src/tabs/tab-header.directive.ts:60
|
| class.cds--tabs__nav-item |
Type : boolean
|
Default value : true
|
|
Defined in src/tabs/tab-header.directive.ts:63
|
| class.cds--tabs__nav-item--disabled |
Type : boolean
|
|
Defined in src/tabs/tab-header.directive.ts:26
|
| class.cds--tabs__nav-item--selected |
Type : boolean
|
|
Defined in src/tabs/tab-header.directive.ts:22
|
| class.cds--tabs__nav-link |
Type : boolean
|
Default value : true
|
|
Defined in src/tabs/tab-header.directive.ts:64
|
| click |
|
Defined in src/tabs/tab-header.directive.ts:83
|
| focus |
focus()
|
|
Defined in src/tabs/tab-header.directive.ts:104
|
|
Returns :
void
|
| ngAfterViewInit |
ngAfterViewInit()
|
|
Defined in src/tabs/tab-header.directive.ts:87
|
|
Returns :
void
|
| onClick |
onClick()
|
Decorators :
@HostListener('click')
|
|
Defined in src/tabs/tab-header.directive.ts:83
|
|
Returns :
void
|
| selectTab |
selectTab()
|
|
Defined in src/tabs/tab-header.directive.ts:93
|
|
Returns :
void
|
| Protected _cacheActive |
Default value : false
|
|
Defined in src/tabs/tab-header.directive.ts:78
|
| ariaDisabled |
Default value : this.disabled
|
Decorators :
@HostBinding('attr.aria-disabled')
|
|
Defined in src/tabs/tab-header.directive.ts:62
|
| ariaSelected |
Default value : this.active
|
Decorators :
@HostBinding('attr.aria-selected')
|
|
Defined in src/tabs/tab-header.directive.ts:61
|
| navItem |
Default value : true
|
Decorators :
@HostBinding('class.cds--tabs__nav-item')
|
|
Defined in src/tabs/tab-header.directive.ts:63
|
| navLink |
Default value : true
|
Decorators :
@HostBinding('class.cds--tabs__nav-link')
|
|
Defined in src/tabs/tab-header.directive.ts:64
|
| type |
Type : string
|
Default value : "button"
|
Decorators :
@HostBinding('attr.type')
|
|
Defined in src/tabs/tab-header.directive.ts:60
|
| tabIndex |
gettabIndex()
|
|
Defined in src/tabs/tab-header.directive.ts:18
|
| isSelected |
getisSelected()
|
|
Defined in src/tabs/tab-header.directive.ts:22
|
| isDisabled |
getisDisabled()
|
|
Defined in src/tabs/tab-header.directive.ts:26
|
| cacheActive | ||||||
getcacheActive()
|
||||||
|
Defined in src/tabs/tab-header.directive.ts:47
|
||||||
setcacheActive(shouldCache: boolean)
|
||||||
|
Defined in src/tabs/tab-header.directive.ts:32
|
||||||
|
Set to 'true' to have pane reference cached and not reloaded on tab switching.
Parameters :
Returns :
void
|
| paneTabIndex | ||||||
setpaneTabIndex(tabIndex: number | null)
|
||||||
|
Defined in src/tabs/tab-header.directive.ts:41
|
||||||
|
Parameters :
Returns :
void
|
import {
Directive,
Input,
ElementRef,
EventEmitter,
Output,
AfterViewInit,
HostBinding,
HostListener
} from "@angular/core";
import { Tab } from "./tab.component";
@Directive({
selector: "[cdsTabHeader], [ibmTabHeader]"
})
export class TabHeader implements AfterViewInit {
@HostBinding("attr.tabIndex") get tabIndex() {
return this.active ? 0 : -1;
}
@HostBinding("class.cds--tabs__nav-item--selected") get isSelected() {
return this.active;
}
@HostBinding("class.cds--tabs__nav-item--disabled") get isDisabled() {
return this.disabled;
}
/**
* Set to 'true' to have pane reference cached and not reloaded on tab switching.
*/
@Input() set cacheActive(shouldCache: boolean) {
this._cacheActive = shouldCache;
// Updates the pane references associated with the tab header when cache active is changed.
if (this.paneReference) {
this.paneReference.cacheActive = this.cacheActive;
}
}
@Input() set paneTabIndex(tabIndex: number | null) {
if (this.paneReference) {
this.paneReference.tabIndex = tabIndex;
}
}
get cacheActive() {
return this._cacheActive;
}
/**
* Indicates whether the `Tab` is active/selected.
* Determines whether it's `TabPanel` is rendered.
*/
@Input() active = false;
/**
* Indicates whether or not the `Tab` item is disabled.
*/
@Input() disabled = false;
@HostBinding("attr.type") type = "button";
@HostBinding("attr.aria-selected") ariaSelected = this.active;
@HostBinding("attr.aria-disabled") ariaDisabled = this.disabled;
@HostBinding("class.cds--tabs__nav-item") navItem = true;
@HostBinding("class.cds--tabs__nav-link") navLink = true;
/**
* Reference to the corresponsing tab pane.
*/
@Input() paneReference: Tab;
@HostBinding("attr.title") @Input() title;
/**
* Value 'selected' to be emitted after a new `Tab` is selected.
*/
@Output() selected = new EventEmitter<any>();
protected _cacheActive = false;
constructor(private host: ElementRef) {}
@HostListener("click")
onClick() {
this.selectTab();
}
ngAfterViewInit() {
setTimeout(() => {
this.title = this.title ? this.title : this.host.nativeElement.textContent;
});
}
selectTab() {
this.focus();
if (!this.disabled) {
this.selected.emit();
this.active = true;
if (this.paneReference) {
this.paneReference.active = true;
}
}
}
focus() {
this.host.nativeElement.focus();
}
}