nav_card image width size

[zarch]

Dear all,

I'm playing with wave :-D

I'm using ui.nav_card and change the image argument from the default generated code with wave init from the svg logo to a png file. The image by default is not resize to the width of the sidebar

I tried substituting the image path with an ui.Image instance.

async def init(q: Q) -> None:
    sidebar_size = "150px"
    q.page["meta"] = ui.meta_card(
        ...
    )
    q.page["sidebar"] = ui.nav_card(
            box="sidebar",
            color="primary",
            title="My sidebar",
            subtitle="Let's play a bit",
            value=f'#{q.args["#"]}' if q.args["#"] else "#page1",
            image=ui.Image(
                title="Wave logo",
                path="https://docs.h2o.ai/assets/images/wave_favicon.png",
                width=sidebar_size,
            ),
            ...,
    )
    ...

But an exception is raised.

Traceback (most recent call last):
  File "site-packages/h2o_wave/server.py", line 360, in _process
    await self._handle(q)
  File "app.py", line 378, in serve
    await init(q)
  File "app.py", line 321, in init
    q.page["sidebar"] = ui.nav_card(
                        ^^^^^^^^^^^^
  File "site-packages/h2o_wave/ui.py", line 3862, in nav_card
    return NavCard(
           ^^^^^^^^
  File "site-packages/h2o_wave/types.py", line 10854, in __init__
    _guard_scalar('NavCard.image', image, (str,), False, True, False)
  File "site-packages/h2o_wave/types.py", line 37, in _guard_scalar
    raise ValueError(f'{name}: want one of {types}, got {type(value)}')
ValueError: NavCard.image: want one of (<class 'str'>,), got <class 'h2o_wave.types.Image'>

Shouldn't the image be resize to the sidebar width dimension by default?
Why not let the user pass a ui.Image instance?
Ho can I take control of this behavior?

[mturoci]

Hey @zarch!

TLDR: You can adjust sidebar width at this line.

Long story:

Wave gives you control over this via:

• Properly sizing the image yourself - this is also good for performance as it's always better to load a properly sized image (smaller) instead of loading a big one and resizing it via CSS afterward.
• If your image is the size you want, you need to ensure it has a big enough container. The default template uses fixed 250px, however, if "zone" size is not specified, Wave defaults to the content width. Read more here.

[zarch]

Hi @mturoci ,

thank you for your answer, yes I was using the sidebar width to adjust the graphic feeling and I change the size of the logo as suggested. I thought it was also possible to go a step deeper passing ui.Image instance but I was not able to find this in the documentation :-)

Thank you for the support.