Stack Overflow
Stack Overflow

Questions tagged [react-tabs]

An accessible tab component for React.js.

A tab component for React.js.

Learn more:

62 questions
1
vote
1 answer

How to toggle tabPane content on click in react

I have a App in React. This App has two tabs in the first tab i am showing the list of chated users and in the second tab i am showing all the registerd contacts. Tabs are working as expected . Now my question is when the users is in second tab ,if…
Wani
  • 61
  • 2
  • 9
1
vote
1 answer

How can I change shadow color of active top Tab

I want to change the shadow color of the active top tab. How can I do that? Like the following picture, I want to change the blue color to red color. My Code import {Image, View, Text} from 'react-native'; import {createMaterialTopTabNavigator}…
Ali Mahmoudi
  • 83
  • 2
  • 8
1
vote
0 answers

react-tabs re-render tab (or change tabs programmatically)

I'm trying to create a tabbed section for comments in react, one tab for personal comments and one tab for others comments. I'm using react-tabs package for creating tabs and tab panels and simple-react-comment package inside it to show…
vahid mokhtarzade
  • 15
  • 1
  • 7
1
vote
0 answers

CSSTransition and react-tabs, React.Children.only expected

I tried to make some animation to TabPanel, keeps sending me this error (Error: React.Children.only expected to receive a single React element child.) If i move the oputside the Tabs it works otherwise it throughs the error import React strong…
Shika
  • 11
  • 1
1
vote
1 answer

Navigate between react tabs on button click

I am new to React. I am using React web tabs to create tabs in react. How would one go about triggering a change of tab panels upon clicking a button element, I have two button, "Previous" & "Next". On click of previous button , i want to go to…
Thyagi
  • 71
  • 1
  • 10
1
vote
1 answer

How to link a react tab to a dropdown?

Normally whenever a tab in the in the tablist list is clicked the text in the corresponding index in tabpanel is displayed. For example, if you click the "Option 2" the text "Panel 2" will be displayed. Now I want the same thing to occur whenever…
baisbdhfug
  • 548
  • 1
  • 4
  • 14
1
vote
1 answer

Switching between controlled mode (by using `selectedIndex`) and uncontrolled mode is not supported in `Tabs`

I'm trying to implement some tabs using react-tabs in my next/react application. I have the main page project/:id, that always opens in the 0 index tab, and when selecting each tab, the tab name is added to the route, example:…
alo gon
  • 167
  • 1
  • 3
  • 16
1
vote
1 answer

How to create react tabs with fragment identifiers (hash links)?

I use react-tabs (https://reactcommunity.org/react-tabs/) to create 4 tabs. Now I need to create routes like this "https://example.com/page=01#tab1", "https://example.com/page=01#tab2" for them. They open page with choosen tab when you click on tab…
IleksaNott
  • 11
  • 2
1
vote
0 answers

nested navigation SwitchNavigator>DrawerNavigator>TabsNavigator >StackNavigator

I have SwitchNavigator for login after Switchnavigator it redirects to Drawernavigator. inside Drawernavigator's home component i have Tabnavigator Now, on tabs components on screen I want to got to a screen which should be out from Drawernavigator…
Mayur Baldha
  • 126
  • 1
  • 15
1
vote
3 answers

How to override the default focus css style of react-tab?

I am using react-tab to create an interface like this However if i click on the tab, it will turn into this: It is the default css style when the tab gets focus. I have tried this css (in less) but it is unable to override the default…
Anthony Kong
  • 37,791
  • 46
  • 172
  • 304
0
votes
0 answers

How to align react-tabs vertically with the content appearing to the left of each tab?

I am having a react-tab component with custom css applied to it.I need to align the tablist vertically and the tab panel should be aligned to the right of the tabs, the css i have used is, .react-tabs__tab-list { display: flex; flex-direction:…
rishzeta
  • 15
  • 4
0
votes
1 answer

How to change tab index on clicking second tab

There are two tabs in my code and on click of the second tab I need to show one message but I don't know how to know when the second tab is selected. The problem is the selectedIndex is not getting changed at all and the message which I wanted to…
Naidu
  • 1
  • 1
0
votes
1 answer

How to know which react tab we are on

There are two tabs in my code and on click of the second tab I need to show one message but I'm not knowing how to know when the second tab is selected. The problem is the selectedIndex is not getting changed at all and the message which I wanted to…
Naidu
  • 1
  • 1
0
votes
0 answers

Module not found: Error: Can't resolve 'react-tabs/style/react-tabs.css'

Compiled with problems:X ERROR in ./src/Component/Details/Details.js 8:0-58 Module not found: Error: Can't resolve 'react-tabs' in 'D:\Internship\Akash\edu_nov_intern_2022\geo-location\react\zomatoapp\src\Component\Details' ERROR in…
Md Sohrab Ansari
  • 1
  • 1
0
votes
0 answers

How do I get rid of the grey background that appears when a tab is active on my navigation tab bar React Native

There is a grey background on each icon when it is active. I am not sure how to get rid of it. I have looked everywhere and tried a lot of solutions and nothing seems to work. I'm not sure if I have been putting code in the wrong place. Or using the…
Olly Perry
  • 1
  • 3
1
2
3 4 5