src/tabs/tab-skeleton.component.ts
Skeleton component for tabs
| selector | cds-tabs-skeleton, ibm-tabs-skeleton |
| template | |
Properties |
Inputs |
HostBindings |
Accessors |
| numOftabs | |
Type : number
|
|
|
Defined in src/tabs/tab-skeleton.component.ts:28
|
|
|
Set number of skeleton tabs to render, default is 5 |
|
| class.cds--skeleton |
Type : boolean
|
Default value : true
|
|
Defined in src/tabs/tab-skeleton.component.ts:35
|
|
Set to |
| class.cds--tabs |
Type : boolean
|
Default value : true
|
|
Defined in src/tabs/tab-skeleton.component.ts:36
|
| numOfSkeletonTabs |
Default value : new Array(5)
|
|
Defined in src/tabs/tab-skeleton.component.ts:37
|
| skeleton |
Default value : true
|
Decorators :
@HostBinding('class.cds--skeleton')
|
|
Defined in src/tabs/tab-skeleton.component.ts:35
|
|
Set to |
| tabs |
Default value : true
|
Decorators :
@HostBinding('class.cds--tabs')
|
|
Defined in src/tabs/tab-skeleton.component.ts:36
|
| numOftabs | ||||||
setnumOftabs(num: number)
|
||||||
|
Defined in src/tabs/tab-skeleton.component.ts:28
|
||||||
|
Set number of skeleton tabs to render, default is 5
Parameters :
Returns :
void
|
import {
Component,
HostBinding,
Input
} from "@angular/core";
/**
* Skeleton component for tabs
*/
@Component({
selector: "cds-tabs-skeleton, ibm-tabs-skeleton",
template: `
<ul class="cds--tabs__nav">
<li
*ngFor="let i of numOfSkeletonTabs"
class="cds--tabs__nav-item">
<div class="cds--tabs__nav-link">
<span></span>
</div>
</li>
</ul>
`
})
export class TabSkeleton {
/**
* Set number of skeleton tabs to render, default is 5
*/
@Input() set numOftabs(num: number) {
this.numOfSkeletonTabs = new Array(num);
}
/**
* Set to `true` to put tabs in a loading state.
*/
@HostBinding("class.cds--skeleton") skeleton = true;
@HostBinding("class.cds--tabs") tabs = true;
numOfSkeletonTabs = new Array(5);
}