svelte-touch-timepicker
v1.0.0
Published
Native like touch timepicker for Svelte
Downloads
69
Maintainers
Readme
Native like time-picker for Svelte
Installation
npm i svelte-touch-timepicker
Usage
<script>
import TimePicker from "svelte-touch-timepicker"; // 4.38kb gzipped
let time = new Date();
$: _time = time.toLocaleTimeString("en-US");
</script>
<style>
.container{
height: 100%;
width: 100%;
}
.center {
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
font: 20px 'Roboto', sans-serif;
}
</style>
<div class="container" >
<div class="center">
<p>Time: {_time}</p>
<TimePicer bind:time />
</div>
</div>
Default css custom properties
:root{
--svtt-popup-bg-color: white;
--svtt-popup-color: black;
--svtt-popup-radius: 10px;
--svtt-font-size: 20px;
--svtt-button-color: black;
--svtt-button-bg-color: transparent;
--svtt-border: 1px solid grey;
--svtt-button-box-shadow: none;
--svtt-bar-color: grey;
}
Props
| Name | Type | Description | Required | Default |
| --- | --- | --- | --- | --- |
| time
| object
| default date object | yes | new Date()
|
| visible
| Boolean
| Popup visibility | No | false
|
| classes
| String
| custom classes to be add on input | No | empty string
|