Solara•4mo ago

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")

3 Replies

Egor Makarenko•4mo 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

Monty Python•4mo ago

solara/components/applayout.py line 33

class ElementPortal:

class ElementPortal:

MaartenBreddels•4mo 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")

Gaming

Programming

Interact with `Layout` defined in another file