projects/commons/src/lib/elements/timeline/components/timeline.component.ts
| selector | cmn-timeline |
| styleUrls | ./timeline.component.scss |
| templateUrl | ./timeline.component.html |
Inputs |
| model | |
Type : ITimeline
|
|
import { Component, Input } from '@angular/core';
import { ITimeline } from '../interfaces';
@Component({
selector: 'cmn-timeline',
templateUrl: './timeline.component.html',
styleUrls: [ './timeline.component.scss' ],
})
export class TimelineComponent {
@Input() public readonly model: ITimeline;
}
<div class="timeline">
<ng-container *ngFor="let element of model">
<header class="timeline-header"
*ngIf="element.header">
<span class="tag is-medium {{ element.color }}">
{{ element.header }}
</span>
</header>
<div class="timeline-item {{ element.color }}"
*ngIf="element.image || element.icon || element.content">
<div class="timeline-marker is-image is-32x32 {{ element.color }}"
*ngIf="element.img">
<img [src]="element.img">
</div>
<div class="timeline-marker is-icon {{ element.color }}"
*ngIf="element.icon">
<i class="fa fa-{{ element.icon }}"></i>
</div>
<div class="timeline-content"
*ngIf="element.content">
<p class="heading">{{ element.content.title }}</p>
<p>{{ element.content.text }}</p>
</div>
</div>
</ng-container>
</div>
./timeline.component.scss
@import "../../../../assets/styles/settings/_colors";
.timeline {
.timeline-content {
background: $light;
margin-left: 40px;
padding: 10px;
border-radius: 8px;
}
}