0.0.2 • Published 5 years ago
ng-timeline-vertical v0.0.2
NgTimelineVertical
Inpired from : https://codepen.io/codyhouse/pen/FdkEf
Set of directive to display a vertical timeline on Angular.
Tested with
Framwork | Version |
---|---|
Angular | 5+ |
Ionic | 3+ |
Installation
npm i --save ng-timeline-vertical
Usage
<ng-timeline-vertical>
<ng-timeline-item *ngFor="let item of timelineList"
title="{{item.label}}"
content="{{item.text}}"
date="{{item.date_created}}"
button="{{{title:'Read more', action: item.url}}}">
</ng-timeline-item>
</ng-timeline-vertical>
Directive API
Name | Value | Mandatory | Comment |
---|---|---|---|
title | string | Yes | |
content | string | No | |
date | string | No | Date must be already formatted for display |
button | {title: string, action: any} | No |
Transclusion
In the case you want to send custom html content into an item, it is possible to transclude some content inside a timeline item.
Example :
<ng-timeline-vertical>
<ng-timeline-item
title="Racoon per country"
date="2012">
<table style="width:100%">
<tr>
<th>Country</th>
<th>Nb</th>
</tr>
<tr>
<td>USA</td>
<td>500 000</td>
</tr>
<tr>
<td>Canada</td>
<td>350 000</td>
</tr>
</table>
</ng-timeline-item>
</ng-timeline-vertical>
You can add as much transcluded content as you want in combination with the directive attributes.
The order of display is : Title, content, transclusion, button
TODO
- Animations