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

from nicegui import ui

from ...model import UiElementDocumentation


class SplitterDocumentation(UiElementDocumentation, element=ui.splitter):

    def main_demo(self) -> None:
        with ui.splitter() as splitter:
            with splitter.before:
                ui.label('This is some content on the left hand side.').classes('mr-2')
            with splitter.after:
                ui.label('This is some content on the right hand side.').classes('ml-2')

    def more(self) -> None:
        @self.demo('Advanced usage', '''
            This demo shows all the slots and parameters including a tooltip, a custom separator, and a callback.
        ''')
        def advanced_usage() -> None:
            with ui.splitter(horizontal=False, reverse=False, value=60,
                             on_change=lambda e: ui.notify(e.value)) as splitter:
                ui.tooltip('This is the default slot.').classes('bg-green')
                with splitter.before:
                    ui.label('This is the left hand side.').classes('mr-2')
                with splitter.after:
                    ui.label('This is the right hand side.').classes('ml-2')
                with splitter.separator:
                    ui.icon('lightbulb').classes('text-green')

            ui.number('Split value', format='%.1f').bind_value(splitter)

        @self.demo('Image fun', '''
            This demo shows how to use the splitter to display images side by side.
        ''')
        def image_fun() -> None:
            with ui.splitter().classes('w-72 h-48') \
                    .props('before-class=overflow-hidden after-class=overflow-hidden') as splitter:
                with splitter.before:
                    ui.image('https://cdn.quasar.dev/img/parallax1.jpg').classes('w-72 absolute-top-left')
                with splitter.after:
                    ui.image('https://cdn.quasar.dev/img/parallax1-bw.jpg').classes('w-72 absolute-top-right')