Toggle visibility of element by chosen element in dropdown

[Kowersky]

Question

Hi. I need to do something such that if "Kilof" is selected in dropdown, the tryb_button is shown, and if "Nożyce" is selected, it is not shown, and also if there is nothing selected in "narzedzie_button", nothing should be shown either.

ui.separator().classes('w-[250px] h-[2px]')
narzedzie_button = ui.dropdown_button('Narzędzie', auto_close=True).classes('items-center')

def update_narzedzie_button(text):
    narzedzie_button.set_text(text)

with narzedzie_button:
    ui.item('Kilof', on_click=lambda: [ui.notify('Wybrano: Kilof'), update_narzedzie_button('Narzędzie: Kilof')]).classes('text-center')
    ui.item('Nożyce', on_click=lambda: [ui.notify('Wybrano: Nożyce'), update_narzedzie_button('Narzędzie: Nożyce')]).classes('text-center')


# TRYB

ui.separator().classes('w-[250px] h-[2px]')
tryb_button = ui.dropdown_button('Tryb', auto_close=True).classes('items-center')

def update_tryb_button(text):
    tryb_button.set_text(text)

with tryb_button:
    ui.item('Tryb 1', on_click=lambda: [ui.notify('Wybrano: Tryb 1'), update_tryb_button('Tryb 1')]).classes('text-center')
    ui.item('Tryb 2', on_click=lambda: [ui.notify('Wybrano: Tryb 2'), update_tryb_button('Tryb 2')]).classes('text-center')
    ui.item('Tryb 3', on_click=lambda: [ui.notify('Wybrano: Tryb 3'), update_tryb_button('Tryb 3')]).classes('text-center')
    ui.item('Tryb 4', on_click=lambda: [ui.notify('Wybrano: Tryb 4'), update_tryb_button('Tryb 3')]).classes('text-center')
    ui.item('Tryb 5', on_click=lambda: [ui.notify('Wybrano: Tryb 5'), update_tryb_button('Tryb 3')]).classes('text-center')

[falkoschindler]

Hi @Kowersky,

Do you mean something like this?

select = ui.select(options=['A', 'B', 'C'])

ui.button('A').bind_visibility_from(select, 'value', value='A')
ui.button('B').bind_visibility_from(select, 'value', value='B')
ui.button('C').bind_visibility_from(select, 'value', value='C')

[Kowersky]

Yes, but I still need to make it so that the second dropdown doesn't show when nothing is selected in narzedzie_button

[python-and-novella]

dict_state = {
    'ele_a':False,
    'ele_b':False,
}
@ui.refreshable
def buttons():
    with ui.dropdown_button('choose element visible'):
        ui.item(['\u3000','\u2714\u0020'][dict_state['ele_a']]+'element a',on_click=lambda :(dict_state.update(ele_a=not dict_state['ele_a']),buttons.refresh()))
        ui.item(['\u3000','\u2714\u0020'][dict_state['ele_b']]+'element b',on_click=lambda :(dict_state.update(ele_b=not dict_state['ele_b']),buttons.refresh()))
buttons()
with ui.dropdown_button('choose element visible'):
    with ui.item():
        ui.switch('element a',on_change=buttons.refresh).bind_value(dict_state,'ele_a')
    with ui.item():
        ui.switch('element b',on_change=buttons.refresh).bind_value(dict_state,'ele_b')
with ui.dropdown_button('choose element visible'):
    with ui.item():
        ui.checkbox('element a',on_change=buttons.refresh).bind_value(dict_state,'ele_a')
    with ui.item():
        ui.checkbox('element b',on_change=buttons.refresh).bind_value(dict_state,'ele_b')
with ui.column():
    ui.button('button a',on_click=lambda e:ui.notify(e.sender.text)).bind_visibility_from(dict_state,'ele_a')
    ui.button('button b',on_click=lambda e:ui.notify(e.sender.text)).bind_visibility_from(dict_state,'ele_b')