Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Allow using ui.menu for custom context menus #747

Closed
3 tasks done
falkoschindler opened this issue Apr 13, 2023 · 0 comments
Closed
3 tasks done

Allow using ui.menu for custom context menus #747

falkoschindler opened this issue Apr 13, 2023 · 0 comments
Assignees
Labels
enhancement New feature or request
Milestone

Comments

@falkoschindler
Copy link
Contributor

falkoschindler commented Apr 13, 2023

Description

On Reddit we've been asked how to create a custom context menu with NiceGUI. Theoretically, it should be possible to use QMenu's context-menu and touch-position props:

with ui.image('https://picsum.photos/id/377/640/360').classes('w-96'):
    with ui.menu().props('context-menu touch-position'):
        ui.menu_item('Copy')
        ui.menu_item('Delete')

But this does not work for two reasons:

  • We need to activate the parent event (see Remove no-parent-event prop for ui.menu #713). As a workaround we can remove the no-parent-event prop: ui.menu().props(..., remove='no-parent-event').
  • We need to deactivate the loopback. As a workaround we can write ui.menu.LOOPBACK = False.

To simplify the API, we want to

As an alternative workaround one can simply use ui.element('q-menu') (without value events and binding):

with ui.image('https://picsum.photos/id/377/640/360').classes('w-96'):
    with ui.element('q-menu').props('context-menu touch-position'):
        ui.menu_item('Copy')
        ui.menu_item('Delete')
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
enhancement New feature or request
Projects
None yet
Development

No branches or pull requests

1 participant