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/src/angular-timeline.css" />
- Include
angular-timeline.js
in your app:
<script src="bower_components/angular-timeline/src/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):
<timeline>
<timeline-node side="left">
<timeline-badge class="info"><i class="glyphicon glyphicon-check"></i>
</timeline-badge>
<timeline-panel>
<timeline-heading>
<timeline-title>Some twitter post</timeline-title>
<p>
<small class="text-muted"><i class="glyphicon glyphicon-time"></i> 11 hours ago via Twitter</small>
</p>
</timeline-heading>
<timeline-content>
<p>Twitter post goes here</p>
</timeline-content>
</timeline-panel>
</timeline-node>
<timeline-node side="right">
<timeline-badge class="warning"><i class="glyphicon glyphicon-credit-card"></i>
</timeline-badge>
<timeline-panel>
<timeline-heading>
<timeline-title>Another twitter post</timeline-title>
<p>
<small class="text-muted">12 hours ago via Twitter</small>
</p>
</timeline-heading>
<timeline-content>
<p>Another twitter post goes here</p>
</timeline-content>
</timeline-panel>
</timeline-node>
</timeline>
Yes, there is a bit of markup here, but <timeline-content>
and <timeline-heading>
are optional.
timeline-badge
is for the centre line between the two sides, and should represent the event type that occured.
I had also added an optional <timeline-footer>
to go after <timeline-content>
for links and other info.
-
You can use the
side=left
orside=right
attribute on the<timeline-node>
element to float the timeline panels left or right accordingly. (when < 768px in width it will push all<timeline-node>
elements to the right). -
You can use either the SASS styles directly file under
/src
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/src/angular-timeline-bootstrap.css" />
<script src="bower_components/angular-timeline/src/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
) - Make your changes, run
grunt karma
to ensure all tests pass. (Ideally add more tests!) - 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.2.0 Updated example and styling to be more responsive.
- 1.0.0 Initial release
- Add some tests
- Add some examples with ng-repeat based on JSON datasets.
luisrudge for the original vanilla JS implementation on Bootsnipp
Released under the MIT License. See the LICENSE file for further details.