Anvil Community Forum

Hover, Focus Dependency

I thought I’d make a little add_on to allow anvil components to have events like hover and focus so that you can then run python code

Inspired by the questions:

Adding hover and focus effects

Can't set focus on button

onHover event for Label?

dV2zTilbmC

This is the dependency:
https://anvil.works/build#clone:RMQNDQIAUI4GLXIJ=SY2KLV63DOQUMYGMQVBCYHWV
It adds the method augment to some anvil components

Example:

# augment takes an event name and a function (two functions for hover)
self.link.augment('hover', self.link_hover, self.link_hover_out)

def link_hover(self, event_args={}):
 self.link.text = 'hover'
def link_hover_out(self, event_args={}):
 self.link.text = 'hover_out'

# other events take an event name and a function
self.button.augment('focus',self.button_focus)
self.button.augment('blur', self.button_focusout)

def button_focus(self, event_args={}):
 self.button.text = 'Focus'
 self.button.role =  'secondary-color'
def button_focusout(self, event_args={}):
 self.button.text = 'Lost Focus'
 self.button.role = 'default'

It also adds the augment_trigger method

Example:


def button_click(self, **event_args):
  self.textbox.augment_trigger('select')

For a list of triggers and events see jquery docs
But typical events you might use it for are:
hover, blur (focusout), focus, mouseenter, mouseleave, select

Here’s the Example:
You’ll probably need to add the above dependency before it’ll work
Live Example
https://anvil.works/build#clone:ZWP6UVCVLMT3YBMI=W5CYTVZC2WGZCL2W3Z3ZO2BY

6 Likes

You keep making such awesome add ons!

1 Like

Nice!