Can we add classes to the body of the current page?

[smojef]

Can we access the top container of the current page?
It would be useful to add classes or add elements to it.

[rodja]

Yes. When the client is injected into the current page, you can access its content property. See our implementation of https://nicegui.io for an example:

nicegui/main.py

Lines 75 to 77 in 76b1cbd

	@ui.page('/')
	async def index_page(client: Client):
	client.content.classes(remove='q-pa-md gap-4')

[falkoschindler]

Technically, this is not the body tag of the HTML page, but the Quasar's QPage element. There is also client.layout to access the QLayout element. But currently there is no API to access the body tag besides ui.run_javascript, ui.add_head_html, or ui.add_body_html.

[smojef]

@falkoschindler, can you elaborate on client.layout? I can't find it. I would like to:

def on_add():
  with client.layout:
    ui.label('add a label to the bottom of main page')

ui.button('Add', on_click=on_add)

ui.run()

[smojef]

@falkoschindler, I found a solution:

from nicegui import ui

def on_add(e):
    log.push(str(e.client.layout))
    log.push(str(e.client.layout.slots))
    log.push(str(e.client.layout.default_slot))
    log.push(str(e.client.layout.default_slot.children))
    log.push(str(e.client.layout.default_slot.children[0].tag))
    log.push(str(e.client.layout.default_slot.children[0].default_slot.children[0].tag))
    log.push(str(e.client.layout.default_slot.children[0].default_slot.children[0].default_slot.children[0].tag))
    with e.client.layout.default_slot.children[0].default_slot.children[0].default_slot.children[0]:
        ui.label('add a label to the bottom of main page')

ui.button('Add', on_click=on_add)
log = ui.log().classes('w-full h-96')

ui.run()

I am not too familiar with the concept of 'slot'. Is the default_slot the way of navigating through the layout?

[rodja]

@smojef your example code does not use page creators. Therefore NiceGUI can not provide you with a client object. If you want to stick with the globally shared index page, you can access its client via globals.index_client. Also most of the time you do not need to work with the QLayout but rather use the content property of the client. Thats why you need to navigate through the tree to via default_slots from layout to content. A working example would be:

from nicegui import ui, globals

def on_add():
    with globals.index_client.content:
        ui.label('add a label to the bottom of main page')

ui.button('Add', on_click=on_add)

ui.run()

While this works, I generally suggest to move to page-generators when building more complex applications. Then each browser gets its own user interface. In your example this would result in new labels only being shown to the specific user, not everyone who accesses the server. Here is an rewrite of the above:

from nicegui import ui, Client

@ui.page('/')
def main_page(client: Client):
    def on_add():
        with client.content:
            ui.label('add a label to the bottom of main page')

    ui.button('Add', on_click=on_add)

ui.run()

In this short example there is actually no need to use client.content. Because we auto-apply the context from the button the the execution of the click handler. This means you can simply write

@ui.page('/')
def main_page():
    def on_add():
        ui.label('add a label to the bottom of main page')

    ui.button('Add', on_click=on_add)

[smojef]

@rodja Thanks for your answer. I understand the difference.
So I believe my confusion came from a strange behavior in the "auto-apply the context from the button" when there is no page-generator.
It seems that the context is the parent of the button instead of the page as I would expect.
Here is an example that shows how "default context" labels are created all over the place:

from nicegui import ui, globals

def on_add(e):
    ui.label('add to default context')
    with globals.index_client.content:
        ui.label('add to global content')

with ui.card():
    ui.label('CARD')
    ui.button('Add from card', on_click=on_add)

    with ui.card():
        ui.label('INNER CARD')
        ui.button('Add from inner card', on_click=on_add)

ui.button('Add from page', on_click=on_add)

ui.run()

So I was stuck with elements showing in my cards instead of the page.
Perhaps with globals.index_client.content: should be applied automatically on events from the global page?

[rodja]

I don't know. What is more often required? Adding elements to the page or adding them at the same level as the caller of the event? We figured it would be the latter case. Especially if you modularize your code. For example with a widget that provides a ToDo list. It would be strange if the ToDo items are added to the page instead to the local context. Or not?

[smojef]

Actually not. Buttons are likely to be put in a container for layout and styling. It is very unlikely that elements will be put in this same container.

We quickly learn from nicegui examples that:

• All elements are put in the page
• Unless they are in a with: block
• To specify another parent, grab a variable to your container and use a with: block
• We can easily grab a variable on any element that we create

The current 'magic' behavior breaks this simple pattern.

• I did not understand what was going on (like Can we add classes to the body of the current page? #310)
• It made me think that there was a leak in the enter/exit process
• It made me attempt to get a variable for the only container (page) that I did not create, but it should have worked in the first place.