projects/tl-elements/src/lib/tl-tabs/tl-tabs.component.ts
| changeDetection | ChangeDetectionStrategy.Default |
| selector | tl-tabs-component |
| styleUrls | ./tl-tabs.component.scss |
| templateUrl | ./tl-tabs.component.html |
Properties |
Inputs |
HostBindings |
constructor(injector: Injector)
|
||||||
|
Parameters :
|
| 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, Injector } from '@angular/core';
import { TamuAbstractBaseComponent } from '../shared/tl-abstract-base.component';
@Component({
selector: 'tl-tabs-component',
templateUrl: './tl-tabs.component.html',
styleUrls: ['./tl-tabs.component.scss'],
changeDetection: ChangeDetectionStrategy.Default
})
export class TlTabsComponent extends TamuAbstractBaseComponent {
// tslint:disable-next-line:unnecessary-constructor
constructor(injector: Injector) {
super(injector);
}
}
<wvr-tabs-component>
<ng-content select="template[tab-content]" ngProjectAs="template[tab-content]"></ng-content>
</wvr-tabs-component>
./tl-tabs.component.scss
@import '~@wvr/elements/styles/variables';
:host {
wvr-tabs-component {
::ng-deep {
a.nav-link {
color: #00648B;
text-decoration: none;
}
a.nav-link:hover {
color: #003F58;
}
}
}
& ::ng-deep wvr-tabs-component .nav-tabs .nav-item {
.nav-link {
border-width: 5px 1px 1px 1px;
border-radius: 0px;
}
.nav-link:not(.active) {
border-color: var(--secondaryNeutral);
border-bottom-color: transparent;
}
.nav-link.active,
.nav-link:not(.active):hover {
border-color: var(--primary);
border-bottom-color: transparent;
}
}
@each $color, $value in $theme-colors {
&:is([inactive-tab-theme="#{$color}"]) ::ng-deep wvr-tabs-component .nav-tabs .nav-item {
.nav-link:not(.active):is([inactive-tab-theme=""]),
.nav-link:not(.active):is([inactive-tab-theme=""]):active,
.nav-link:not(.active):is([inactive-tab-theme=""]):focus,
.nav-link:not(.active):is([inactive-tab-theme=""]):hover {
border-color: var(--#{$color}) !important;
border-bottom-color: transparent !important;
}
}
&:is([active-tab-theme="#{$color}"]) ::ng-deep wvr-tabs-component .nav-tabs .nav-item {
.nav-link.active:is([active-tab-theme=""]),
.nav-link.active:is([active-tab-theme=""]):active,
.nav-link.active:is([active-tab-theme=""]):focus,
.nav-link.active:is([active-tab-theme=""]):hover {
border-color: var(--#{$color}) !important;
border-bottom-color: transparent !important;
}
}
& ::ng-deep wvr-tabs-component .nav-tabs .nav-item {
.nav-link:is([inactive-tab-theme="#{$color}"]):not(.active),
.nav-link:is([inactive-tab-theme="#{$color}"]):not(.active):active,
.nav-link:is([inactive-tab-theme="#{$color}"]):not(.active):focus,
.nav-link:is([inactive-tab-theme="#{$color}"]):not(.active):hover,
.nav-link.active:is([active-tab-theme="#{$color}"]),
.nav-link.active:is([active-tab-theme="#{$color}"]):active,
.nav-link.active:is([active-tab-theme="#{$color}"]):focus,
.nav-link.active:is([active-tab-theme="#{$color}"]):hover {
border-color: var(--#{$color}) !important;
border-bottom-color: transparent !important;
}
}
}
}