Compound is composed of two or more separate elements and compound-timepicker
happens to be under this category.
compound-timepicker
is a timepicker. It is used to select a single time (hours: minutes) on both mobile and desktop web applications.
The selected time is indicated by the filled circle at the end of each clock hand.
-
Added support for IE11 and Edge in this release:
-
Fixed layout issue on IE11 and Edge.
-
Added my own version of
classList
polyfill for SVG on IE11 and Edge. -
Minor fix on validation of inputs via properties which caused testing to fail.
-
Made changing theme much easier.
-
theme
- To change theme. Available themes:dark-theme
,light-theme
,goog-theme
. -
view
- To change how the timepicker is viewed. Available views:vertical
,horizontal
. -
Inline SVGs with
data URI
. -
Minor update from Google's Material Design.
Example:
<compound-timepicker></compound-timepicker>
<compound-timepicker view="horizontal"></compound-timepicker>
<compound-timepicker theme="dark-theme"></compound-timepicker>
<compound-timepicker hours="23"></compound-timepicker>
<compound-timepicker minutes="59"></compound-timepicker>
<compound-timepicker step="5"></compound-timepicker>
<compound-timepicker time-format="24"></compound-timepicker>
On mobile, pickers are best suited for display in a confirmation dialog. The timepicker can be wrapped inside a paper-dialog
. compound-timepicker-dialog
is created alongside compound-timepicker
to provide a easy-to-use dialog timepicker.
Example:
<compound-timepicker-dialog></compound-timepicker-dialog>
<compound-timepicker-dialog view="horizontal"></compound-timepicker-dialog>
<compound-timepicker-dialog theme="dark-theme"></compound-timepicker-dialog>
<compound-timepicker-dialog hours="23"></compound-timepicker-dialog>
<compound-timepicker-dialog minutes="59"></compound-timepicker-dialog>
<compound-timepicker-dialog step="5"></compound-timepicker-dialog>
<compound-timepicker-dialog time-format="24"></compound-timepicker-dialog>
Style the timepicker with CSS as you would a normal DOM element. Click here to learn more.
## Coming Soon! Generating your own boilerplate code of the compounds
At the end of the demo, there is a section where user can play around with to generate your own boilerplate code with the attributes provided.
-
Install with bower
bower install --save compound-timepicker
-
Load the web component and the dependencies
For compound-timepicker
,
<link rel="import" href="path-to-bower-components/compound-timepicker/compound-timepicker.html">
For compound-timepicker-dialog
,
<link rel="import" href="path-to-bower-components/compound-timepicker/compound-timepicker-dialog.html">
MIT License © Rong Sen Ng