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

Extensive list of available components and CSS classes

I'm pretty fresh to Fitbit development so I might be missing something obvious. But I can't seem to find extensive lists of all available SVG components and CSS classes.

Surely some components are mentioned and described in detail in https://dev.fitbit.com/build/guides/user-interface/svg-components/ but browsing examples I see many components that are not mentioned on that page, such as static-image, square-button, mixed-text-center-mid, header/text, copy/text and so on and so forth.

 

For the CSS classes (such as dialog-half-button-left, ...) a handful are mentioned in https://dev.fitbit.com/build/guides/user-interface/css, but this seems to be only a fraction of the entire stylesheet available.

Also there seem to be a bunch of non-standard SVG attributes, such as system-events and shortcut. Are these listed anywhere?

 

A similar question has been asked in 2017 here: https://community.fitbit.com/t5/SDK-Development/List-of-components-and-objects-that-can-be-imported/... and an update was promised to be coming soon. I suppose that updates is the aforementioned documentation site, but that seems to be far from complete.

 

How do you guys find your way around this? Is there some possibility to just browse the directory from which all those components are apparently imported (/mnt/sysassets/)?

 

Best Answer
0 Votes
1 REPLY 1

Well, to partly answer that myself. Actually yes, all those resource definitions can be found somewhere, if you install the device simulator:

<install_dir>\resources\static\devicesim\win\<target_platform>\Resources

By default on windows install_dir is C:\Users\<username>\AppData\Local\Programs\@fitbitsimulator

 

Hopefully this is helpful to others as well.

Best Answer