Lists and List Items

[bobwatcherx]

is there any ui component for listtile and bottom navigation other than having to make it yourself

[falkoschindler]

Can you, please give more information about what you mean with "listtile" and "bottom navigation"?

[bobwatcherx]

listTile Like this is similar to the list on WhatsApp
https://flet.dev/docs/controls/listtile/

and bottom nav like on instagram . to move to home , search and account
https://flet.dev/blog/responsive-row-and-mobile-controls/#navigationbar

actually it can be done manually. but is there anything directly like that. but if you can't . It doesn't matter . this is just a request

[falkoschindler]

ListTile

Currently there is no dedicated NiceGUI element. But since Quasar has QList, you can use the generic ui.element and build something very similar. Here is an example:

with ui.element('q-list').props('bordered separator'):
    with ui.element('q-item'):
        with ui.element('q-item-section'):
            ui.label('Hello World!')
    with ui.element('q-item'):
        with ui.element('q-item-section').props('avatar'):
            ui.element('q-avatar').props('icon=bluetooth')
        with ui.element('q-item-section'):
            ui.label('Bluetooth')
    with ui.element('q-item'):
        with ui.element('q-item-section').props('avatar'):
            ui.element('q-avatar').props('icon=wifi')
        with ui.element('q-item-section'):
            ui.label('WiFi')

Bottom Navigation

Sure, you can put tabs into the page footer:

with ui.footer().classes('justify-center'):
    with ui.tabs() as tabs:
        ui.tab('Home', icon='home')
        ui.tab('About', icon='info')

with ui.tab_panels(tabs, value='Home').classes('w-full'):
    with ui.tab_panel('Home'):
        ui.label('This is the first tab')
    with ui.tab_panel('About'):
        ui.label('This is the second tab')

[falkoschindler]

I'll change the title to focus on Lists and List Items, as bottom navigation is solved.

[v479038280]

Is there a way to expand and collapse the nav items,
Can we integrate such basic components like this navigation into NiceGui? or make it as an official example

[falkoschindler]

@v479038280 Which "nav items" do you mean?
Sure, we would like to integrate these elements. That's why this feature request exists. Would you like to create a pull request?

[v479038280]

Which "nav items" do you mean?

sidebar like this which can be expanded and collapsed

Sure, we would like to integrate these elements. That's why this feature request exists. Would you like to create a pull request?

I want to ,but I haven't done such things before . It may may cost more time than others who are familar with it . I could try

[rodja]

Yes, please go ahead and create a pull request if you think you have something working. But I do not see the connection between the navigation and List/List Item. Please do not hijack existing discussion. If it's another topic, you can always create a new discussion. That way we keep the disorder at bay.

[DaelonSuzuka]

First-class support for QLists with data binding would be awesome.

[elcone]

I'm trying to make my own implementation for q-list, it is a simple one where I can pass a list of objects and create the q-list from them, the part that I don't know how to implement is the active state for the q-item, at this moment I can click and set the props for the q-item and it gets selected, but I'd like to achieve this with a bindable property in the q-list, where I can set the value of the clicked q-item and toggle the state of the q-item elements acordly, here is and example of what I'm trying to do:

from dataclasses import dataclass
from typing import Any, Callable, Optional

from nicegui import ui
from nicegui.client import Client


@dataclass
class ItemData:
    id: str
    label: str
    icon: Optional[str] = None


class Item(ui.element):
    def __init__(
        self,
        tag: str = 'q-item',
        *,
        _client: Client | None = None,
        data: Optional[ItemData] = None,
        on_click: Optional[Callable[..., Any]] = None
    ):
        super().__init__(tag, _client=_client)
        self.data = data
        self.on_click = on_click
        self.setup_ui()

    def setup_ui(self):
        with self:
            if self.data.icon:
                with ui.element('q-item-section').props('avatar'):
                    ui.element('q-avatar').props(f'icon={self.data.icon}')
            with ui.element('q-item-section'):
                ui.label(self.data.label)

        self.on('click', lambda e: self.handle_click(e))

    def handle_click(self, e):
        self.props('active')
        self.on_click(e)


class List(ui.element):
    def __init__(
        self,
        tag: str = 'q-list',
        *,
        _client: Client | None = None,
        data_list: Optional[list[ItemData]] = None,
        on_click: Optional[Callable[..., Any]] = None
    ):
        super().__init__(tag, _client=_client)
        self.data_list = data_list
        self.on_click = on_click
        self.setup_ui()

    def setup_ui(self):
        with self:
            for data in self.data_list:
                item = Item(data=data, on_click=self.on_click)
                item.props('clickable v-ripple')


data_list = [
    ItemData(id='home', label='Home', icon='home'),
    ItemData(id='analytics', label='Dashboard', icon='analytics'),
]

List(data_list=data_list, on_click=lambda e: ui.notify(f'Selected id: {e.sender.data.id}'))

ui.run()

[lpnueg4]

I'm trying to make my own implementation for q-list, it is a simple one where I can pass a list of objects and create the q-list from them, the part that I don't know how to implement is the active state for the q-item, at this moment I can click and set the props for the q-item and it gets selected, but I'd like to achieve this with a bindable property in the q-list, where I can set the value of the clicked q-item and toggle the state of the q-item elements acordly, here is and example of what I'm trying to do:

from dataclasses import dataclass
from typing import Any, Callable, Optional

from nicegui import ui
from nicegui.client import Client


@dataclass
class ItemData:
    id: str
    label: str
    icon: Optional[str] = None


class Item(ui.element):
    def __init__(
        self,
        tag: str = 'q-item',
        *,
        _client: Client | None = None,
        data: Optional[ItemData] = None,
        on_click: Optional[Callable[..., Any]] = None
    ):
        super().__init__(tag, _client=_client)
        self.data = data
        self.on_click = on_click
        self.setup_ui()

    def setup_ui(self):
        with self:
            if self.data.icon:
                with ui.element('q-item-section').props('avatar'):
                    ui.element('q-avatar').props(f'icon={self.data.icon}')
            with ui.element('q-item-section'):
                ui.label(self.data.label)

        self.on('click', lambda e: self.handle_click(e))

    def handle_click(self, e):
        self.props('active')
        self.on_click(e)


class List(ui.element):
    def __init__(
        self,
        tag: str = 'q-list',
        *,
        _client: Client | None = None,
        data_list: Optional[list[ItemData]] = None,
        on_click: Optional[Callable[..., Any]] = None
    ):
        super().__init__(tag, _client=_client)
        self.data_list = data_list
        self.on_click = on_click
        self.setup_ui()

    def setup_ui(self):
        with self:
            for data in self.data_list:
                item = Item(data=data, on_click=self.on_click)
                item.props('clickable v-ripple')


data_list = [
    ItemData(id='home', label='Home', icon='home'),
    ItemData(id='analytics', label='Dashboard', icon='analytics'),
]

List(data_list=data_list, on_click=lambda e: ui.notify(f'Selected id: {e.sender.data.id}'))

ui.run()

@elcone
But the two item in active status at same time, can you help solve this problem?

[falkoschindler]

Great news:
PR #2527 implements ui.list, ui.item, ui.item_section and ui.item_label and will be merged and released shortly.

[falkoschindler]

This feature request has just been released in version 1.4.15. ✔️