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

Change color of checkbox

ANSWERED

Hi folks,

 

i'm looking through the docs, but can't find any reference on how to change the checkbox color in a tile.

In this section the check box item is mentioned: https://dev.fitbit.com/guides/design-guidelines/ui-components/#checkbox-tile, but how can i set the color?

 

Is there something similar for checkboxes like for square buttons?

 

<use id="mybutton" href="#square-button" y="5" fill="fb-red">
    <set href="#text" attributeName="text-buffer" to="Click Me!" />
  </use>

Thanks in advance,

 

Florian

Best Answer
0 Votes
1 BEST ANSWER

Accepted Solutions

You can do it in CSS:

checkbox-tile-screenshot (1).png

.checkbox-tile-image image { fill: fb-cyan }
.checkbox-unselected-color image { fill: fb-red }

 

View best answer in original post

Best Answer
0 Votes
9 REPLIES 9

You can do it in CSS:

checkbox-tile-screenshot (1).png

.checkbox-tile-image image { fill: fb-cyan }
.checkbox-unselected-color image { fill: fb-red }

 

Best Answer
0 Votes

Thanks Jon, works like a charme! 

Best Answer
0 Votes

@JonFitbit One remaining question thematically related to tiles... (don't want to open an extra thread)

I get some strange behavior when hiding tiles from a VirtualTileList component. When i hide

tiles via it's click callback (f.e. in the middle of the list), some tiles (at a shifted position in the list)

are also hidden. I assume that i'm doing something wrong with the list's redraw method or the alignment.

 

GroceryList-screenshot.png

 

 

 

 

 

 

 

this.list = document.getElementById("my-list");

var NUM_ELEMS = 30;
var SATURATION = (Math.random() % 0.5) + 0.5;
var VALUE = (Math.random() % 0.5) + 0.5;
var HUE_CONST = 1.0 / NUM_ELEMS;
var STARTING_POINT = Math.random() * NUM_ELEMS;
var STARTING_POINT = 0;

let tileState = {}

this.list.delegate = {
getTileInfo : function(index) {
var tile_type = "colour-pool"; 
return { 
type : tile_type,
color : that.HSVtoRGB(HUE_CONST * ((index + STARTING_POINT) % NUM_ELEMS), SATURATION, VALUE),
index : index
};
},
configureTile : function(tile, info) {
tile.getElementById('bg').style.fill = info.color;
tile.getElementById('title-text').text = "Part #" + info.index;
tile.info = info;

tileState[info.index] = tile.getElementsByClassName("tile-item-checkbox")[0].value;
tile.getElementsByClassName("tile-item-checkbox")[0].onclick = (evt) => {
tileState[info.index] = !tileState[info.index];
vibration.start("bump");
tile.hide();
//tile.align({alignment: 'bottom', animate: true, redraw: true});
that.list.redraw(true);
};
}
};

Thanks in advance

 

Best Answer
0 Votes

I found this note:

 

// KNOWN ISSUE: It is currently required that VTList.length be set AFTER VTList.delegate
VTList.length = NUM_ELEMS;
Best Answer
0 Votes

Nope... no effect. I already had this in my code. But when hiding a tile from its list (not deleting), it shouldn't effect the list length?! Even if i adapt the length after hiding a tile, the effect occurs Smiley Sad

 

Do you have some details about the insertTile and obtainTile methods? Unfortunately i can't apply these methods on the TileList. 

Best Answer
0 Votes

No hint, how to move on? 😬

 

Best Answer
0 Votes

@JonFitbit

 

I investigated the reason for the odd behavior. The virtual tiles are all instantiated from the predefined tile pool. You can add more tiles via JavaScript, but all visible tiles share the id attribute from the tile pool. Thats why f.e. if hiding a tile at position 0, also the tile at n+tile-pool-length is hidden. Thats logical but also rediculous because there is no chance to apply data binded actions on virtual tiles, as there is no chance to explicit identify them.

Best Answer
0 Votes

I had a chat with some people internally about this.

 

The correct way to "hide" an item in a virtual tile list is to do so in the draw callback, by drawing item N+1 instead of item N. Virtual Tile List does not keep track of hidden / deleted for you, but it is easy enough to do on your own. For example, you could track the visibility in your source data, then don't draw items which aren't visible.

Best Answer
0 Votes

Hello, I am trying to use the checkbox component in an SDK 5.0 application. Can you give me a link to the documentation for this component, if it exists for SDK 5?

Best Answer
0 Votes