Shalugin Horizontal Timeline Save Abandoned
Horizontal Timeline Component on Angular2
Project README
horizontal-timeline
Horizontal Timeline Component on Angular2 (original component: https://codyhouse.co/demo/horizontal-timeline/index.html)
Usage
- Clone repository.
- Copy
horizontal-timelineto your components folder. - Move
cd-arrow.svgto your assets folder. - Modify
horizontal-timeline.component.css: change url to your assets folder in linebackground: url(assets/images/cd-arrow.svg) no-repeat 0 0;(see https://github.com/angular/angular/issues/6637). - 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 |
Open Source Agenda is not affiliated with "Shalugin Horizontal Timeline" Project. README Source: shalugin/horizontal-timeline
Stars
40
Open Issues
7
Last Commit
6 years ago
License
Open Source Agenda Badge
