src/app/ui/navigation/navigation.component.ts
| selector | framadate-navigation |
| styleUrls | ./navigation.component.scss |
| templateUrl | ./navigation.component.html |
Properties |
Methods |
Inputs |
constructor(config: ConfigService, route: Router)
|
|||||||||
|
Parameters :
|
| step | |
Type : string
|
|
Default value : 'home'
|
|
| nextPage |
nextPage()
|
|
Returns :
void
|
| ngOnInit |
ngOnInit()
|
|
Returns :
void
|
| checkValidity |
checkValidity()
|
|
Inherited from
BaseComponent
|
|
Defined in
BaseComponent:21
|
|
Returns :
boolean
|
| displayErrorMessage |
displayErrorMessage()
|
|
Inherited from
BaseComponent
|
|
Defined in
BaseComponent:27
|
|
Returns :
boolean
|
| ngOnInit |
ngOnInit()
|
|
Inherited from
BaseComponent
|
|
Defined in
BaseComponent:17
|
|
Returns :
void
|
| Public config |
Type : ConfigService
|
| Public route |
Type : Router
|
| Public config |
Type : ConfigService
|
|
Inherited from
BaseComponent
|
|
Defined in
BaseComponent:14
|
import {Component, Input, OnInit} from '@angular/core';
import {BaseComponent} from '../../pages/base-page/base.component';
import {Router} from '@angular/router';
import {ConfigService} from '../../services/config.service';
@Component({
selector: 'framadate-navigation',
templateUrl: './navigation.component.html',
styleUrls: ['./navigation.component.scss']
})
export class NavigationComponent extends BaseComponent implements OnInit {
@Input() public step: string = 'home';
constructor(public config: ConfigService,
public route: Router) {
super(config);
}
ngOnInit() {
}
nextPage() {
if (this.checkValidity()) {
if (this.config.step < this.config.stepMax) {
this.config.step++;
}
} else {
this.displayErrorMessage();
}
}
}
<nav class="choices" >
<a
[routerLink]="'home'"
[ngClass]="{'active': (step === 'home')}"
i18n
>
<i class="fa fa-home" ></i >
</a >
<a
[routerLink]="'/step/creation'"
[ngClass]="{'active': step == 'creation'}"
i18n
>
Création
</a >
<a
[routerLink]="'/step/date'"
[ngClass]="{'active': step == 'date'}"
i18n
>
Les Dates
</a >
<a
[routerLink]="'/step/answers'"
[ngClass]="{'active': step == 'answers'}"
i18
>
Réponses
</a >
<a
[routerLink]="'/step/visibility'"
[ngClass]="{'active': step == 'visibility'}"
i18n
>
Visibilité
</a >
<a
[routerLink]="'/step/base'"
[ngClass]="{'active': step == 'base'}"
i18n
>
Base
</a >
<a
[routerLink]="'/step/pictures'"
[ngClass]="{'active': step == 'pictures'}"
i18n
>
Images
</a >
<a
[routerLink]="'/step/resume'"
[ngClass]="{'active': step == 'resume'}"
i18n
>
Résumé
</a >
<a
[routerLink]="'/step/end'"
[ngClass]="{'active': step == 'end'}"
i18n
>
Confirmation
</a >
<a
[routerLink]="'/step/kind'"
[ngClass]="{'active': step == 'kind'}"
i18n
>
Page démo
</a >
<a
[routerLink]="['vote/poll/id/',3]"
i18n >
Sondage dessins animés
</a >
<a
[routerLink]="['vote/poll/id/',4]"
i18n >
Sondage 4
</a >
<a
[routerLink]="'/vote/poll/id/5'"
i18n >
Sondage 5
</a >
<a
[routerLink]="'/graphic/toto'"
[ngClass]="{'active': step == 'graphic'}"
i18n
>
Graphique
</a >
<a
[routerLink]="'/step/admin'"
i18n
>
Administration
</a >
<a
[routerLink]="'/home'"
i18n
>
Accueil
</a >
</nav >
./navigation.component.scss
@charset "UTF-8";
nav {
text-align: center;
margin-bottom: 3.2rem;
padding-top: 1.6rem;
padding-bottom: 1.6rem;
border-top: 2px solid #ffd52c;
border-bottom: 2px solid #ffd52c;
a {
&::before {
display: inline-block;
position: relative;
width: auto;
background: none;
}
&::after {
display: none;
}
&:not(:first-of-type)::before {
content: ' | ';
}
&.active {
color: white;
background: black;
}
}
}