Perspective - Icon\Image in Multi-state button

Ignition
1

Hello everyone.
I've been trying recently to create a view with a multi-state button with icons instead of text, as shown here:
image

But I can't seem to find any way of inserting an icon, as is possible with the 'image' property of a regular button. Is there perhaps a way around this or another option\method for multi-state buttons?

Thanks in advance :slight_smile:

2

Try using background images:
states.0.selectedStyle.backgroundImage : url("/system/images/path-to-image.svg")
and do the same for
states.0.unselectedStyle. ...
Repeat for each button option.
Use Tools | Image Management to upload the icons.

If I was to use your application I'd surely appreciate tooltips on your icons. I have no idea what they might mean. The problem is that there is only one tooltip for the whole multistate.

3

Thank you for your advice. FYI now there is tooltip for each state in the multistate button.

Do you think there may be any other method other than background-image? I need to put an icon next to the text. I think it can also be done with background-image, but I was just hoping for simpler solution.

4

Transistor's option is a good one.

Another way to do it is to convert the SVG to CSS (assuming your icon is an SVG) and embed it in a style in the advanced style sheet and using a map transform to select which style to apply.

If you haven't used advanced style sheet before; it's important to understand that your style needs to have a 'psc-' prefix in the style sheet and you don't include that part when you're using the style.

So if your style is defined as 'psc-test' in the advanced style sheet you would add 'test' to the "classes" property in perspective.

There's a real useful website that converts SVGs to embedded CSS. You'll also want to look into various CSS properties that dictate how an SVG renders in your style. There's a ton of interesting options.