projects/tl-elements/src/lib/tl-card/tl-card.component.ts
| changeDetection | ChangeDetectionStrategy.Default |
| selector | tl-card-component |
| styleUrls | ./tl-card.component.scss |
| templateUrl | ./tl-card.component.html |
Properties |
Inputs |
HostBindings |
constructor(injector: Injector)
|
||||||
|
Parameters :
|
| collapsed | |
Type : "true" | "false"
|
|
|
Designate the actual expanded/collapsed state. |
|
| collapseMethod | |
Type : "click" | "none"
|
|
|
Designate how to expand/collapse. |
|
| panelFormat | |
Type : "solid" | "outlined" | "mixed"
|
|
|
Used to describe the format of card. |
|
| startCollapsed | |
Type : boolean
|
|
|
Designate the initial expanded/collapsed state. |
|
| themeVariant | |
Type : any
|
|
|
Used to override the type of card. |
|
| inheritFontStyle | |
Type : "true" | "false"
|
|
|
Inherited from
TamuAbstractBaseComponent
|
|
|
Defined in
TamuAbstractBaseComponent:14
|
|
| style.--tl-font-family-sans-serif |
Type : string
|
Default value : 'var(--tl-default-font-family-sans-serif)'
|
|
Inherited from
TamuAbstractBaseComponent
|
|
Defined in
TamuAbstractBaseComponent:12
|
|
Allows for the override of the --tl-font-family-sans-serif css variable. |
| style.--tl-font-size |
Type : string
|
Default value : 'var(--tl-default-font-size)'
|
|
Inherited from
TamuAbstractBaseComponent
|
|
Defined in
TamuAbstractBaseComponent:9
|
|
Allows for the override of the --tl-default-font-size css variable. |
| _fontFamily |
Type : string
|
Default value : 'var(--tl-default-font-family-sans-serif)'
|
Decorators :
@HostBinding('style.--tl-font-family-sans-serif')
|
|
Inherited from
TamuAbstractBaseComponent
|
|
Defined in
TamuAbstractBaseComponent:12
|
|
Allows for the override of the --tl-font-family-sans-serif css variable. |
| _fontSize |
Type : string
|
Default value : 'var(--tl-default-font-size)'
|
Decorators :
@HostBinding('style.--tl-font-size')
|
|
Inherited from
TamuAbstractBaseComponent
|
|
Defined in
TamuAbstractBaseComponent:9
|
|
Allows for the override of the --tl-default-font-size css variable. |
import { ChangeDetectionStrategy, Component, HostBinding, Injector, Input } from '@angular/core';
import { TamuAbstractBaseComponent } from '../shared/tl-abstract-base.component';
@Component({
selector: 'tl-card-component',
templateUrl: './tl-card.component.html',
styleUrls: ['./tl-card.component.scss'],
changeDetection: ChangeDetectionStrategy.Default
})
export class TlCardComponent extends TamuAbstractBaseComponent {
/** Used to override the type of card. */
@Input() themeVariant;
/** Used to describe the format of card. */
@Input() panelFormat: 'solid' | 'outlined' | 'mixed';
/** Designate how to expand/collapse. */
@Input() collapseMethod: 'click' | 'none';
/** Designate the initial expanded/collapsed state. */
@Input() startCollapsed: boolean;
/** Designate the actual expanded/collapsed state. */
@Input() collapsed: 'true' | 'false';
// tslint:disable-next-line:unnecessary-constructor
constructor(injector: Injector) {
super(injector);
}
}
<wvr-card-component [themeVariant]="themeVariant" [panelFormat]="panelFormat" [selectorPrefix]="'tl'" [collapseMethod]="collapseMethod" [startCollapsed]="startCollapsed" [collapsed]="collapsed">
<ng-content select="template" ngProjectAs="template"></ng-content>
</wvr-card-component>
./tl-card.component.scss
@import "../shared/styles/tl-variables.scss";