tabs() 标签页

元素 ui.tabs、ui.tab、ui.tab_panels 和 ui.tab_panel 类似于 Quasar 的标签页和标签面板 API。

ui.tabs 创建一个容器来容纳标签页。例如，它可以放置在一个 ui.header 中。ui.tab_panels 创建一个带有实际内容的标签面板的容器。每个 ui.tab_panel 都与一个 ui.tab 元素相关联。

from nicegui import ui

with ui.tabs().classes('w-full') as tabs:
    one = ui.tab('One')
    two = ui.tab('Two')
with ui.tab_panels(tabs, value=two).classes('w-full'):
    with ui.tab_panel(one):
        ui.label('First tab')
    with ui.tab_panel(two):
        ui.label('Second tab')

# ui.run()

tabs() 名称、标签、图标

ui.tab 元素具有一个 label 属性，可用于显示与 name 不同的文本。name 也可以代替 ui.tab 对象，将 ui.tab 与 ui.tab_panel 关联起来。此外，每个标签页都可以有一个图标。

from nicegui import ui

with ui.tabs() as tabs:
    ui.tab('h', label='Home', icon='home')
    ui.tab('a', label='About', icon='info')
with ui.tab_panels(tabs, value='h').classes('w-full'):
    with ui.tab_panel('h'):
        ui.label('Main Content')
    with ui.tab_panel('a'):
        ui.label('Infos')

# ui.run()

tabs() 通过编程切换标签页

ui.tabs 和 ui.tab_panels 元素派生自 ValueElement，它具有 set_value 方法。可以使用该方法通过编程方式切换标签页。

from nicegui import ui

content = {'Tab 1': 'Content 1', 'Tab 2': 'Content 2', 'Tab 3': 'Content 3'}
with ui.tabs() as tabs:
    for title in content:
        ui.tab(title)
with ui.tab_panels(tabs).classes('w-full') as panels:
    for title, text in content.items():
        with ui.tab_panel(title):
            ui.label(text)

ui.button('GoTo 1', on_click=lambda: panels.set_value('Tab 1'))
ui.button('GoTo 2', on_click=lambda: tabs.set_value('Tab 2'))

# ui.run()

tabs() 带有分隔符的垂直标签页

与 Quasar 的垂直标签页示例类似，我们可以将 ui.splitter 和 tab 元素结合起来创建一个垂直标签页布局。

from nicegui import ui

with ui.splitter(value=30).classes('w-full h-56') as splitter:
    with splitter.before:
        with ui.tabs().props('vertical').classes('w-full') as tabs:
            mail = ui.tab('Mails', icon='mail')
            alarm = ui.tab('Alarms', icon='alarm')
            movie = ui.tab('Movies', icon='movie')
    with splitter.after:
        with ui.tab_panels(tabs, value=mail) \
                .props('vertical').classes('w-full h-full'):
            with ui.tab_panel(mail):
                ui.label('Mails').classes('text-h4')
                ui.label('Content of mails')
            with ui.tab_panel(alarm):
                ui.label('Alarms').classes('text-h4')
                ui.label('Content of alarms')
            with ui.tab_panel(movie):
                ui.label('Movies').classes('text-h4')
                ui.label('Content of movies')

# ui.run()