<template>
  <div>
		<h2>TimeSpinner Style</h2>
		<div style="margin-bottom:20px">
			<Label for="t1" align="top">Horizontal:</Label>
			<TimeSpinner inputId="t1" v-model="time" spinAlign="horizontal" :inputStyle="inputStyle"></TimeSpinner>
		</div>
		<div style="margin-bottom:20px">
			<Label for="t2" align="top">Vertical:</Label>
			<TimeSpinner inputId="t2" v-model="time" spinAlign="vertical" :inputStyle="inputStyle" style="width:60px;height:90px"></TimeSpinner>
		</div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      time: "08:30",
      inputStyle: {
        textAlign: "center",
        fontSize: "16px"
      }
    };
  }
};
</script>