Security News
tea.xyz Spam Plagues npm and RubyGems Package Registries
Tea.xyz, a crypto project aimed at rewarding open source contributions, is once again facing backlash due to an influx of spam packages flooding public package registries.
angular-timeline
Advanced tools
Readme
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)
bower install angular-timeline --save
angular-timeline.css
in your app:<link rel="stylesheet" href="bower_components/angular-timeline/dist/angular-timeline.css"/>
angular-timeline.js
in your app:<script src="bower_components/angular-timeline/dist/angular-timeline.js"></script>
angular-timeline
as a new module dependency in your angular app.var myapp = angular.module('myapp', ['angular-timeline']);
// 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 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:
<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>
git clone git@github.com:rpocklin/angular-timeline.git
npm install
bower install
grunt serve
http://localhost:9000/example/
in your browser to see the example.git checkout -b my-new-feature
)grunt beautify
)grunt
)git commit -am 'Added some feature'
)git push origin my-new-feature
)side
attribute declaration (was watching parent scope)side=left
or side=right
to force left or right-handed columns for timeline events.hidden
to timeline-hidden
class in example an angular-timeline-animations.css
.angular-scroll-animate
from 0.8.0 to 0.9.1.timeline-node
to timeline-event
. Removed replace = true
in directives.luisrudge for the original vanilla JS implementation on Bootsnipp
Released under the MIT License. See the LICENSE file for further details.
FAQs
An Angular.js directive that generates a responsive, data-driven vertical timeline to tell a story, show history or describe a sequence of events.
The npm package angular-timeline receives a total of 959 weekly downloads. As such, angular-timeline popularity was classified as not popular.
We found that angular-timeline demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
Tea.xyz, a crypto project aimed at rewarding open source contributions, is once again facing backlash due to an influx of spam packages flooding public package registries.
Security News
As cyber threats become more autonomous, AI-powered defenses are crucial for businesses to stay ahead of attackers who can exploit software vulnerabilities at scale.
Security News
UnitedHealth Group disclosed that the ransomware attack on Change Healthcare compromised protected health information for millions in the U.S., with estimated costs to the company expected to reach $1 billion.