Nextjs Core Tabs
-Style
You will find the styles for this component in
assets/jss/nextjs-material-dashboard-pro/components/customTabsStyle.js
and
assets/jss/nextjs-material-dashboard/components/customTabsStyle.js
.
Example
I will be the leader of a company that ends up being worth billions of dollars, because I got the answers. I understand culture. I am the nucleus. I think that’s a responsibility that I have, to push possibilities, to show people, this is the level that things could be at. I think that’s a responsibility that I have, to push possibilities, to show people, this is the level that things could be at.
I think that’s a responsibility that I have, to push possibilities, to show people, this is the level that things could be at. I will be the leader of a company that ends up being worth billions of dollars, because I got the answers. I understand culture. I am the nucleus. I think that’s a responsibility that I have, to push possibilities, to show people, this is the level that things could be at.
I think that’s a responsibility that I have, to push possibilities, to show people, this is the level that things could be at. So when you get something that has the name Kanye West on it, it’s supposed to be pushing the furthest possibilities. I will be the leader of a company that ends up being worth billions of dollars, because I got the answers. I understand culture. I am the nucleus.
import React from "react";
// @material-ui/core components
import { makeStyles } from "@material-ui/core/styles";
// @material-ui/icons
import Face from "@material-ui/icons/Face";
import Chat from "@material-ui/icons/Chat";
import Build from "@material-ui/icons/Build";
// core components
import CustomTabs from "components/CustomTabs/CustomTabs.js";
const styles = {
textCenter: {
textAlign: "center"
}
};
const useStyles = makeStyles(style);
export default function Tabs() {
const classes = useStyles();
return (
<div>
<CustomTabs
headerColor="primary"
tabs={[
{
tabName: "Profile",
tabIcon: Face,
tabContent: (
<p className={classes.textCenter}>
I think that’s a responsibility that I have, to push
possibilities, to show people, this is the level that
things could be at. So when you get something that has
the name Kanye West on it, it’s supposed to be pushing
the furthest possibilities. I will be the leader of a
company that ends up being worth billions of dollars,
because I got the answers. I understand culture. I am
the nucleus.
</p>
)
},
{
tabName: "Messages",
tabIcon: Chat,
tabContent: (
<p className={classes.textCenter}>
I think that’s a responsibility that I have, to push
possibilities, to show people, this is the level that
things could be at. I will be the leader of a company
that ends up being worth billions of dollars, because
I got the answers. I understand culture. I am the
nucleus. I think that’s a responsibility that I have,
to push possibilities, to show people, this is the
level that things could be at.
</p>
)
},
{
tabName: "Settings",
tabIcon: Build,
tabContent: (
<p className={classes.textCenter}>
think that’s a responsibility that I have, to push
possibilities, to show people, this is the level that
things could be at. So when you get something that has
the name Kanye West on it, it’s supposed to be pushing
the furthest possibilities. I will be the leader of a
company that ends up being worth billions of dollars,
because I got the answers. I understand culture. I am
the nucleus.
</p>
)
}
]}
/>
</div>
);
}
export default withStyles(styles)(Tabs);
Props
CustomTabs.defaultProps = {
value: 0,
};
CustomTabs.propTypes = {
// the default opened tab - index starts at 0
value: PropTypes.number,
// function for changing the value
// note, if you pass this function,
// the default function that changes the tabs will no longer work,
// so you need to create the changing functionality as well
changeValue: PropTypes.func,
headerColor: PropTypes.oneOf([
"warning",
"success",
"danger",
"info",
"primary",
"rose",
]),
title: PropTypes.string,
tabs: PropTypes.arrayOf(
PropTypes.shape({
tabName: PropTypes.string.isRequired,
tabIcon: PropTypes.object,
tabContent: PropTypes.node.isRequired,
})
),
rtlActive: PropTypes.bool,
plainTabs: PropTypes.bool,
};
If you wish to change this component, you should also check the following props from the base Material-UI components: