03-10-2020 09:24 - edited 03-11-2020 13:37
03-10-2020 09:24 - edited 03-11-2020 13:37
How could I add a label to the tubler as shown in the UI components
https://dev.fitbit.com/build/guides/design-guidelines/ui-components/
There is a Picture with a tumbler 12m 15s
I have no way found how to do this
03-10-2020 14:23
03-10-2020 14:23
It seems that the Timer app puts a label after the tumbler-views
<use id="min-tumbler" href="#tumblerview">
...
</use>
<use id="min-label" href="#tumbler-label">
<set href="#text" attributeName="text-buffer" to="m" />
</use>
<use id="sec-tumbler" href="#tumblerview">
...
</use>
<use id="sec-label" href="#tumbler-label">
<set href="#text" attributeName="text-buffer" to="s" />
</use>
03-11-2020 02:39
03-11-2020 02:39
I did as you told but there is no label displayed
<svg id="inividual" display="none">
<use id="tumblermin" href="#tumblerview" x="0" y="49">
<rect width="174" height="250" x="0" y="0" />
<use id="item0" href="#tumbler-item">
<text id="my-value" class="my-item">01</text>
</use>
<use id="item1" href="#tumbler-item">
<text id="my-value" class="my-item">02</text>
</use>
<use id="item2" href="#tumbler-item">
<text id="my-value" class="my-item">03</text>
</use>
<use id="item11" href="#tumbler-item">
<text id="my-value" class="my-item">12</text>
</use>
</use>
<use id="min-label" href="#tumbler-label">
<set href="#text" attributeName="text-buffer" to="m" />
</use>
<use id="tumblersec" href="#tumblerview" x="174" y="49">
<rect width="174" height="250" x="0" y="0" />
<use id="item0" href="#tumbler-item">
<text id="my-value" class="my-item">00</text>
</use>
<use id="item1" href="#tumbler-item">
<text id="my-value" class="my-item">01</text>
</use>
<use id="item58" href="#tumbler-item">
<text id="my-value" class="my-item">58</text>
</use>
<use id="item59" href="#tumbler-item">
<text id="my-value" class="my-item">59</text>
</use>
</use>
<use id="sec-label" href="#tumbler-label">
<set href="#text" attributeName="text-buffer" to="s" />
</use>
</svg>
Maybe I did something wrong?
03-11-2020 12:48
03-11-2020 12:48
Have you tried positioning it with CSS?
03-11-2020 13:37
03-11-2020 13:37
Thanks for the hint!
Of course it must be placed on the right position
03-13-2020 13:59
03-13-2020 13:59
A last hint
<use id="min-label" href="#tumbler-label" x="33%" y="45%" width="17%">
<text id="min-labeltxt" font-size="45" class="my-item">m</text>
</use>
use this because in this case it's possible to change the font size.