Using theme and custom module with Switch

Hi Guys,

For best practice, I'm trying to minimize the codes and the style as minimum inside the Canvas. for that purpose I started learning to use theme and custom module (I'm still too far thou).

so I was thinking, if I have a Switch widget with 10 values, and this Switch is sending out different cc messages on the selection of its values. how it will look like in the Custom Module?

Wait wait, not only that :crazy_face:

If that switch needs to have styles and images, how can that be applied through the theme file?

this is an example:
css Use Case.json (5.0 KB)

Hello,

Not sure what you want it to do. If the switch is only sending CC messages, no need to use custom module in this situation in my opinion.

If you're using the same code over a bunch of widgets, then re-using the same classes is a big deal.
Not sure if the Theme file is the best choice.
As an alternative, now you can use IMPORT{filename} Advanced syntaxes - Open Stage Control inside the CSS (or any) prop.
This way you can structure your styles in different external files.

I took a look at your session and made a couple of changes.

  1. I removed the calc to center the switch widget, and used Horizontal layout in the panel, adding 20 padding to it. Same result, but simpler in my opinion;
  2. Since you have a pattern setting background images to switch values, I put them into a JS{} block. This reduces the amount of repeated code and makes reading it a lot easier;

css Use Case.json (4.2 KB)
I hope it helps,
Cheers

Thank you @ClelsonLopes for your response, these are really useful information.

So as I mentioned at the beginning I'm practicing using custom module and theme file.

You are right, for that example itself I don't need the custom module, and the wonderful adjustments to the css are absolutely enough, but its not about that example, its about practicing the custom module and theme. you know, if someone new to something, then he needs to start with small example first, so he can understand whats going on.