S
Solaraanimusater

Interact with `Layout` defined in another file

In a file with a defined Page solara component, I can import a defined Layout specified in another file. Just importing is enough to render the page in that layout. However, it does not seem to allow for interacting with the layout; i.e. I cannot pass a "page title" or something similar. I'm curious if it's possible to interact with the Layout beyond being able to define the children, or if perhaps I should be inspecting the children and pulling out which elements I want for particulars parts of the layout? For example:
# layout.py
import solara

@solara.component
def Layout(children=[]):
with solara.Column(children=children):
pass
# layout.py
import solara

@solara.component
def Layout(children=[]):
with solara.Column(children=children):
pass
# some_page.py
import solara
from .layout import Layout

@solara.component
def Page():
solar.Text("Some page")
# some_page.py
import solara
from .layout import Layout

@solara.component
def Page():
solar.Text("Some page")
EM
Egor Makarenko40d ago
In React this can be done with portals, and it seems that Reacton also supports this as an undocumented feature. You can see an example in solara.AppLayout, which allows to modify AppBar and AppBarTitle content from any component: https://github.com/widgetti/solara/blob/9e3cdae574a3534d940131504c535ee7a5f59ee0/solara/components/applayout.py#L33C7-L33C20
MP
Monty Python40d ago
solara/components/applayout.py line 33
class ElementPortal:
class ElementPortal:
M
MaartenBreddels40d ago
Hi Egor, nice to see you found the portals 🙂 I don't think they are need for this. This would be a nice pattern I think:
# some_page.py
import solara
from .layout import Layout as MyLayout

@solara.component
def Page():
solar.Text("Some page")

@solara.component
def Layout(children=[]):
with MyLayout(children=children, color="this", such="so"):
pass
# or return MyLayout(children=children, color="this", such="so")

# some_page.py
import solara
from .layout import Layout as MyLayout

@solara.component
def Page():
solar.Text("Some page")

@solara.component
def Layout(children=[]):
with MyLayout(children=children, color="this", such="so"):
pass
# or return MyLayout(children=children, color="this", such="so")