Material UI is a Material Design library made for React.
It’s a set of React components that have Material Design styles.
In this article, we’ll look at how to customize tabs with Material UI.
We can make tabs centered with the centered
prop.
For example, we can write:
import React from "react";
import AppBar from "@material-ui/core/AppBar";
import Tabs from "@material-ui/core/Tabs";
import Tab from "@material-ui/core/Tab";
import Box from "@material-ui/core/Box";
function TabPanel(props) {
const { children, value, index, ...other } = props;
return <div {...other}>{value === index && <Box p={3}>{children}</Box>}</div>;
}
export default function App() {
const [value, setValue] = React.useState(0);
const handleChange = (event, newValue) => {
setValue(newValue);
};
return (
<>
<AppBar position="static">
<Tabs value={value} onChange={handleChange} centered>
<Tab label="Item One" />
<Tab label="Item Two" />
</Tabs>
</AppBar>
<TabPanel value={value} index={0}>
Item One
</TabPanel>
<TabPanel value={value} index={1}>
Item Two
</TabPanel>
</>
);
}
Then the tabs will be centered.
We can make tabs scrollable with the scrollButtons
set to auto
and variant
set to scrollable
.
This way, the scroll buttons will be shown on mobile and hidden in the desktop.
For example, we can write:
import React from "react";
import AppBar from "@material-ui/core/AppBar";
import Tabs from "@material-ui/core/Tabs";
import Tab from "@material-ui/core/Tab";
import Box from "@material-ui/core/Box";
function TabPanel(props) {
const { children, value, index, ...other } = props;
return <div {...other}>{value === index && <Box p={3}>{children}</Box>}</div>;
}
export default function App() {
const [value, setValue] = React.useState(0);
const handleChange = (event, newValue) => {
setValue(newValue);
};
return (
<>
<AppBar position="static">
<Tabs
value={value}
onChange={handleChange}
variant="scrollable"
scrollButtons="auto"
>
{Array(10)
.fill()
.map((_, i) => (
<Tab label={`Item ${i + 1}`} />
))}
</Tabs>
</AppBar>
{Array(10)
.fill()
.map((_, i) => (
<TabPanel value={value} index={i}>
Item {i + 1}
</TabPanel>
))}
</>
);
}
#programming #software-development #technology #web-development #javascript