How to quickly create custom containers?

[smojef]

I was looking for a way to quickly create custom containers for reuse within my script. I wanted to be able to use with: so I ended up using @contextmanager and yield statement. Like this:

from contextlib import contextmanager
    
@contextmanager    
def my_button_card(text, on_click):
    with ui.button('', on_click=on_click).classes('p-0 rounded'):
        with ui.card().classes('bg-slate-50 hover:bg-slate-100 text-black') as card:
            ui.label('UI elements before')
            yield card   # The remaining code will be executed only after exiting the caller with block
            ui.label(text).classes('w-full items-center text-black')
            ui.label('UI elements after')
        
with my_button_card('My Text', on_click=lambda _:ui.notify('Click')) as card:     
    ui.image('https://dummyimage.com/150x100/def/000').classes('w-64 rounded')
    card.classes('p-12')   # I can't add inline .classes on the `with` line above, but I can on the variable
    
ui.run()

Is that the best way to do it?

[rodja]

Yes. We do it the same way in our modularization example:

nicegui/examples/modularization/theme.py

Lines 8 to 18 in 76b1cbd

	@contextmanager
	def frame(navtitle: str):
	'''Custom page frame to share the same styling and behavior across all pages'''
	ui.colors(primary='#6E93D6', secondary='#53B689', accent='#111B1E', positive='#53B689')
	with ui.header().classes('justify-between text-white'):
	ui.label('Modularization Demo').classes('font-bold')
	ui.label(navtitle)
	with ui.row():
	menu()
	with ui.row().classes('absolute-center'):
	yield

[smojef]

Great! Thanks for the example.