Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/motss/compound-timepicker

A custom timepicker element built from scratch with Polymer 1.4
https://github.com/motss/compound-timepicker

Last synced: 27 days ago
JSON representation

A custom timepicker element built from scratch with Polymer 1.4

Host: GitHub
URL: https://github.com/motss/compound-timepicker
Owner: motss
Created: 2015-09-30T16:20:15.000Z (over 9 years ago)
Default Branch: master
Last Pushed: 2016-03-30T06:30:49.000Z (almost 9 years ago)
Last Synced: 2024-11-16T23:04:53.131Z (about 2 months ago)
Language: HTML
Homepage: https://motss.github.io/compound-timepicker/components/compound-timepicker/
Size: 2.71 MB
Stars: 7
Watchers: 3
Forks: 1
Open Issues: 2
Metadata Files:
- Readme: README.md

Awesome Lists containing this project

README

[![GitHub version](https://badge.fury.io/gh/motss%2Fcompound-timepicker.svg)](https://badge.fury.io/gh/motss%2Fcompound-timepicker)
[![Bower version](https://badge.fury.io/bo/compound-timepicker.svg)](https://badge.fury.io/bo/compound-timepicker)
[![Build Status](https://travis-ci.org/motss/compound-timepicker.svg?branch=master)](https://travis-ci.org/motss/compound-timepicker)

compound-timepicker
============
![timepicker-light-theme](https://cloud.githubusercontent.com/assets/10607759/14107444/cd2f5b8a-f5ea-11e5-8d31-81e71ab7b2d2.png)
![timepicker-dark-theme](https://cloud.githubusercontent.com/assets/10607759/14107445/cd675a30-f5ea-11e5-8d1d-dcdd6f5785ae.png)
![timepicker-goog-theme](https://cloud.githubusercontent.com/assets/10607759/14107446/cd897c14-f5ea-11e5-8aab-4f2bfd696a49.png)

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.

### Update (v0.5.0)
- 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:

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:

## Styling

Style the timepicker with CSS as you would a normal DOM element.
Click [here](http://motss.github.io/compound-timepicker/components/compound-timepicker/index.html#styling) 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.~~

## Getting Started

1. Install with bower
`bower install --save compound-timepicker`

2. Load the web component and the dependencies

For `compound-timepicker`,

```html

```
For `compound-timepicker-dialog`,

```html

```

## License