0

I want to change the icon of the default checkbox widget with ones available from: material.io/resources/icons/

E.g. 'keyboard_arrow_right' before click (or value change) and 'keyboard_arrow_down' after click (value change).

How can I achieve this?

The reason I want to do this is because I want to take advantage of binding the visibility of other UI elements so that they hide / unhide on value change. (This is easy and there is an example in Material Gallery official Google template).

I want to change the icon because of UX reasons.

Alternatively I'd use a button (icon). I don't know how to make it work that way.

3
  • Ok, so you are wanting to change the check mark inside a checkbox so that it displays a right arrow when value is false and a down arrow when value is true? I'm just trying to understand your question better, because the purpose of a check box is to show as 'checked' when value is true and 'unchecked' when value is false, so changing the 'icon' to different direction arrows could be somewhat misleading conceptually speaking. Sep 6, 2019 at 19:57
  • Indeed, I understand it can be misleading. That is not a problem since I want to exploit the easy implementation of the hide elements I gave an example with. I want to use the arrows as dropdown indicators so when a used clicks he unhides the element which visibility is bound to the value of the switch. Sep 6, 2019 at 20:11
  • I would recommend implementing the checkbox switch style which is a style variant that you can select directly on the widget, or using an icon switch with an example provided below. Sep 6, 2019 at 20:23

1 Answer 1

0

To use an icon button to get this accomplished, set a default value in the button text field for how you want the button icon to initially appear which should match whatever state you want the details to appear in, i.e. hidden or unhidden.

Bind the visibility of your hide/unhide element(s) to @widget.root.descendants.YourButton.text === 'keyboard_arrow_down' and then put the following in the onClick event of the button:

if (widget.text === 'keyboard_arrow_right') {
  widget.text = 'keyboard_arrow_down';
} else {
  widget.text = 'keyboard_arrow_right';
}

So if you set your button text property to 'keyboard_arrow_right' in this setup, then your elements/details would be hidden on page load.

2
  • I am most thankful for the advice! I will implement it asap. Sep 6, 2019 at 20:35
  • Your advice worked flawlessly! I am most thankful! Have a great and awesome weekend, friend! Sep 6, 2019 at 20:48

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.