src/app/components/app-navigation/app-navigation.component.ts
| selector | app-navigation |
| styleUrls | ./app-navigation.component.css |
| templateUrl | ./app-navigation.component.html |
Methods |
constructor(materialService: MaterialService)
|
||||||
|
Initializes component. An IMaterialService must be provided so the material tabs can be rendered properly.
Parameters :
|
| ngOnInit |
ngOnInit()
|
|
Component lifecycle event that is used to render the material lite components that are used in the view.
Returns :
void
|
import { Component, OnInit } from '@angular/core';
import { MaterialService } from '../../providers/services/material.service';
@Component({
selector: 'app-navigation',
templateUrl: './app-navigation.component.html',
styleUrls: ['./app-navigation.component.css']
})
export class AppNavigationComponent implements OnInit {
/**
* Initializes component.
* An IMaterialService must be provided so the material tabs can be rendered properly.
* @param materialService
*/
constructor(private materialService: MaterialService) {}
/**
* Component lifecycle event that is used to render the material lite components that are used in the view.
*/
ngOnInit() {
console.log('app-navigation component loaded');
this.materialService.render();
}
}
<div class="mdl-tabs">
<div class="mdl-tabs__tab-bar">
<a id="newTransferTab" [routerLink]="['/start']" routerLinkActive="active" class="mdl-tabs__tab">New Transfer</a>
<a id="accountsTab" [routerLink]="['/templates']" routerLinkActive="active" class="mdl-tabs__tab">Accounts</a>
<a id="viewTransfersTab" [routerLink]="['/payments']" routerLinkActive="active" class="mdl-tabs__tab">View Transfers</a>
</div>
</div>
./app-navigation.component.css
.mdl-tabs__tab-bar {
height: 40px;
background-color: #f7f8fc;
border-bottom: 1px solid #ccc;
display: flex;
flex-wrap: wrap;
flex-direction: row;
width: 100%;
}
.mdl-tabs__tab {
color: #707173;
font-family: Arial, Helvetica, sans-serif; /*Fi Font*/
height: 40px;
line-height: 40px;
text-transform: none;
text-align: center;
flex: 1;
padding: 0px;
}
.mdl-tabs.is-upgraded .mdl-tabs__tab.is-active:after {
background: none; /* FI Primary Color */
color: none;
}
.mdl-tabs.is-upgraded .mdl-tabs__tab.is-active {
color: #707173;
}
.mdl-ripple.is-animating {
width: 100% !important;
height: 100% !important;
background: #3393a1 !important; /* FI Primary Color */
}
.mdl-tabs.is-upgraded .mdl-tabs__tab.is-active:after {
-webkit-animation: none;
animation: none;
transition: none;
}
.mdl-tabs__tab .mdl-tabs__ripple-container .mdl-ripple{
background: #3393a1 !important; /* FI Primary Color */
}
.active {
border-bottom: 2px solid #3393a1; /* FI Primary Color */
color: #3393a1 !important; /* FI Primary Color */
box-sizing: border-box;
}