Material-components-web: Tab Scroller Indicators

[aeromac]

With the new tab components, the tab scroller indicators have gone. Are there plans to bring them back? On a desktop without touch, this means having to navigate to tabs unnecessarily in order to force the scroller to scroll. The guidelines seem to suggest "on desktop, provide a visual indicator that more tabs are available off screen."

[acdvorak]

Thanks for filing this issue!

It looks like that feature might have gotten lost in translation during the tab bar rewrite.
Sorry about that!

Adding this to our issue tracker.

[acdvorak]

Correction: I talked to @patrickrodee, who implemented the new tab bar, and he said that the left/right arrows were intentionally left out of the initial version of Tab Bar for several reasons:

1. They have ambiguous usability on touch-enabled desktop devices
   
   
   
   • The interaction between touch and mouse devices becomes super hairy (some devices have both - e.g., laptops with touch screens)
   
   
2. Determining how functionality should change between desktop and mobile was not clear
   
   
   
   • E.g., at what breakpoint should the arrows be shown/hidden?
   
   
3. Native scrolling was the simplest to get working, and covered the most use cases

It's still a valid feature request though 😀

[niallel]

+1 for this.

Is there any workaround or is it best to stay on an older version?

[acdvorak]

Unfortunately there is no workaround for the new mdc-tab-bar package.

If this is something you need, you can use the (deprecated and unmaintained) mdc-tabs package.

[trimox]

@aeromac @niallel
It's possible to implement visual indicators using mdc-icon-button or another component, and interaction call mdc-scroller methods incrementScroll(number) or scrollTo(number) for going forward and back.

I wrote a very basic example with angular, but stopped before adding breakpoint functionality. I could expand on the example if you'd like.

https://trimox.github.io/angular-mdc-web/#/tabs-demo

<button mdc-icon-button (mousedown)="scroller.incrementScroll(-65)" icon="keyboard_arrow_left"></button>
<button mdc-icon-button (mousedown)="scroller.incrementScroll(65)" icon="keyboard_arrow_right"></button>

[jmatazzoni]

I would encourage you to reconsider the decision to drop the arrows. I think this suboptimal UX for desktop users. We're building a desktop app with a lot of tabs. When the user has to navigate to offscreen tabs one by one, there is no sense of an overview—plus it is tedious to do if you need to get to the last tab or are looking for something but aren't sure what tab it's on. In my office, most desktop users have mice, and I don't think mouse users do much swiping.

Google got this right in Sheets, where you have the little arrows at bottom-right that move the user forward one screenful of tabs at a time. It's a good model....