ui.list

列表

基于 Quasar 的 QList 组件的列表元素。它为列表项提供了一个容器。

from nicegui import ui

with ui.list().props('dense separator'):
    with ui.item():
        with ui.item_section():
            ui.item_label('3 Apples')
    with ui.item():
        with ui.item_section():
            ui.item_label('5 Bananas')
    with ui.item():
        with ui.item_section():
            ui.item_label('8 Strawberries')
    with ui.item():
        with ui.item_section():
            ui.item_label('13 Walnuts')

# ui.run()

列表项、分区和标签

列表项使用项目分区来组织其内容。根据属性的不同，项目标签的位置也不同。

from nicegui import ui

with ui.list().props('bordered separator'):
    ui.item_label('Contacts').props('header').classes('text-bold')
    ui.separator()
    with ui.item(on_click=lambda: ui.notify('Selected contact 1')):
        with ui.item_section().props('avatar'):
            ui.icon('person')
        with ui.item_section():
            ui.item_label('Nice Guy')
            ui.item_label('name').props('caption')
        with ui.item_section().props('side'):
            ui.icon('chat')
    with ui.item(on_click=lambda: ui.notify('Selected contact 2')):
        with ui.item_section().props('avatar'):
            ui.icon('person')
        with ui.item_section():
            ui.item_label('Nice Person')
            ui.item_label('name').props('caption')
        with ui.item_section().props('side'):
            ui.icon('chat')

# ui.run()