CODEWITHSUNDEEP
reactjs
Rohit Verma
Rohit Verma

Reputation: 3785

React Material tabs orientation change in responsive?

How change React Material tabs orientation change in responsive? I'm using React Material version 4

I need orientation="horizontal" in responsive in desktop it should be orientation="vertical"

My Code:-

<Tabs
                    orientation="vertical" // this need to change in responsive
                    onChange={handleTabsChange}
                    scrollButtons="auto" 
                    value={currentTab}
                    variant="scrollable"
                    className={classes.profileTabs}
                  >

Thanks for your efforts!

Upvotes: 2

Views: 1918

Answers (2)

James F. Thomas
James F. Thomas

Reputation: 109

I was able to get my Tab component to change its orientation value based on screen size by utilizing useMediaQuery and the useTheme hooks as shown below:

import { useMediaQuery } from '@mui/material';

import { useTheme } from '@mui/material/styles';

Inside my component but before the render/return enter image description here

Then in my Tabs component inside the orientation attribute enter image description here

The only caveat is that you need to change the flex-direction of the Box/Container that holds your tabs and its panels.

By default flex boxes are set to row, so in order for your panels to render under your newly horizontally situated tabs you need to update the flex direction to column

enter image description here

Hope this helps.

Upvotes: 2

Nathan
Nathan

Reputation: 78449

You can use react-responsive to use the useMediaQuery hook, and conditionally render horizonal or vertical orientiation based on screen width.

// or whatever breakpoint you want to set
const smallScreen = useMediaQuery("(max-width: 768px)");

return(
<Tabs
   orientation={smallScreen ? "vertical" : "horizonal"} 
   onChange={handleTabsChange}
   scrollButtons="auto" 
   value={currentTab}
   variant="scrollable"
   className={classes.profileTabs}
>
)

Upvotes: 1

Related Questions