QTabs does not animate pane switch

[me21]

Hello,

I added support for QTabs component from JustPy:

class Tabs(ValueElement):
    def __init__(self, labels: List[str], *, value: str = None, on_change: Optional[Callable] = None):
        if value is None:
            value = labels[0]
        view = jp.QTabs(debug=True, animated=True)  # tried to add animated property here - didn't help
        view.attributes.append('animated')  # also tried to add "animated" to the list of attributes - didn't help
        subviews = [jp.QTab(name=label, label=label, a=view, debug=True) for label in labels]

        def process_event(view, event):
            self.value = event.value

        view.on('input', process_event)
        super().__init__(view, value=value, on_change=on_change)


@ui.page('/')
def build_main_page(request: Request):
    tabs = Tabs(['Mails', 'Alerts'], value='Alerts', on_change=lambda v: print(f'Value changed to {v.value}'))

However, there is no animation when switching from one tab to another. What am I missing?
In Quasar documentation, the animation is there: https://v1.quasar.dev/vue-components/tabs

[falkoschindler]

I can't find anything wrong with the code. But you probably don't need to set animated, because there is no such Quasar prop: https://quasar.dev/vue-components/tabs#qtabs-api.

Maybe it's not working because Quasar animations are not fully loaded?
You could try writing a tiny JustPy app with tabs to see if they are animated. Unfortunately there is no example about QTabs and my quick attempt failed:

import justpy as jp

def page():
    wp = jp.WebPage()
    tabs = jp.QTabs(a=wp)
    for name in ['A', 'B', 'C']:
        jp.QTab(name=name, label=name, a=tabs)
    return wp

jp.justpy(page)

I only see a blank page.

[me21]

I thought we're using Quasar v1? https://v1.quasar.dev/vue-components/tabs#qtabs-api

There's no animated prop either, but the examples on that page are animated, that's what baffles me.

[falkoschindler]

Sorry, wrong link. You're right, we should refer to Quasar v1.

[falkoschindler]

My idea was that maybe JustPy - and therefore also NiceGUI - runs with limited Quasar animations. There seem to be quite some configuration options: https://quasar.dev/options/animations#introduction But this might be a completely wrong direction.

A plain JustPy reproduction is usually a good way to find out if NiceGUI is causing the problem or if it already happens with JustPy.

[falkoschindler]

In NiceGUI 1.0 creating tabs is as simple as follows:

from nicegui import ui
from nicegui.element import Element

with Element('q-tabs'):
    for name in ['A', 'B', 'C']:
        Element('q-tab').props(f'name={name} label={name}')

ui.run(port=1234, uvicorn_reload_includes='*.py, *.html, *.css, *.js')

Here I'm using the generic Element class since tabs are not (yet) part of the official NiceGUI elements.
Most importantly: The pane switch is animated. 🙂

[JS-Aibel]

Hi,

How do we give the different tabs content?

[me21]

How do we give the different tabs content?

I just used QColumns beneath the QTabs component which were made visible or invisible depending on the selected tab.

[arolluisma]

It would be nice to see a toy (example) code for this.

[falkoschindler]

Here I posted an example showing QTabs in combination with QTabPanels.