Creating slot tag and injecting like v-slot

[lyosonernes]

First Check

• I added a very descriptive title here.
• I have checked the FAQs for a similar question and didn't find it.
• I used the GitHub search to find a similar question and didn't find it.
• I searched the NiceGUI documentation, with the integrated search.
• I already searched online "How to X in NiceGUI" and didn't find any information.

Example Code

from nicegui import ui

class TestSlot(ui.element):
    def __init__(self, **kwargs) -> None:
        super().__init__(**kwargs)
        with self:
            ui.label("above")
            ui.element(tag="slot").props("name='footer'")
            ui.label("below")

        self.footer = self.add_slot("footer")
        with self.footer:
            ui.label("footer")

TestSlot()

ui.run()

Description

Hi !

I want to be able to create named slot from nicegui via python.

I tried with ui.element to create a slot tag with a name (https://vuejs.org/guide/components/slots.html) and then use the add_slot function to inject element.

Nothing happens as the slot doesn't change.

Do you have any idea how to support this ?

NiceGUI Version

2.13.0

Python Version

3.12

Browser

Chrome

Operating System

Windows

Additional Context

No response

[falkoschindler]

Hi @lyosonernes,

I'm not sure if it is possible to define new slots in Python. But you can use a context manager to achieve a very similar result: #4519

[evnchn]

Nope. You can't yield twice.

There is only one with and one entering the context, so double yield makes no sense in terms of @contextmanager

You may, however, return as many elements for which you can with into and put stuff in, along the lines of: #4519 (comment)

[falkoschindler]

Great idea! This could result in something like this:

class Slot(ui.element):
    ...

class MyItem(ui.row):
    def __init__(self, text: str, icon: str) -> None:
        super().__init__(align_items='center')
        with self.classes('border p-4 w-80'):
            ui.icon(icon)
            self.slot_a = Slot()
            self.slot_b = Slot()
            ui.label(text)

MyItem('Paul', 'face')
MyItem('John', 'face')
item = MyItem('Jane', 'face')
with item.slot_a:
    ui.button('Call').props('flat')
with item.slot_b:
    ui.button('Text').props('flat')

Note that Slot is basically a ui.element. The only downside is that it takes up space in the DOM even if it is empty: Its width is 0, but the row gaps around it accumulate. But a "real" slot would have the same problem I guess.

[evnchn]

Exactly what I would intend for. However, I think might as well create a ui.row or ui.column for the slot_a and slot_b, for easier layout.

It is very easy to mess up the layout otherwise, using a bare ui.element.

[falkoschindler]

Indeed! Or derive Slot from ui.row or ui.column.

[lyosonernes]

Thanks this seems like a good solution !