@xenialab/angular-clock
v0.7.1
Published
An angular.js clock widget
Downloads
4
Keywords
Readme
Angular Clock Widget
Responsive, beautiful clocks for AngularJS built using SVG
Getting started
Dependencies
This repository contains native AngularJS directives to render a clock face. The only required dependencies are:
- AngularJS (tested with 1.3.14 although it probably works with older versions)
Installation
npm i @xenialab/angular-clock
Alternatively files can be downloaded downloaded from Github.
and copy the files from dist/
. Then add the sources to your code (adjust paths as needed) after
adding the dependencies for Angular first:
<script src="../bower_components/angular/angular.min.js"></script>
<script src="/bower_components/angular-clock/dist/angular-clock.js"></script>
Whichever method you choose the good news is that the overall size is very small: < 4kb for all directives (~1kb with gzip compression!)
As soon as you've got all the files downloaded and included in your page you just need to declare a dependency on the ds.clock
module:
angular.module('myModule', ['ds.clock']);
CSS
You need to include a link to the css file in your page.
<link rel="stylesheet" href="bower_components/dist/angular-clock.css">
If you need the default digital clock font Syncopate
, include this. Else check styling section to use your own font
<link href='//fonts.googleapis.com/css?family=Syncopate:400,700' rel='stylesheet' type='text/css'>
Options
There are several options that you can set as attributes on the directive element
start-time
: init clock with specific time in milliseconds, (default:undefined
)digital-format
: digital clock format in angular date filter format (default:'HH-mm-ss'
). Pass as string enclosed in single quategmt-offset
: shows time for the given GMT offset in clock, (default:false
, shows local time) example: India -> 5.30, Singapore -> 8 , venezula -> -4.30, Nepal -> 5.45show-digital
: shows digital clock, (default:true
if both show-analog &show-digital are not set)show-analog
: shows analog clock, (default:true
if both show-analog &show-digital are not set)show-gmt-info
: shows GMT offset value, (default:false
)theme
: analog clockface theme, (default:light
)
Browser compatibility
For IE8 and older browsers, you will need SVG polyfills and Shims
Example
Markup
<ds-widget-clock theme="dark" show-secs="true" digital-format="'hh:mm:ss a'"></ds-widget-clock>
Reactive & Responsive
angular clock widget is reactive and fully responsive
Issues
Please check if issue exists and otherwise open issue in github
Please add a link to a plunker, jsbin, or equivalent.
Contributing
Pull requests welcome!
- Fork the repo
- Make your changes
- Write unit tests under test directory
- Update examples under examples directory
- Run tests:
npm test
,gulp test
- Submit pull request
Contributors
Thank you!
Author
Designed and built by Deepu K Sasidharan
Inspired from this demo.
License
angular-clock.js is available under the MIT license.