Solara•7mo ago

Alignment

i have this code for the app bar of my Solara app:

import solara.lab


@solara.component
def appBar():
    with solara.AppBar():
        solara.Image(
            "assets/logo-small.png",
            width="250px",
        )
        with solara.lab.Tabs(background_color="primary", align="center"):
            solara.lab.Tab("Home", icon_name="mdi-home", path_or_route="/")
            solara.lab.Tab("Incubators", icon_name="mdi-fridge-outline", path_or_route="/Incubators")
            solara.lab.Tab("Live View", icon_name="mdi-chart-timeline-variant", path_or_route="/Live_View")
            solara.lab.Tab("Analysis", icon_name="mdi-poll", path_or_route="/Analysis")
            solara.lab.Tab("Control", icon_name="mdi-remote", path_or_route="/Control")
            solara.lab.Tab("Experiment", icon_name="mdi-flask", path_or_route="/Experiment")
            solara.lab.Tab("Microcontroller", icon_name="mdi-memory", path_or_route="/Microcontroller")
            solara.lab.Tab("Info", icon_name="mdi-information-outline", path_or_route="/Info")
            solara.lab.Tab("Docs", icon_name="mdi-file-document-outline", path_or_route="/Docs")

import solara.lab


@solara.component
def appBar():
    with solara.AppBar():
        solara.Image(
            "assets/logo-small.png",
            width="250px",
        )
        with solara.lab.Tabs(background_color="primary", align="center"):
            solara.lab.Tab("Home", icon_name="mdi-home", path_or_route="/")
            solara.lab.Tab("Incubators", icon_name="mdi-fridge-outline", path_or_route="/Incubators")
            solara.lab.Tab("Live View", icon_name="mdi-chart-timeline-variant", path_or_route="/Live_View")
            solara.lab.Tab("Analysis", icon_name="mdi-poll", path_or_route="/Analysis")
            solara.lab.Tab("Control", icon_name="mdi-remote", path_or_route="/Control")
            solara.lab.Tab("Experiment", icon_name="mdi-flask", path_or_route="/Experiment")
            solara.lab.Tab("Microcontroller", icon_name="mdi-memory", path_or_route="/Microcontroller")
            solara.lab.Tab("Info", icon_name="mdi-information-outline", path_or_route="/Info")
            solara.lab.Tab("Docs", icon_name="mdi-file-document-outline", path_or_route="/Docs")

and it displays the image attached, how can i move the image to the left hand side of the app bar?

12 Replies

iisakkirotko•7mo ago

Hey @Harry! I would give chaning the children of solara.AppBar to be solara.Image(...) and solara.v.Spacer(). The Spacer should fill the rest of the remaining (right aligned) space.

HarryOP•7mo ago

Hi @Iisakki Rotko ! thank you for responding to my simple question lol. I have done that and it is now centred the image :/

import solara.lab


@solara.component
def appBar():
    with solara.AppBar(children=[solara.Image("logo/.png", width="250px"), solara.v.Spacer()]):
        with solara.lab.Tabs(background_color="primary", align="center"):
            solara.lab.Tab("Home", icon_name="mdi-home", path_or_route="/")
            solara.lab.Tab("Incubators", icon_name="mdi-fridge-outline", path_or_route="/Incubators")
            solara.lab.Tab("Live View", icon_name="mdi-chart-timeline-variant", path_or_route="/Live_View")
            solara.lab.Tab("Analysis", icon_name="mdi-poll", path_or_route="/Analysis")
            solara.lab.Tab("Control", icon_name="mdi-remote", path_or_route="/Control")
            solara.lab.Tab("Experiment", icon_name="mdi-flask", path_or_route="/Experiment")
            solara.lab.Tab("Microcontroller", icon_name="mdi-memory", path_or_route="/Microcontroller")
            solara.lab.Tab("Info", icon_name="mdi-information-outline", path_or_route="/Info")
            solara.lab.Tab("Docs", icon_name="mdi-file-document-outline", path_or_route="/Docs")

import solara.lab


@solara.component
def appBar():
    with solara.AppBar(children=[solara.Image("logo/.png", width="250px"), solara.v.Spacer()]):
        with solara.lab.Tabs(background_color="primary", align="center"):
            solara.lab.Tab("Home", icon_name="mdi-home", path_or_route="/")
            solara.lab.Tab("Incubators", icon_name="mdi-fridge-outline", path_or_route="/Incubators")
            solara.lab.Tab("Live View", icon_name="mdi-chart-timeline-variant", path_or_route="/Live_View")
            solara.lab.Tab("Analysis", icon_name="mdi-poll", path_or_route="/Analysis")
            solara.lab.Tab("Control", icon_name="mdi-remote", path_or_route="/Control")
            solara.lab.Tab("Experiment", icon_name="mdi-flask", path_or_route="/Experiment")
            solara.lab.Tab("Microcontroller", icon_name="mdi-memory", path_or_route="/Microcontroller")
            solara.lab.Tab("Info", icon_name="mdi-information-outline", path_or_route="/Info")
            solara.lab.Tab("Docs", icon_name="mdi-file-document-outline", path_or_route="/Docs")

iisakkirotko•7mo ago

Hey @Harry! I clearly should have tried running the code to check my solution :) We automatically inject a solara.v.Spacer before the children, but after AppBarTitle. Would using solara.AppBarTitle work? Something like

import solara.lab


@solara.component
def appBar():
    with solara.AppBar():
        with solara.AppBarTitle():
            solara.Image("logo/.png", width="250px")
        with solara.lab.Tabs(background_color="primary", align="center"):
            ...

import solara.lab


@solara.component
def appBar():
    with solara.AppBar():
        with solara.AppBarTitle():
            solara.Image("logo/.png", width="250px")
        with solara.lab.Tabs(background_color="primary", align="center"):
            ...

Cold Sunshine•6mo ago

Hello, I have an alignment issue too, but simpler than this question. I want a logo, a text/markdown title, and a button across the top banner of my web page. When I do the logo by itself, it aligns ok. with solara.AppBar():
with solara.AppBarTitle(): solara.Image(image_path, '20%') (left image below) Then I try to add the dashboard Title and a button, the logo disappears just the title and button appear on vertically stacked, not horizontally. with solara.AppBar():
with solara.AppBarTitle(): solara.Image(image_path, '20%') solara.Markdown("# Title of Dashboard") solara.Button(label="Exit", on_click = exit_page) Any ideas what to do? I would like logo, title, button horizontally across banner. Thanks

Cold Sunshine•6mo ago

Sorry, if my post is confusing. I am a bit new to discord too.

iisakkirotko•6mo ago

Hey @Cold Sunshine! This (unfortunately) takes some trickery. Let me know if the following works for you:

import solara


@solara.component
def Page():
    with solara.AppBar():
        with solara.AppBarTitle():
            with solara.Row(style={"background-color": "transparent", "align-items": "center"}):
                solara.HTML(tag="img", attributes={"src": "https://picsum.photos/400/200", "style": "height: 40px"})
                solara.Text("Title of Dashboard")
        solara.v.Spacer()
        solara.Button(label="Exit", on_click = lambda: None)
    solara.Markdown("HELLLOOO")

import solara


@solara.component
def Page():
    with solara.AppBar():
        with solara.AppBarTitle():
            with solara.Row(style={"background-color": "transparent", "align-items": "center"}):
                solara.HTML(tag="img", attributes={"src": "https://picsum.photos/400/200", "style": "height: 40px"})
                solara.Text("Title of Dashboard")
        solara.v.Spacer()
        solara.Button(label="Exit", on_click = lambda: None)
    solara.Markdown("HELLLOOO")

Run and edit this code snippet at PyCafe

PyCafe - Solara - Simple Dashboard Example Using Solara Library

PyCafe: get your daily fix of Python!

Cold Sunshine•5mo ago

I will try it out - Thanks! This worked out great - I built my first working (but modest) dashboard. On to more fancy stuff now. 🙂 How do I change to the color of my AppBar?

iisakkirotko•5mo ago

The AppLayout should take a color argument. There you can give it either a hex code, CSS color name, or a vuetify theme color name (like "primary")

Cold Sunshine•5mo ago

I don't see anything in docs and all my likely guesses failed

iisakkirotko•5mo ago

Yeah, it might be a bit unexpected that the argument goes on AppLayout and not AppBar

Cold Sunshine•5mo ago

Ha! It works thanks

Gaming

Programming

Alignment