tabs in left drawer

[atticus-lv]

Question

hi, I have 2 question when using tab in left drawer

1. tab props 'transition-prev="jump-up"' seems not work here (but work well in splitter)
2. when setting':width="150"' in left drawer's props, the tab can not get to the edge
   

this is my code

from nicegui import app, ui


def basic():
    with ui.header().classes(replace='row items-center') as header:
        ui.button(on_click=lambda: left_drawer.toggle(), icon='menu').props('flat color=white')

    with ui.footer(value=False) as footer:
        ui.label('Footer')

    with ui.left_drawer().classes('bg-blue-50 w-full').props("""
            :width="150"
            :breakpoint="500"
            """) as left_drawer:
        with ui.tabs().props(
                """vertical switch-indicator swipeable transition-prev="jump-up" transition-next="jump-up" """).classes(
            'w-full') as tabs:
            tabs.add_slot('after')
            ui.tab('A')
            ui.tab('B')
            ui.tab('C')

    with ui.tab_panels(tabs, value='A').classes('w-full'):
        with ui.tab_panel('A'):
            ui.label('Content of A')
        with ui.tab_panel('B'):
            ui.label('Content of B')
        with ui.tab_panel('C'):
            ui.label('Content of C')


basic()

ui.run(native=True)

[falkoschindler]

Hi @atticus-lv!

1. These transition props need to be set to the ui.tab_panels, not the ui.tabs.
2. To reduce the gap next to the tabs, you can remove the padding with the class "p-0" or the horizontal padding with "px-0".

with ui.left_drawer().classes('bg-blue-50 w-full px-0').props('width=150 breakpoint=500') as left_drawer:
    with ui.tabs().props('vertical switch-indicator swipeable').classes('w-full') as tabs:
        ui.tab('A')
        ui.tab('B')
        ui.tab('C')

with ui.tab_panels(tabs, value='A').classes('w-full').props('transition-prev=jump-up transition-next=jump-up'):
    with ui.tab_panel('A'):
        ui.label('Content of A')
    with ui.tab_panel('B'):
        ui.label('Content of B')
    with ui.tab_panel('C'):
        ui.label('Content of C')

[atticus-lv]

thanks~ that is what I want
full code

from nicegui import app, ui


def basic():
    with ui.header().classes(replace='row items-center') as header:
        ui.button(on_click=lambda: left_drawer.toggle(), icon='menu').props('flat color=white')

    with ui.footer(value=False) as footer:
        ui.label('Footer')

    with ui.left_drawer().classes('bg-blue-50 w-full px-0 p-0').props('width=100 breakpoint=500') as left_drawer:
        with ui.tabs().props('vertical switch-indicator swipeable').classes('w-full') as tabs:
            ui.tab('A')
            ui.tab('B')
            ui.tab('C')

    with ui.tab_panels(tabs, value='A').classes('w-full').props('transition-prev=jump-up transition-next=jump-up'):
        with ui.tab_panel('A'):
            ui.label('Content of A')
        with ui.tab_panel('B'):
            ui.label('Content of B')
        with ui.tab_panel('C'):
            ui.label('Content of C')


basic()

ui.run(native=True)