src/content-switcher/content-switcher-option.directive.ts
| Selector | [ibmContentOption] |
Properties |
|
Inputs |
Outputs |
HostBindings |
HostListeners |
Accessors |
active
|
Used to activate the option. Only one option may be
Type : |
name
|
Internal name for the option.
Should be something that identifies the option to the application.
Accessible from the
Default value : |
selected
|
Emits when the option is selected. $event Type: EventEmitter
|
| attr.aria-selected |
attr.aria-selected:
|
Default value : false
|
| attr.role |
attr.role:
|
Default value : "tab"
|
| attr.tabIndex |
attr.tabIndex:
|
Default value : "-1"
|
| class |
class:
|
Default value : "bx--content-switcher-btn"
|
| class.bx--content-switcher--selected |
class.bx--content-switcher--selected:
|
Default value : false
|
| click |
click()
|
| focus |
focus()
|
| Protected _active |
_active:
|
Default value : false
|
| active | ||||||
getactive()
|
||||||
setactive(value: boolean)
|
||||||
|
Used to activate the option. Only one option may be
Parameters :
Returns :
void
|
import {
Directive,
HostBinding,
Input,
HostListener,
Output,
EventEmitter
} from "@angular/core";
@Directive({
selector: "[ibmContentOption]"
})
export class ContentSwitcherOption {
/**
* Used to activate the option. Only one option may be `active` at a time
*/
@Input() set active (value: boolean) {
this._active = value;
this.selectedClass = value;
this.ariaSelected = value;
this.tabindex = value ? "0" : "-1";
}
get active() {
return this._active;
}
/**
* Internal name for the option.
* Should be something that identifies the option to the application.
* Accessible from the `ContentSwitcher` `selected` emitter
*/
@Input() name = "option";
/**
* Emits when the option is selected.
*/
@Output() selected = new EventEmitter();
@HostBinding("class") switcherClass = "bx--content-switcher-btn";
@HostBinding("class.bx--content-switcher--selected") selectedClass = false;
@HostBinding("attr.role") role = "tab";
@HostBinding("attr.aria-selected") ariaSelected = false;
@HostBinding("attr.tabIndex") tabindex = "-1";
protected _active = false;
@HostListener("click")
hostClick() {
this.active = true;
this.selected.emit(true);
}
@HostListener("focus")
onFocus() {
this.active = true;
this.selected.emit(true);
}
}