File
Description
The NavButtonsContainerComponent is a two buttons component for NEXT and BACK navigation options.
|
nxBackAction
|
Type : function
|
Default value : () => undefined
|
|
|
|
nxBackHidden
|
Type : boolean
|
Default value : false
|
|
|
|
nxBackLink
|
Type : boolean
|
Default value : false
|
|
|
|
nxDisableBack
|
Type : boolean
|
Default value : false
|
|
|
|
nxDisableNext
|
Type : boolean
|
Default value : false
|
|
|
|
nxEnableNextOptionalLabel
|
Type : boolean
|
Default value : false
|
|
|
|
nxNextAction
|
Type : function
|
Default value : () => undefined
|
|
|
|
nxNextHidden
|
Type : boolean
|
Default value : false
|
|
|
|
nxNextLink
|
Type : boolean
|
Default value : false
|
|
|
import { Component, Input } from '@angular/core';
/**
* The NavButtonsContainerComponent is a two buttons component for NEXT and BACK navigation options.
*
* @param nxNextType: Button type for NEXT Button
* @param nxBackType: Button type for BACK Button
* @param nxNextLabel: Translation key to be replaced with the NEXT button label
* @param nxBackLabel: Translation key to be replaced with the BACK button label
* @param nxNextHidden: Flag to show/hide NEXT button
* @param nxBackHidden: Flag to show/hide BACK button
* @param nxNextAction: Function to be executed when NEXT button is clicked
* @param nxBackAction: Function to be executed when BACK button is clicked
* @param nxDisableNext: Flag to disable NEXT button
* @param nxDisableBack: Flag to disable BACK button
* @param nxNextOptionalLabel: Translation key to be replaced with the NEXT button optional label
* @param nxEnableNextOptionalLabel: Flag to enable NEXT button optional label
* @param nxBackLink: Flag to show BACK button as link instead of button
* @param nxNextLink: Flag to show NEXT button as link instead of button
*/
@Component({
selector: 'pfe-nav-buttons-container',
templateUrl: 'nav-buttons-container.component.html',
styleUrls: ['nav-buttons-container.scss'],
standalone: false,
})
export class PfeNavButtonsContainerComponent {
@Input() nxNextType!: string;
@Input() nxBackType!: string;
@Input() nxBackLabel: string | undefined;
@Input() nxNextLabel: string | undefined;
@Input() nxNextHidden = false;
@Input() nxBackHidden = false;
@Input() nxDisableNext = false;
@Input() nxDisableBack = false;
@Input() nxNextOptionalLabel: string | undefined;
@Input() nxEnableNextOptionalLabel = false;
@Input() nxBackLink = false;
@Input() nxNextLink = false;
@Input() nxNextAction: () => void = () => undefined;
@Input() nxBackAction: () => void = () => undefined;
}
<div nxLayout="grid nopadding">
<div nxRow rowJustify="center,center,center,center" class="nav-buttons-container" *ngIf="!(nxBackHidden && nxNextHidden)">
<div nxCol="12,12,6,6" *ngIf="!nxNextHidden && !nxNextLink" class="next-button">
<div nxRow rowJustify="center,center,center,center" [ngClass]="{ twoButtons: !nxNextHidden && !nxBackHidden }">
<div nxCol="10,10,10,8">
<button [nxButton]="nxNextType" [disabled]="nxDisableNext" (click)="nxNextAction()">
{{ (nxEnableNextOptionalLabel ? nxNextOptionalLabel : nxNextLabel) | pfeTranslate }}
</button>
</div>
</div>
</div>
<div nxCol="12" *ngIf="!nxNextHidden && nxNextLink" class="link">
<div nxRow rowJustify="center,center,center,center">
<nx-link nxStyle="block">
<a [attr.aria-disabled]="nxDisableNext ? true : null" (click)="!nxDisableNext ? nxNextAction() : false">
{{ nxNextLabel | pfeTranslate }}<span aria-hidden="true" class="nx-link__icon right c-icon c-icon--arrow-right"></span>
</a>
</nx-link>
</div>
</div>
<div nxCol="12,12,6,6" *ngIf="!nxBackHidden && !nxBackLink" class="back-button">
<div nxRow rowJustify="center,center,center,center" [ngClass]="{ twoButtons: !nxNextHidden && !nxBackHidden }">
<div nxCol="10,10,10,8">
<button [nxButton]="nxBackType" [disabled]="nxDisableBack" (click)="nxBackAction()">
{{ nxBackLabel | pfeTranslate }}
</button>
</div>
</div>
</div>
<div nxCol="12" *ngIf="!nxBackHidden && nxBackLink" class="link">
<div nxRow rowJustify="center,center,center,center">
<nx-link nxStyle="block">
<a [attr.aria-disabled]="nxDisableBack ? true : null" (click)="!nxDisableBack ? nxBackAction() : false">
<span aria-hidden="true" class="nx-link__icon c-icon c-icon--arrow-left"></span>{{ nxBackLabel | pfeTranslate }}
</a>
</nx-link>
</div>
</div>
</div>
</div>
@import '../../styles/variables';
@import '../../styles/mixins';
.nav-buttons-container {
.next-button {
@include tablet {
order: 1;
}
.twoButtons {
@include tablet {
justify-content: flex-start !important;
}
}
}
.back-button .twoButtons {
@include tablet {
justify-content: flex-end !important;
}
}
.nx-link__icon.right {
float: right;
}
& > .link:not(:last-child) {
margin-bottom: $space-l;
}
button {
width: 100%;
margin: 0 0 24px;
}
}
Legend
Html element with directive