List

Previous Next

List

List

A container that displays rows of data in a single scrollable column. List provides native list styling including row separators and is optimized for displaying collections of items.

Unlike a VStack inside a ScrollView, List offers a more native appearance suited for settings screens, menus, and data tables. It is commonly used together with Section for grouped content.

Constructor

nib.List(
    controls=None,
    **modifiers,
)

Parameters

Parameter Type Default Description
controls list[View] None Child views displayed as rows. Can contain individual views or Section views for grouped content with headers and footers.
**modifiers Common view modifiers: padding, background, foreground_color, opacity, width, height, etc.

Methods

Method Description
scroll_to(target, anchor=None) Scroll so target is visible. target is a Ref, a view or a node id and must be a direct child. anchor is "top", "center" or "bottom".
scroll_to_top() Scroll to the top or leading edge.
scroll_to_bottom() Scroll to the bottom or trailing edge.

Examples

Simple item list

list_simple_item_list

import nib


def main(app: nib.App):
    app.title = "Groceries"
    app.icon = nib.SFSymbol("cart")
    app.width = 260
    app.height = 250

    def item(name, icon):
        return nib.Label(name, icon=icon)

    app.build(
        nib.List(
            controls=[
                item("Apples", "applelogo"),
                item("Bread", "birthday.cake"),
                item("Coffee beans", "cup.and.saucer"),
                item("Milk", "drop"),
                item("Pasta", "fork.knife"),
            ],
            height=190,
            width=240,
        )
    )


nib.run(main)

List with sections

Group related items with Section to add headers and footers.

list_list_sections

import nib


def main(app: nib.App):
    app.title = "Devices"
    app.icon = nib.SFSymbol("laptopcomputer.and.iphone")
    app.width = 280
    app.height = 300

    app.build(
        nib.List(
            controls=[
                nib.Section(
                    controls=[
                        nib.Label("MacBook Pro", icon="laptopcomputer"),
                        nib.Label("Studio Display", icon="display"),
                    ],
                    header="This Mac",
                ),
                nib.Section(
                    controls=[
                        nib.Label("iPhone", icon="iphone"),
                        nib.Label("AirPods Pro", icon="airpodspro"),
                        nib.Label("Apple Watch", icon="applewatch"),
                    ],
                    header="Nearby",
                ),
            ],
            height=250,
            width=260,
        )
    )


nib.run(main)
ScrollView Section