src/tag/tag-operational.component.ts
| changeDetection | ChangeDetectionStrategy.OnPush |
| selector | cds-tag-operational, ibm-tag-operational |
| template | |
Properties |
Inputs |
HostBindings |
Accessors |
| disabled | |
Type : boolean
|
|
Default value : false
|
|
|
Defined in src/tag/tag-operational.component.ts:26
|
|
| class | |
Type : string
|
|
Default value : ""
|
|
|
Inherited from
Tag
|
|
|
Defined in
Tag:54
|
|
| size | |
Type : "sm" | "md" | "lg"
|
|
Default value : "md"
|
|
|
Inherited from
Tag
|
|
|
Defined in
Tag:52
|
|
|
Tag render size |
|
| skeleton | |
Type : boolean
|
|
Default value : false
|
|
|
Inherited from
Tag
|
|
|
Defined in
Tag:56
|
|
| type | |
Type : TagType
|
|
Default value : "gray"
|
|
|
Inherited from
Tag
|
|
|
Defined in
Tag:47
|
|
|
Type of the tag determines the styling |
|
| attr.class |
Type : string
|
|
Inherited from
Tag
|
|
Defined in
Tag:32
|
| attr.role |
Type : string
|
Default value : "button"
|
|
Defined in src/tag/tag-operational.component.ts:22
|
| attr.tabindex |
Type : number
|
Default value : 0
|
|
Defined in src/tag/tag-operational.component.ts:24
|
| attr.type |
Type : string
|
Default value : "button"
|
|
Defined in src/tag/tag-operational.component.ts:23
|
| buttonType |
Type : string
|
Default value : "button"
|
Decorators :
@HostBinding('attr.type')
|
|
Defined in src/tag/tag-operational.component.ts:23
|
| role |
Type : string
|
Default value : "button"
|
Decorators :
@HostBinding('attr.role')
|
|
Defined in src/tag/tag-operational.component.ts:22
|
| tabIndex |
Type : number
|
Default value : 0
|
Decorators :
@HostBinding('attr.tabindex')
|
|
Defined in src/tag/tag-operational.component.ts:24
|
| attrClass |
getattrClass()
|
|
Defined in src/tag/tag-operational.component.ts:32
|
|
Remove |
import {
ChangeDetectionStrategy,
Component,
HostBinding,
Input
} from "@angular/core";
import { Tag } from "./tag.component";
@Component({
selector: "cds-tag-operational, ibm-tag-operational",
template: `
<ng-container *ngIf="!skeleton">
<ng-content select="[cdsTagIcon],[ibmTagIcon]"></ng-content>
<span class="cds--tag__label">
<ng-content></ng-content>
</span>
</ng-container>
`,
changeDetection: ChangeDetectionStrategy.OnPush
})
export class TagOperationalComponent extends Tag {
@HostBinding("attr.role") role = "button";
@HostBinding("attr.type") buttonType = "button";
@HostBinding("attr.tabindex") tabIndex = 0;
@Input() disabled = false;
/**
* @todo
* Remove `cds--tag--${this.size}` in v7
*/
@HostBinding("attr.class") get attrClass() {
const disabledClass = this.disabled ? "cds--tag--disabled" : "";
const sizeClass = `cds--tag--${this.size} cds--layout--size-${this.size}`;
const skeletonClass = this.skeleton ? "cds--skeleton" : "";
return `cds--tag cds--tag--operational cds--tag--${this.type} ${disabledClass} ${sizeClass} ${skeletonClass} ${this.class}`;
}
}