Quasar: [v1] [Feature] QTabs - option to display arrows on mobile?

[mpacary]

According to the QTabs doc page, if the QTabs content is larger than available space, arrows/chevrons are not displayed on QTabs side when on mobile.

QTabs can be scrolled horizontally when the width is longer than the container width. Adjust your browser accordingly to see this in action. On a desktop you will see chevons on either side that can be clicked. On a mobile, you can pan the tabs with your finger.

It turns to be a problem, because sometimes the right edge of QTabs is between two tabs (one tab is displayed, the next isn’t)

Therefore, a newcoming user has no way to tell if there is more tabs or not.

Would it be possible to have an option allowing to display a right arrow showing clearly to the user that more tabs are available?

[AjiTae]

workaround

before all:

import {debounce, QTabs} from 'quasar';

QTabs.mixin({
    mounted() {
        if (this.$refs.content) {
            this.$refs.content.addEventListener('scroll', debounce(this.__updateArrows, 150));
        }
    }
});

css:

body.mobile
  .q-tabs__arrow
    display: inline-flex
  .q-tabs--not-scrollable .q-tabs__arrow
    display: none

[turigeza]

@AjiTae Does it still work for you ? For me it doesn't ... mind I don't even see the DOM element .q-tabs__arrow. They don't seem to render on a mobile.

[AjiTae]

Yep, this commit brokes it.
We need official support for such behavior because monkey-patching is as unreliable as always.

[jblyberg]

Has this change been incorporated into release yet? Arrows are not showing up for me on mobile.

[cristianomoraes]

This feature should be incorporated into Quasar. Should this ticket get a feature request label?

[nseb]

• same problem , no arrows ;-(

[TG4LAaron]

Any updates on this issue?

[turigeza]

Apparently this is how it should work ...
https://forum.quasar-framework.org/topic/6102/no-arrows-in-q-tab-in-mobile-device/2

I don't get it though and from my experience people are missing the arrows.

[webnoob]

Will be available in 1.12.9