Alternate strategies to share the same styling and behavior across all pages

[davetapley]

Disclaimer: I already saw the example here.

But in my case I don't need a context_manager / yield because I just want to do some ui.query at the top of each page:

nicegui/examples/chat_with_ai/main.py

Lines 34 to 36 in b058c3b

	# the queries below are used to expand the contend down to the footer (content can then use flex-grow to expand)
	ui.query('.q-page').classes('flex')
	ui.query('.nicegui-content').classes('w-full')

---

Trivial solution is:

def setup():
    ui.query('.nicegui-content').classes('w-full')
    ui.query('.q-page').classes('flex')


@ui.page('/')
def root():
    setup()
    ...

But awkward to have to remember to setup() each page. Wrapping the page decorator would be great.

This works:

def page(*args, **kwargs):

    def decorator_page(func):
        parameters_of_decorated_func = list(signature(func).parameters.keys())

        if iscoroutinefunction(func):
            @wraps(func)
            async def inner(*dec_args, **dec_kwargs):
                dec_kwargs = {k: v for k, v in dec_kwargs.items(
                ) if k in parameters_of_decorated_func}
                setup_page()
                await func(*dec_args, **dec_kwargs)
        else:
            @wraps(func)
            def inner(*dec_args, **dec_kwargs):
                dec_kwargs = {k: v for k, v in dec_kwargs.items(
                ) if k in parameters_of_decorated_func}
                setup_page()
                func(*dec_args, **dec_kwargs)
        ui.page(*args, **kwargs)(inner)

    return decorator_page

@page('/')
def root()
    ...

But two outstanding issues:

1. I wouldn't even know where to start with typing it 😱
2. Not sure how would handle async pages. iscoroutinefunction to the rescue.

Comments / ideas welcome! 🙏🏻

[davetapley]

Actually, I just realized: Could we get shared on ui.query? Like:

• let add_css, add_scss and add_sass set shared=True #4537

That would solve it without requiring wrapping ui.page.

[rodja]

Since we released SPA support in 2.22.0, you can use this scheme:

@ui.page('/')
@ui.page('/{_:path}')  # NOTE: our page should catch all paths
def root():
    ui.query('.nicegui-content').classes('w-full')
    ui.query('.q-page').classes('flex')
    ui.sub_pages({
        '/': main, 
        '/other': other
    })

def main():
    ui.label('Main page content')
    ui.link('Go to other page', '/other')

def other():
    ui.label('Another page content')
    ui.link('Go to main page', '/')

Switching between sub pages is much faster (because only the content is changed without establishing a new connection). And as you can see in the example, you only need to do the setup once.

[falkoschindler]

Another alternative - if you just want to apply some classes via ui.query:

ui.add_head_html('''
    <style type="text/tailwindcss">
        .nicegui-content {
            @apply bg-blue-100;
        }
    </style>
''', shared=True)

See https://nicegui.io/documentation/section_styling_appearance#tailwind_css_layers for another demo about using CSS' @apply function.