Color Picker Persistence, Setting Props in General

[Kriegbaum]

Hi Folks!
I'm just getting started with NiceGui, evaluating whether its going to do everything I need for a project.
I have a project for controlling lights and a color picker, slider, and switch are all basic components of an individual light control.

To that end, I would like to have a color picker as a persistent UI element that doesn't disappear when you click away from it. I read the docs on this element and gathered that the disappearing behavior comes from the q_menu part of this element.

I set auto-close to False. I'm a little unclear how you get a False boolean value into a prop:

picker = ui.color_picker(value=True)
picker.props('auto-close=False')

Gets me the string 'False' assigned to this prop in the dictionary. I needed to do

picker = ui.color_picker(value=True)
picker._props['auto-close'] = False

To get this value into props like I wanted it

I found this property from the Quasar docs for QMenu:

persistent
: Boolean
Description
Allows the menu to not be dismissed by a click/tap outside of the menu or by hitting the ESC key; Also, an app route change won't dismiss it

Which looks like exactly what I'm looking for. Setting that property picker.props('persistent') appears to have no effect as well.
Just for kicks, I tried applying all these things to picker.q_color as well and I didn't see any effect.

The closest thing I have right now is to do picker.bind_value_from(picker_visible, 'visible') where 'visible' is a value that's always True. This causes the picker to disappear for a moment and then reappear every time I click on something.

I'm overall having very hit and miss results trying to apply props from the Quasar docs to NiceGui elements. Is there some other methodology that is preferred for doing stuff like this?

[falkoschindler]

Hi @Kriegbaum,

What's wrong with ui.color_picker(value=True).props('persistent')? For me it remains visible as expected.

But maybe ui.color_picker is not what you want. It still is a QColor inside a menu after all which might cause layout issues on your page. For a persistent color element it might be easier to use the raw QColor component like this:

ui.element('q-color').on('change', lambda e: print(e.args))