Cancel
Showing results for 
Show  only  | Search instead for 
Did you mean: 

SOLVED: How do I add labels to the tubler

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

Best Answer
0 Votes
5 REPLIES 5

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>

 

 

 

Best Answer
0 Votes

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? 

Best Answer
0 Votes

Have you tried positioning it with CSS?

Best Answer
0 Votes

Thanks for the hint!

Of course it must be placed on the right position

Best Answer
0 Votes

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.

Best Answer
0 Votes