ui.list "current selection" implementation

[dridk]

First Check

• I added a very descriptive title here.
• I have checked the FAQs for a similar question and didn't find it.
• I used the GitHub search to find a similar question and didn't find it.
• I searched the NiceGUI documentation, with the integrated search.
• I already searched online "How to X in NiceGUI" and didn't find any information.

Example Code

from nicegui import ui 

current_index_slider = ui.slider(0, min=0, max=10)
data = ["hello", "test", "truc", "trac"] 

with ui.list().props('dense separator'):
    for i in data:
         ui.item(i).classes("bg-green if current_index else bg-white") 

ui.run()

Description

Hi,

I would like to know how to display current item selection . For instance, when you click on an item , or if you select the current index from a slider, the current item must display green background.
It is not straightforward because there is no binding on classes.

NiceGUI Version

3.3.1

Python Version

3.13.2

Browser

Firefox

Operating System

Linux

Additional Context

No response

[falkoschindler]

Hi @dridk,

Here are three possible approaches to choose from:

1. Wrap your ui.list in a refreshable function and refresh it whenever the slider value changes:

   data = ['one', 'two', 'three']
   slider = ui.slider(value=0, min=0, max=len(data) - 1, step=1)
   
   @ui.refreshable
   def list_ui():
       with ui.list().props('dense separator'):
           for index, name in enumerate(data):
               ui.item(name).classes('bg-green' if index == slider.value else '')
   
   list_ui()
   slider.on_value_change(list_ui.refresh)

2. Register a value change event handler for every individual list item:

   data = ['one', 'two', 'three']
   slider = ui.slider(value=0, min=0, max=len(data) - 1, step=1)
   
   with ui.list().props('dense separator'):
       for index, name in enumerate(data):
           item = ui.item(name).classes('bg-green' if index == slider.value else '')
           slider.on_value_change(
               lambda e, item=item, index=index: item.classes(replace='bg-green' if index == slider.value else '')
           )

3. Use the "active" prop (which can be bound) instead of classes and define the design of an active item with some custom CSS:

   data = ['one', 'two', 'three']
   slider = ui.slider(value=0, min=0, max=len(data) - 1, step=1)
   
   ui.add_css('.q-item--active { background-color: #4caf50; color: inherit; }')
   
   with ui.list().props('dense separator'):
       for index, name in enumerate(data):
           item = ui.item(name)
           binding.bind_from(item.props, 'active', slider, 'value', backward=lambda value, index=index: value == index)

[dridk]

Can I bind all props as you did ?

[falkoschindler]

Yes, props is basically a dictionary and you can bind its values using the corresponding key.
Note that Boolean props are usually added without a value like ui.button().props('flat'). But internally it translates to props['flat'] = True.