How to create tabs in NiceGUI 1.1?

[JS-Aibel]

Hi,

I am looking for a more single-page application approach for my GUI, and for that, tabs would be nice to have.
In this post #133 (comment) you are showing how to create tabs in NiceGui.

1. How do we give the different tabs content?

2. Is it possible to use “Q-tabs” within the NiceGui Page Layout?
NiceGUI
Layout Header and Footer | Quasar Framework

single-page application
I think having the option to use tabs will make it easier to design a single-page application (SPA). SPAs will in my opinion be a good fit when NiceGui start supporting desktop, ref. Provide Desktop Mode · Discussion #89 · zauberzeug/nicegui (github.com)

[falkoschindler]

Here is a minimum example combining QTabs with QTabPanels. Using a generic event subscription .on('update:model-value', ...) we can handle tab changes and set the new model-value for both the tabs and the panels:

def handle_change(msg: dict) -> None:
    name = msg['args']
    tabs.props(f'model-value={name}')
    panels.props(f'model-value={name}')

with Element('q-tabs').on('update:model-value', handle_change) as tabs:
    for name in ['A', 'B', 'C']:
        Element('q-tab').props(f'name={name} label={name}')

with Element('q-tab-panels').props('model-value=A animated') as panels:
    for name in ['A', 'B', 'C']:
        with Element('q-tab-panel').props(f'name={name}'):
            ui.label(f'Content of {name}')

Tabs and panels can be placed independently of each other. So you can wrap the tabs with a with ui.header():.

[rodja]

I just pushed a new example combining a foldable menu with tabs: 5e1610b. Still, on this issue we should think about a nicer integration of tabs.

[rbeeli]

+1 A very important component IMO. Good stuff.

[falkoschindler]

I implemented an API for tabs and tab panels on the tabs branch.

You can try it out as follows:

with ui.tabs() as tabs:
    ui.tab('Home', icon='home')
    ui.tab('About', icon='info')

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

[rodja]

Great! Merged into main.

[rafo]

@falkoschindler So the Example should be modified?

[falkoschindler]

@rafo What example do you mean? Why should it be modified?

[rafo]

@falkoschindler Sorry, pasted the wrong link. Should be https://github.com/zauberzeug/nicegui/blob/main/examples/menu_and_tabs/main.py

I will fix my #251 (comment)

[rafo]

BTW: @falkoschindler @rodja nicegui is wonderful!

[falkoschindler]

@rafo Oh yes, we need to review and update some of our examples. With NiceGUI's more recent features, some of them surely can be simplified. That's a great opportunity for a pul request, by the way. 🙂