How to make a toggle button with niceGUI

[lucasrivas12]

Hi, I’m pretty new to building GUIs and I’m loving NiceGUI so far.
I’m trying to create a toggle button but I’ve had no luck trying to toggle its color by pressing it.
All the examples I have seen so far that update a button prop color do it by pressing (on_click) o modifying (on_change) a different button or slider, but not by pressing itself.
I have already tried to do something like on_click= lambda: self.props(‘background_color:’+colorvariable)
and all sorts of other things like ui.update() etc.
I’m sure it has to be pretty simple, but I can’t get it right.
Thanks for your help In advance!

[rodja]

Try something like this

from nicegui import ui, events

def update_color(e: events.ValueChangeEventArguments):
    e.sender.props(f'color={"green" if e.value else "red"}')

ui.switch(value=True, on_change=update_color).props('keep-color')

ui.run()

The keep-color prop ensures that the color is also shown in the disabled state. See https://quasar.dev/vue-components/toggle#introduction.

[falkoschindler]

If you try to toggle the color of a regular ui.button, the following example might be helpful:

def update_color(e: events.ClickEventArguments):
    color = e.sender._props.get('color', 'red')
    e.sender.props(f'color={"green" if color == "red" else "red"}')

ui.button('Toggle', on_click=update_color).props('color=green')

Here the _props dictionary is used to read the current color. Normally you would probably store the button state in a separate model variable to avoid reaching into the button's internals.