FastUI

FastUI copied to clipboard

Use Case

When designing a site, I often want to use a logo image as the navbar title (instead of text).

Current Limitations

Right now, the Navbar component only supports a title: str argument.

This results in a nice text title on the navbar, but in my case I would like to use an image. I can't find a way to do that.

Current Work-around (not ideal)

I can kind of achieve this by not passing in a title to Navbar() and then setting the first element of the start_links list to be a Link with an Image component inside it. However, the problem with this work-around is that the image gets hidden inside the hamburger menu when the screen width is small.

Possible Solution

I propose adding support for specifying an image to use instead of text.

Maybe the Navbar constructor could take an title_image: Image argument -- an Image component -- which is used instead of the title, if title_image is not None.

I'm sure there are other good ways to achieve this. Maybe there's already a solution/work-around, that I don't know about.

Thanks for your feedback and consideration of this use case/.

Three options:

1. Support logo as an attribute of navbar
2. Change title to an element that can include an image - I worry this won't render very well without specialisation
3. Allow you to escape hatch from fastui with html, and recommend that

Is suggest 1. but I'm not 100% on it.

Option 1 is nice because it's easy for users to see that the navbar can have a logo image. Option 2 (allowing title to support either Image or Text) makes this less obvious.

Another possibility:

Navbar could have a new argument named title_link: Link that takes a Link, which can have just about anything inside it, such as Text and Image.

This would make the Navbar constructor arguments very symmetrical since start_links and end_links are list[Link] types. The name title_link is even named similarly. Plus, as a user of fastui, it will be fairly well known that a Link can contain images.

That said, don't know much about how the front end is rendering the title/links, so maybe supporting a Link type would be problematic.

I would prefer the first option as an end-user.

Let's do option 1.

I'llogo for that!