pydantic/FastUI

Feature Request: Use a logo image as the navbar `title` (as an alternative to text)

jimkring opened this issue · 5 comments

jimkring commented

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.

image

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.

image

image

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/.

samuelcolvin commented

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.

  • 👍1
jimkring commented

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.

hasansezertasan commented

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

  • 👍1
samuelcolvin commented

Let's do option 1.

  • 🎉3
  • 🚀1
jimkring commented

I'llogo for that!