pythonnicegui

nicegui rendering ui in the background


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)

the image is what I currently get


Solution

  • 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()