0.0.7 • Published 9 months ago

vue-material-time-picker-gambza v0.0.7

Weekly downloads
-
License
ISC
Repository
github
Last release
9 months ago

🚀 Installation

Install using your package manager of choice:

yarn add vue-material-time-picker

⚙️ Usage

Import the component locally or define it globally and include the css file:

<template>
  <div style="display: flex">
    <time-picker v-model="time" use-seconds />
    {{ time }}
  </div>
</template>

<script lang="ts" setup>
import { ref } from "vue";
import { TimePicker } from "vue-material-time-picker";
import "vue-material-time-picker/dist/style.css";
const time = ref(null);
</script>

📃 Props

NameTypeDefaultDescription
v-modelstringStandard two way input, HH:mm:ss format
disabledbooleanfalseMakes the component uninteractable
readonlybooleanfalseMakes the component uninteractable, but without the style of the disabled variant
use-secondsbooleanfalseAdds an additional step for picking the time
automaticbooleantrueAutomatically switches to the next step when picking the time
hide-titlebooleanfalseHides the time picker title
widthnumber/string290pxSets the width of the element - can be provided as a string like "290px" or "290" or a number, defaults to 290px
full-widthbooleanfalseIgnores the previous width prop and sets the width to 100% of the parent container
colorstring#3ba13bColor of the time picker title and clock hand as well as any active element
customTimestring00:00:00Sets the initial value for the timer.