scrollable tabs dont work on RTL mode properly

[Mood-al]

Describe the bug A clear and concise description of what the bug is.

Hey guys when i sat the direction on RTL mod the tabs stopped scroll automaticlly as it shown in this video notice i scrolled on my touch bad so it moved

https://user-images.githubusercontent.com/63562308/152907839-005b6fbd-7f09-46e1-adbc-af83754948b9.mp4

• OS: [e.g. iOS] windows 10 home edition
• Browser [e.g. chrome, safari] chrome
• Version [e.g. 22] latest

[Mood-al]

@mlaursen hey man thank you so much for the fix

I'm wondering is there any chance to add prev / next buttons to control the tabs? Ot at least adding api to control them for example adding some function to control them so we can add our own buttons?

[mlaursen]

I don't have an example of this on the documentation site, but you can actually manually control the active tab by providing activeIndex and onActiveIndexChange props to the TabsManager. So here's a quick example of adding buttons that can increment and decrement the tab index:

https://codesandbox.io/s/tabs-example-configurable-tabs-forked-r3j63k?file=/src/Demo.tsx

Is that kind of what you were hoping for?

[Mood-al]

I don't have an example of this on the documentation site, but you can actually manually control the active tab by providing activeIndex and onActiveIndexChange props to the TabsManager. So here's a quick example of adding buttons that can increment and decrement the tab index:

https://codesandbox.io/s/tabs-example-configurable-tabs-forked-r3j63k?file=/src/Demo.tsx

Is that kind of what you were hoping for?

Oh thank you so much for the demo I want something similar I dont want button to control the active tab i want button to navigate between the tabs something like this https://react-nav-tabs.vercel.app/

[mlaursen]

Ahhh, okay. I'll look into creating a native API for something like this. For now, here's an example of manually controlling the scroll position:

https://codesandbox.io/s/t0pvm7?file=/src/Demo.tsx

Tabs have the scrollbar hidden by default by setting scrollbar-width: none since it makes the default tab indicator hard to see. You can re-enable the scrollbar by adding scrollbar-width: auto. You can then control the scroll position with buttons by attaching a ref to the Tabs component.

[Mood-al]

Ahhh, okay. I'll look into creating a native API for something like this. For now, here's an example of manually controlling the scroll position:

https://codesandbox.io/s/t0pvm7?file=/src/Demo.tsx

Tabs have the scrollbar hidden by default by setting scrollbar-width: none since it makes the default tab indicator hard to see. You can re-enable the scrollbar by adding scrollbar-width: auto. You can then control the scroll position with buttons by attaching a ref to the Tabs component.

That's exactly what I'm looking for thank you so much. I wanted to ask you is there any possible way to just use the tabs separated from the other react-md components like i dont want to install the entire library inside my project just for using the tabs which is all i need in my project.

[mlaursen]

Yeah, you can kind of do this by using the scoped packages instead of the root react-md package. However, the @react-md/tabs package also requires some behavior from @react-md/utils so a minimal setup would be something like:

npm install --save @react-md/utils @react-md/tabs
npm install --save-dev sass     # if not done so already

@use '@react-md/tabs/dist/mixins' as *;

// generate tabs styles and any other required styles
@include react-md-utils;

import { Dir, UserInteractionModeListener } from "@react-md/utils";

render(
  <UserInteractionModeListener>
    <Dir>
      <App />
    </DIr>
  </UserInteractionModeListener>,
  rootElement
);

Example: https://codesandbox.io/s/react-md-tabs-minimal-4zzmdh?file=/src/index.tsx

[Mood-al]

Thank you so much man i really appreciate it 🙏