https://github.com/rpocklin/angular-timeline
An Angular.JS directive that generates a responsive, data-driven vertical timeline to tell a story, show history or describe a sequence of events.
https://github.com/rpocklin/angular-timeline
Last synced: 28 days ago
JSON representation
An Angular.JS directive that generates a responsive, data-driven vertical timeline to tell a story, show history or describe a sequence of events.
- Host: GitHub
- URL: https://github.com/rpocklin/angular-timeline
- Owner: rpocklin
- License: other
- Created: 2015-01-15T21:26:38.000Z (almost 11 years ago)
- Default Branch: master
- Last Pushed: 2018-04-18T22:45:52.000Z (over 7 years ago)
- Last Synced: 2025-10-13T20:53:32.883Z (about 1 month ago)
- Language: CSS
- Size: 3.28 MB
- Stars: 417
- Watchers: 20
- Forks: 107
- Open Issues: 13
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
- Awesome-JavaScript-Libraries - **Angular Timeline** - driven vertical timeline library for Angular. | JavaScript (Angular) | (UI Components / Timeline)
README
# Angular Timeline
An Angular.js directive that generates a responsive, data-driven vertical timeline to tell a story,
show history or describe a sequence of events.
[](http:/travis-ci.org/rpocklin/angular-timeline)
# Demo
[Demo](http://rpocklin.github.io/angular-timeline/example/index.html)
[Demo without bootstrap](http://rpocklin.github.io/angular-timeline/example/index-no-bootstrap.html)
[Original Implementation (HTML / Javascript)](http://bootsnipp.com/snippets/featured/timeline-responsive)
# NG Docs
[link](http://rpocklin.github.io/angular-timeline/docs/#/api/angular-timeline.directive:timeline)
# Inspiration
[1](http://bootsnipp.com/snippets/featured/two-column-timeline-not-responsive)
[2](http://bootsnipp.com/snippets/featured/timeline-single-column)
[3](http://bootsnipp.com/snippets/featured/single-column-timeline)
[4](http://bootsnipp.com/snippets/featured/timeline-with-images-and-tooltip)
[5](http://bootsnipp.com/snippets/featured/timeline-dotted)
[6](http://codyhouse.co/demo/vertical-timeline/index.html)
## Installation
1. Install the plugin into your Angular.js project, manually or via
`bower install angular-timeline --save`
1. Include `angular-timeline.css` in your app:
``
1. Include `angular-timeline.js` in your app:
``
1. Add `angular-timeline` as a new module dependency in your angular app.
`var myapp = angular.module('myapp', ['angular-timeline']);`
1. To define a timeline, do the following (either manually or using ng-repeat on a dataset):
```javascript
// 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.'
}];
```
```html
{{event.title}}
{{event.content}}
```
There is a bit of markup here but `` is optional.
`` is for the centre line between the two sides, and should represent the event type that occured.
## Notes
- The demo uses [angular-scroll-animate](https://github.com/rpocklin/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 the `ngSanitize` 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:
```html
```
## Running Locally
1. Checkout git repository locally: `git clone git@github.com:rpocklin/angular-timeline.git`
1. `npm install`
1. `bower install`
1. `grunt serve`
1. View `http://localhost:9000/example/` in your browser to see the example.
## Contributing
1. Fork it
1. Create your feature branch (`git checkout -b my-new-feature`)
1. Beautify (`grunt beautify`)
1. Ensure it passes code-checks / tests (`grunt`)
1. Commit your changes (`git commit -am 'Added some feature'`)
1. Push to the branch (`git push origin my-new-feature`)
1. Create a new Pull Request
## History
* 1.7.0 Changed CSS classes to fix animations in and out (in example).
* 1.6.2 Fixed missing logic in passing `side` attribute declaration (was watching parent scope)
* 1.6.1 Added attribute for `side=left` or `side=right` to force left or right-handed columns for timeline events.
* 1.6.0 Changed `hidden` to `timeline-hidden` class in example an `angular-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` to `timeline-event`. Removed `replace = 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
## TODO
- Add some tests
## Thanks
*luisrudge* for the original vanilla JS implementation on [Bootsnipp](http://bootsnipp.com/snippets/featured/timeline-responsive)
## License
Released under the MIT License. See the [LICENSE][license] file for further details.
[license]: https://github.com/rpocklin/angular-timeline/blob/master/LICENSE