se-timer
Polymer component that shows time in user-defined format, with ability to act like timer
[ This description is mirrored from README.md at github.com/andrewmiroshnichenko/se-timer on 2019-05-10 ]
se-timer
Shows time in certain format and ticks it
Install
$ bower install se-timer
Make sure you have the Polymer CLI installed. Then run polymer serve
to serve your element locally.
Viewing component
$ polymer serve
Running tests
$ polymer test
API
Component have four public properties.
- Value
Property name | value |
Property type | Number |
Default value | 0 |
Can be set from html | Yes |
Corresponding attribute | value |
Number of milliseconds that should be reflected in the display. Value can’t exceed 359999999(which equivalents ‘99:59:59.999’). After reaching higher value component’s ‘state‘ will be explicitly set to ‘stop’.
<se-timer value="1234"></se-timer>
var customEl = document.querySelector('se-timer');
customEl.value; // returns Number 1234
customEl.value = 10000;
customEl.value; // returns Number 10000
<se-timer>10:10:10</se-timer>
var customEl = document.querySelector('se-timer');
customEl.value; // returns Number 36610000
- timerStep
Property name | timerStep |
Property type | Number |
Default value | 500 |
Can be set from html | Yes |
Corresponding attribute | timer-step |
Frequency of polling of current time and, subsequently, displayed time updating in count
state. Change of this property in count
state won’t take effect. New value will be applied only after state will become stop
at least once after change occurred.
<se-timer timer-step="100"></se-timer>
var customEl = document.querySelector('se-timer');
customEl.timerStep; // returns Number 100
customEl.timerStep = 120;
customEl.timerStep; // returns Number 120
- State
Property name | state |
Property type | String |
Default value | 'stop' |
Can be set from html | Yes |
Corresponding attribute | state |
State of the component. Two possible values are:
count
. In this state value is increasing everytimerStep
milliseconds;stop
. In this state value isn’t changing.
<se-timer></se-timer>
var customEl = document.querySelector('se-timer');
customEl.state; // returns String 'stop'
customEl.state = 'count';
customEl.state; // returns String 'count'
- Format
Property name | format |
Property type | String |
Default value | 'hh:mm:ss' |
Can be set from html | Yes |
Corresponding attribute | format |
Format of output data. Seven formats are supported:
hh
. Displays hours (value interval from 00 to 99);hh:mm
. Displays hours (value interval from 00 to 99) and minutes (value interval from 00 to 59);hh:mm:ss
. Displays hours (value interval from 00 to 99), minutes (value interval from 00 to 59) and seconds (value interval from 00 to 59);hh:mm:ss.ms
. Displays hours (value interval from 00 to 99), minutes (value interval from 00 to 59), seconds (value interval from 00 to 59) and milliseconds (value interval from 000 to 999);mm:ss
. Displays minutes (value interval from 00 to 59) and seconds (value interval from 00 to 59);mm:ss.ms
. Displays minutes (value interval from 00 to 59), seconds (value interval from 00 to 59) and milliseconds (value interval from 000 to 999);ss.ms
. Displays seconds (value interval from 00 to 59) and milliseconds (value interval from 000 to 999);
<se-timer format="hh"></se-timer>
var customEl = document.querySelector('se-timer');
customEl.format; // returns String 'hh'
customEl.format = 'hh:mm:ss:ms';
customEl.format; // returns Number 'hh:mm:ss:ms'
Styling
The following custom properties are available for styling:
Custom property | Description | Default |
---|---|---|
--setimer-number-color |
Timer digits color | Browser-default(black) |
--setimer-number-size |
Font size of timer digits. This param changes component dimensions | 45px |
--setimer-background-color |
Component's background color | transparent |
--setimer-font-family |
Font family of digits | Roboto, sans-serif |
Demo
Better view on webcomponentsjs.org <!--
<custom-element-demo>
<template>
<script src="../webcomponentsjs/webcomponents-lite.js"></script>
<link rel="import" href="se-timer.html">
<next-code-block></next-code-block>
</template>
</custom-element-demo>
-->
<se-timer value="60000" state="count" timer-step="100" format="mm:ss.ms"></se-timer>
Links
Compatibility
Was this helpful? Need more help?
Leave a comment or a question below. You can also join
the chat on Discord or
ask questions on StackOverflow.
Version
Dependencies
Polymer/polymer#^2.0.0-rc.2
- Released
- 2017-07-25
- Maturity
- TESTED
- License
- Apache License 2.0
Compatibility
- Framework
- Polymer 2.0+
- Browser
- Browser Independent
se-timer - Vaadin Add-on Directory
Polymer component that shows time in user-defined format, with ability to act like timerView on GitHub
Issue tracker
Documentation
Online Demo
se-timer version 1.0.0
### Dependencies
Polymer/polymer#^2.0.0-rc.2
se-timer version 1.0.1
### Dependencies
Polymer/polymer#^2.0.0-rc.2
se-timer version 1.0.2
### Dependencies
Polymer/polymer#^2.0.0-rc.2