AppLayout

The default layout for Solara apps. It consists of an toolbar bar, a sidebar and a main content area.

@solara.component
def AppLayout(
    children=[],
    sidebar_open=True,
    title=None,
    navigation=True,
    toolbar_dark=True,
    color: Optional[str] = "primary",
    classes: List[str] = [],
    style: Optional[Union[str, Dict[str, str]]] = None,
):

    ...

• The title of the app is set using the Title component.
• The sidebar content is set using the Sidebar component.
• The content is set by the Page component provided by the user.

This component is usually not used directly, but rather through via the Layout system.

The sidebar is only added when the AppLayout has more than one child.

with AppLayout(title="My App"):
    with v.Card():
        ...  # sidebar content
    with v.Card():
        ...  # main content

Arguments

• children: The children of the AppLayout. The first child is used as the sidebar content, the rest as the main content.
• sidebar_open: Whether the sidebar is open or not.
• title: The title of the app shown in the app bar, can also be set using the Title component.
• toolbar_dark: Whether the toolbar should be dark or not.
• navigation: Whether the navigation tabs based on routing should be shown.
• color: The color of the toolbar.
• classes: List of CSS classes to apply to the direct parent of the childred.
• style: CSS style to apply to the direct parent of the children. If style is None we use a default style of "height: 100%; overflow: auto;" and add 12px of padding when the sidebar of titlebar is visible. This will make sure your app gets scrollbars when need.