nicegui/website/documentation/content/more/tabs_documentation.py

from nicegui import ui

from ...model import UiElementDocumentation


class TabsDocumentation(UiElementDocumentation, element=ui.tabs):

    def main_demo(self) -> None:
        """Tabs

        The elements `ui.tabs`, `ui.tab`, `ui.tab_panels`, and `ui.tab_panel` resemble
        `Quasar's tabs <https://quasar.dev/vue-components/tabs>`_
        and `tab panels <https://quasar.dev/vue-components/tab-panels>`_ API.

        `ui.tabs` creates a container for the tabs. This could be placed in a `ui.header` for example.
        `ui.tab_panels` creates a container for the tab panels with the actual content.
        Each `ui.tab_panel` is associated with a `ui.tab` element.
        """
        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')

    def more(self) -> None:
        @self.demo('Name, label, icon', '''
            The `ui.tab` element has a `label` property that can be used to display a different text than the `name`.
            The `name` can also be used instead of the `ui.tab` objects to associate a `ui.tab` with a `ui.tab_panel`. 
            Additionally each tab can have an `icon`.
        ''')
        def name_and_label():
            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')

        @self.demo('Switch tabs programmatically', '''
            The `ui.tabs` and `ui.tab_panels` elements are derived from ValueElement which has a `set_value` method.
            That can be used to switch tabs programmatically.
        ''')
        def switch_tabs():
            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'))