### File

`projects/commons/src/lib/elements/timeline/components/timeline.component.ts`

### Metadata

selector | `cmn-timeline`
styleUrls | `./timeline.component.scss`
templateUrl | `./timeline.component.html`

### Index

###### Inputs
model

### Inputs

model
Type : `ITimeline`
Defined in projects/commons/src/lib/elements/timeline/components/timeline.component.ts:12

    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;
        }
    }

Legend
Html element
Component
Html element with directive

# result-matching ""

# No results matching ""