asctb-reporter
  1. Components
  2. DocsNavComponent

File

src/app/modules/docs/docs-nav/docs-nav.component.ts

Metadata

selector app-docs-nav
styleUrls ./docs-nav.component.scss
templateUrl ./docs-nav.component.html

Index

Properties
Inputs
Outputs

Inputs

next
Type : number | null
Default value : null
Defined in src/app/modules/docs/docs-nav/docs-nav.component.ts:15
prev
Type : number | null
Default value : null
Defined in src/app/modules/docs/docs-nav/docs-nav.component.ts:16

Outputs

nextClick
Type : EventEmitter
Defined in src/app/modules/docs/docs-nav/docs-nav.component.ts:17
prevClick
Type : EventEmitter
Defined in src/app/modules/docs/docs-nav/docs-nav.component.ts:18

Properties

faArrowLeft
Default value : faArrowLeft
Defined in src/app/modules/docs/docs-nav/docs-nav.component.ts:13
faArrowRight
Default value : faArrowRight
Defined in src/app/modules/docs/docs-nav/docs-nav.component.ts:12
REGISTRY
Default value : REGISTRY
Defined in src/app/modules/docs/docs-nav/docs-nav.component.ts:11
 
import { Component, EventEmitter, Input, Output } from '@angular/core';
import { faArrowLeft, faArrowRight } from '@fortawesome/free-solid-svg-icons';
import { REGISTRY } from '../../../static/docs';

@Component({
  selector: 'app-docs-nav',
  templateUrl: './docs-nav.component.html',
  styleUrls: ['./docs-nav.component.scss'],
})
export class DocsNavComponent {
  REGISTRY = REGISTRY;
  faArrowRight = faArrowRight;
  faArrowLeft = faArrowLeft;

  @Input() next: number | null = null;
  @Input() prev: number | null = null;
  @Output() nextClick = new EventEmitter();
  @Output() prevClick = new EventEmitter();
}

<div class="d-flex justify-content-center align-items-center">
  <div
    class="item d-flex justify-content-between align-items-center w-100 px-4 py-3 mr-2"
    *ngIf="prev !== null && prev >= 0"
    (click)="prevClick.emit()"
  >
    <fa-icon [icon]="faArrowLeft"></fa-icon>
    <div class="text-end">
      <p class="text-muted bip mb-0">Previous</p>
      <span class="h6 m-0">{{ REGISTRY[prev].title }}</span>
    </div>
  </div>

  <div
    class="item d-flex justify-content-between align-items-center w-100 px-4 py-3 ml-2"
    *ngIf="next !== null && next < REGISTRY.length"
    (click)="nextClick.emit()"
  >
    <div>
      <p class="text-muted bip mb-0">Next</p>
      <span class="h6 m-0">{{ REGISTRY[next].title }}</span>
    </div>
    <fa-icon [icon]="faArrowRight"></fa-icon>
  </div>
</div>

./docs-nav.component.scss 

.bip {
  font-size: 10pt;
}

.item {
  border-radius: 0.5rem;
  border: 2px solid #ececec;
  cursor: pointer;
  transition: all 0.2s;

  &:hover {
    transition: all 0.2s;
    border-color: #bfbfbf;
  }

  &:active {
    background-color: #f4f4f4;
  }
}
Legend
Html element
Component
Html element with directive

results matching ""

    No results matching ""