/horizontal-timeline

Horizontal Timeline Component on Angular2

Primary LanguageTypeScriptMIT LicenseMIT

horizontal-timeline

Horizontal Timeline Component on Angular2 (original component: https://codyhouse.co/demo/horizontal-timeline/index.html)

Usage

  1. Clone repository.
  2. Copy horizontal-timeline to your components folder.
  3. Move cd-arrow.svg to your assets folder.
  4. Modify horizontal-timeline.component.css: change url to your assets folder in line background: url(assets/images/cd-arrow.svg) no-repeat 0 0; (see angular/angular#6637).
  5. Use component on your page: <horizontal-timeline [timelineElements]="timeline" [showContent]="true"></horizontal-timeline>.

Properties

Name Type Description Default value
eventsMinDistance number Minimal distance between elements in px 80
timelineElements TimelineElement Timeline elements none
dateFormat string Date format string 'dd.MM.yyyy'
disabled boolean If true, only left and right buttons are clickable false
showContent boolean Use false to hide content, true to show content false
timelineWrapperWidth number Width of timeline wrapper in px 720

TimelineElement interface

Name Type Description
date Date Event date
title string Element content title
selected boolean Is element selected
content string Element content