Detect word click

Anvil Q&A
2

Hi @paul.k.pallaghy and welcome to the forum,

This will touch on a lot of anvil concepts.

Here’s one way you could do it.

For a component with a click handler it would make sense to use a Link component for each word.
To display the sentence as a sentence you’ll probably want a flow panel.

class Form1(Form1Template):

  def __init__(self, **properties):
    # Set Form properties and Data Bindings.
    self.init_components(**properties)

    text = 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam eleifend feugiat blandit. Aenean ornare lacus nec imperdiet consequat. Vivamus vitae sem convallis, volutpat nisl vitae, posuere massa. Quisque vel orci.'
    # Any code you write here will run when the form opens.
    
    for t in text.split():
      l = Link(text=t, foreground='black', role='word')
      self.flow_panel_1.add_component(l)
      l.set_event_handler('click', self.text_click)
      
  def text_click(self, **event_args):
    print(event_args['sender'].text)

For the hover I used the role above and added the following to theme.css


.anvil-role-word:hover {
    font-weight:bold;
}

fPsNNhIDYV
fPsNNhIDYV983×251 72.9 KB

Here’s the clone

https://anvil.works/build#clone:UANGCJ7SCTVK4CB5=FUDLFHU447FWAHXJDUY3S6RZ

7 Likes