Widget Enhancement Suggestions

[shakamoushie]

From the widgets I have tried so far, here are my suggestions:

1. Password Widget: There should be a way for me to confirm my entered Password by seeing the password I just typed. Usually, password widgets come with an icon at the right corner of the widget, that toggles you from '*' to your password.
2. Dropdowns:
   a. Can there be a search-as-you-type feature within the dropdown? That would be needed for long dropdowns.
   b. Can an element be added to the dropdowns in case it does not exist in the list of elements? much like a combobox?
3. Links: The ability to add an image instead of link text
4. Slider: The widget can show the min and max, and the slider circle can show the value
5. A YouTube presence demonstrating snippets of code used with widgets would greatly help all newbies

Thanks in advance

[falkoschindler]

Thanks for your feedback, @shakamoushie!

Let me try to answer your questions one by one:

1. You can hide passwords using Quasar's type prop. And similar to their "Password with toggle" example we can add an icon to the "append" slot and toggle the input type on click:

   with ui.input(label='Test').props('type=password') as password:
       with password.add_slot('append'):
           def toggle_type(_):
               is_hidden = password._props.get('type') == 'password'
               icon.props(f'name={"visibility" if is_hidden else "visibility_off"}')
               password.props(f'type={"text" if is_hidden else "password"}')
           icon = ui.icon('visibility_off').classes('cursor-pointer').on('click', toggle_type)

   It would be very nice to have this readily available in NiceGUI. Therefore I created
   Better support for password input #271 to implement this feature for ui.input.

2. a. A search-as-you-type feature would be nice. I created Provide search-as-you-type within the options of ui.select #272.

   b. You can already change the options of a ChoiceElement (ui.select, ui.radio, ui.toggle). Here is an example:

   select = ui.select(['A', 'B', 'C'], on_change=lambda e: ui.notify(e.value))
   
   def add_option():
       select.options.append('D')
       select.update()
   
   ui.button('Add another option', on_click=add_option)

   Because there is (currently) no way for select to notice changes in the list select.options, you need to manually call select.update() after changing options.

3. Links can be used to wrap other objects like images:

   with ui.link(target='https://www.google.com/'):
       ui.image('https://www.google.com/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png').classes('w-32')

4. You can use Quasar's prop "label-always" to show the current value above the circle.

   For showing the minimum and maximum value there doesn't seem to be a built-in solution. But maybe it's good enough to place a ui.label next to it:

   with ui.row().classes('items-center no-wrap w-40 mt-4'):
       ui.label('0')
       ui.slider(min=0, max=10, value=5).props('label-always')
       ui.label('10')

5. Of course, it would be great to demonstrate NiceGUI's features on YouTube. Currently we just don't have the time and resources to do that. But maybe someone from the community might support us providing tutorials and demonstrations, either in written articles or on YouTube.

[shakamoushie]

Hi @falkoschindler, all the code examples work flawlessly. Thank you.

Let me get a bit more familiar with NiceGUI, I will write some stuff that other learners can use.

Thank you once again for creating such a nice python library.

Cheers