I have an app of 3 tabs from which you can switch around, and with each tab, there is a button says 'help'. when you click it, there will be a window pops up with a little help info along with some text in 'label' appended to the page. The order that they appear is critical.
I used the await approach to get the effect that I wanted. But the thing is that I will have to click on the first tab's button in order to get the rest of tabs to render and be clickable. I really want them to be rendered together, that way the user can choose which tab to click.
with ui.tab_panels(tabs=tabs, value=cleanup_data).classes('w-full'):
with ui.tab_panel(cleanup_data):
ui.label('lorem').set_visibility(False)
a = ui.button('help?', on_click=test)
await a.clicked()
ui.label('lorem').set_visibility(True)
with ui.tab_panel(change_data):
ui.label('lorem').set_visibility(False)
b = ui.button('help?', on_click=test)
await b.clicked()
ui.label('lorem').set_visibility(True)
with ui.tab_panel(move_data):
ui.label('lorem').set_visibility(False)
c = ui.button('help?', on_click=test)
await c.clicked()
ui.label('lorem').set_visibility(True)
Don't use a.clicked
but change visibility inside function assigned to button
It may need to assign label to (unique) variable and add it as parameter to function (using lambda
)
help_1 = ui.label('First help') # unique variable
help_1.set_visibility(False)
ui.button('Toggle help', on_click=lambda event:toggle_help(event, help_1))
help_2 = ui.label('Second help') # unique variable
help_2.set_visibility(False)
ui.button('Toggle help', on_click=lambda event:toggle_help(event, help_2))
def toggle_help(event, item):
item.visible = not item.visible
Minimal working code which I used for tests. It toggles visibility (hide/show)
from nicegui import ui
def toggle_help(event, item):
#print(event)
#print(item)
#print(dir(item))
#visibility = item.get_visibility() # function doesn't exist
#visibility = not item.visible # toggle from `True` to `False` or from `False` to `True`
#item.set_visibility(visibility)
item.visible = not item.visible
with ui.tabs().classes('w-full') as tabs:
one = ui.tab('One')
two = ui.tab('Two')
with ui.tab_panels(tabs, value=one).classes('w-full'):
with ui.tab_panel(one):
ui.label('First tab')
help_1 = ui.label('First help') # unique variable
help_1.set_visibility(False)
ui.button('Toggle help', on_click=lambda event:toggle_help(event, help_1))
with ui.tab_panel(two):
ui.label('Second tab')
help_2 = ui.label('Second help') # unique variable
help_2.set_visibility(False)
ui.button('Toggle help', on_click=lambda event:toggle_help(event, help_2))
ui.run()