Feature Request - QTime - Customizable for inner circle and outer circle

[cyfung1031]

Currently there is only a boolean option format24h for providing the two circles.

However it is not customizable. (e.g. font size for different circles, 12h inside and 24h outside, etc.) To solve this, I would like to have two slots for the two circles.

instead of format24h, add props :formatCircles="[12, 12]" innerCircle has 12 elements and outerCircle has 12 elements

Note: the formatCircles shall be either number or array ( [6]; [6, 6] )

<slot name="innerCircle" :index="index"></slot>
<slot name="outerCircle" :index="index"></slot>

index is between 0 and n-1

<template #innerCircle="{ index }" >
<span class="text-subtitle2" :data-value="index ? index : 12">{{  ( index ? index : 12 )  }}</span>
</template>

<template #outerCircle="{ number }" >
<span class="text-subtitle1" :data-value="index ? index + 12 : 0">{{ pad00( index ? index + 12 : 0 )  }}</span>
</template>

the prop value is the number for the hour/minute/second

Current Apperance with :format24h = "true"

Reference Image:

Remarks: Placing the 1-12 inside can use a larger font size to make contrast to the outer circle.

[JeRabix]

mmm, you have css :) why not just tap on the css selector?