An Angular.js directive that generates a responsive, data-driven vertical timeline to tell a story, show history or describe a sequence of events.
Original Implementation (HTML / Javascript)
- Install the plugin into your Angular.js project, manually or via
bower install angular-timeline --save
- Include
angular-timeline.css
in your app:
<link rel="stylesheet" href="bower_components/angular-timeline/dist/angular-timeline.css"/>
- Include
angular-timeline.js
in your app:
<script src="bower_components/angular-timeline/dist/angular-timeline.js"></script>
- Add
angular-timeline
as a new module dependency in your angular app.
var myapp = angular.module('myapp', ['angular-timeline']);
- To define a timeline, do the following (either manually or using ng-repeat on a dataset):
// in controller
$scope.events = [{
badgeClass: 'info',
badgeIconClass: 'glyphicon-check',
title: 'First heading',
content: 'Some awesome content.'
}, {
badgeClass: 'warning',
badgeIconClass: 'glyphicon-credit-card',
title: 'Second heading',
content: 'More awesome content.'
}];
<!-- view -->
<timeline>
<timeline-event ng-repeat="event in events" side="right">
<timeline-badge class="{{event.badgeClass}}">
<i class="glyphicon {{event.badgeIconClass}}"></i>
</timeline-badge>
<timeline-panel class="{{event.badgeClass}}">
<timeline-heading>
<h4>{{event.title}}</h4>
</timeline-heading>
<p>{{event.content}}</p>
</timeline-panel>
</timeline-event>
</timeline>
There is a bit of markup here but <timeline-heading>
is optional.
<timeline-badge>
is for the centre line between the two sides, and should represent the event type that occured.
-
The demo uses angular-scroll-animate to trigger CSS animations when timeline events scroll into view. It's totally optional to include this or not and is just there for effect.
-
Panels are now designed to float left, then right, side to side. Float right is forced on smaller (eg. mobile) devices.
-
If you define the events in an array and have HTML content to output, use
ng-bind-html={{event.attribute}}
and require thengSanitize
module. -
You can use either the SASS styles directly file under
/dist
or the compiled CSS files, up to you :) -
If you are using Bootstrap 3 it affects the timeline CSS, so include
angular-timeline-bootstrap.[css|scss]}
to re-adjust the offsets e.g:
<link rel="stylesheet" href="bower_components/bootstrap/dist/css/bootstrap.css" />
<link rel="stylesheet" href="bower_components/angular-timeline/dist/angular-timeline-bootstrap.css" />
<script src="bower_components/angular-timeline/dist/angular-timeline.js"></script>
- Checkout git repository locally:
git clone git@github.com:rpocklin/angular-timeline.git
npm install
bower install
grunt serve
- View
http://localhost:9000/example/
in your browser to see the example.
- Fork it
- Create your feature branch (
git checkout -b my-new-feature
) - Beautify (
grunt beautify
) - Ensure it passes code-checks / tests (
grunt
) - Commit your changes (
git commit -am 'Added some feature'
) - Push to the branch (
git push origin my-new-feature
) - Create a new Pull Request
- 1.6.2 Fixed missing logic in passing
side
attribute declaration (was watching parent scope) - 1.6.1 Added attribute for
side=left
orside=right
to force left or right-handed columns for timeline events. - 1.6.0 Changed
hidden
totimeline-hidden
class in example anangular-timeline-animations.css
. - 1.5.2 Updated dependency used in example
angular-scroll-animate
from 0.8.0 to 0.9.1. - 1.5.0 Updated dependencies, simplified nested components and improved example. Changed
timeline-node
totimeline-event
. Removedreplace = true
in directives. - 1.2.1 Cleaned up dependencies and build steps.
- 1.2.0 Updated example and styling to be more responsive.
- 1.0.0 Initial release
- Add some tests
luisrudge for the original vanilla JS implementation on Bootsnipp
Released under the MIT License. See the LICENSE file for further details.