How do I rotate something using code?

Anvil Q&A
1

How do I rotate an component (eg make a plus sign a times sign by rotating 90 degrees), specifically a link, on click?

2

You could create a role for normal and a role for rotated, create a simple css entry for each, and then change the component method in code.

Give me ten minutes and will edit this and put in example code, just baking cakes…

Post Baking EDIT:

Add a role called normalway and one called rotatedway in the IDE.

Pop into your theme.css and add:

.anvil-role.normalway {
  transform: rotate(0deg);
}

.anvil-role.rotatedway {
  transform: rotate(90deg);
}

Then, in your client code set the component’s method as normal in your form_show:

def form_show(self,**args):
   self.mything.role = "normalway"

Then you can have your change event do:

def mychangeevent(self,**args):
   self.mything.role = "rotatedway"

and so forth.

Haven’t tested this as am busy cramming cakes into my mouth, but you get the idea.

2 Likes
3

Alternatively, you can also do it using code

def rotate(comp,degree):
   from anvil.js import get_dom_node
   get_dom_node(comp).style.transform=f'rotate({degree})'
4

Note, that would be ±45°.

2 Likes
5

Not sure what the intention is here and I might be completely off track but if you are trying to change an icon in a label or button or link from a + to a x you can do this from code in the click handler.

def my_link_click (self, **event_args):
  my_link.icon = "fa:times"

You could also do the same for the text property

2 Likes