Skip to content

Commit 644aa26

Browse files
sperry94oliviertassinari
sperry94
authored and
oliviertassinari
committed
[docs] Add Tabs TypeScript demo (#15053)
* [docs] Add TS demos for Tabs components * running prettier for NavTabs
1 parent 12fa8c0 commit 644aa26

13 files changed

+766
-0
lines changed

‎docs/src/pages/demos/tabs/CenteredTabs.tsx

Lines changed: 38 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,38 @@
1+
import React from 'react';
2+
import { makeStyles } from '@material-ui/core/styles';
3+
import Paper from '@material-ui/core/Paper';
4+
import Tabs from '@material-ui/core/Tabs';
5+
import Tab from '@material-ui/core/Tab';
6+
7+
const useStyles = makeStyles({
8+
root: {
9+
flexGrow: 1,
10+
},
11+
});
12+
13+
function CenteredTabs() {
14+
const classes = useStyles();
15+
const [value, setValue] = React.useState(0);
16+
17+
function handleChange(event: React.ChangeEvent<{}>, newValue: number) {
18+
setValue(newValue);
19+
}
20+
21+
return (
22+
<Paper className={classes.root}>
23+
<Tabs
24+
value={value}
25+
onChange={handleChange}
26+
indicatorColor="primary"
27+
textColor="primary"
28+
centered
29+
>
30+
<Tab label="Item One" />
31+
<Tab label="Item Two" />
32+
<Tab label="Item Three" />
33+
</Tabs>
34+
</Paper>
35+
);
36+
}
37+
38+
export default CenteredTabs;

‎docs/src/pages/demos/tabs/CustomizedTabs.tsx

Lines changed: 133 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,133 @@
1+
import React from 'react';
2+
import { makeStyles, withStyles } from '@material-ui/styles';
3+
import Tabs from '@material-ui/core/Tabs';
4+
import Tab from '@material-ui/core/Tab';
5+
import Typography from '@material-ui/core/Typography';
6+
import { Theme } from '@material-ui/core/styles';
7+
8+
interface StyledTabsProps {
9+
value: number;
10+
onChange: (event: React.ChangeEvent<{}>, newValue: number) => void;
11+
}
12+
13+
const StyledTabs = withStyles({
14+
indicator: {
15+
display: 'flex',
16+
justifyContent: 'center',
17+
backgroundColor: 'transparent',
18+
'& > div': {
19+
maxWidth: 40,
20+
width: '100%',
21+
backgroundColor: '#635ee7',
22+
},
23+
},
24+
})((props: StyledTabsProps) => <Tabs {...props} TabIndicatorProps={{ children: <div /> }} />);
25+
26+
interface StyledTabProps {
27+
label: string;
28+
}
29+
30+
const StyledTab = withStyles((theme: Theme) => ({
31+
root: {
32+
textTransform: 'initial',
33+
color: '#fff',
34+
fontWeight: theme.typography.fontWeightRegular,
35+
fontSize: theme.typography.pxToRem(15),
36+
marginRight: theme.spacing(1),
37+
},
38+
}))((props: StyledTabProps) => <Tab disableRipple {...props} />);
39+
40+
const useStyles = makeStyles((theme: Theme) => ({
41+
root: {
42+
flexGrow: 1,
43+
backgroundColor: theme.palette.background.paper,
44+
},
45+
tabsRoot: {
46+
borderBottom: '1px solid #e8e8e8',
47+
},
48+
tabsIndicator: {
49+
backgroundColor: '#1890ff',
50+
},
51+
tabRoot: {
52+
textTransform: 'initial',
53+
minWidth: 72,
54+
fontWeight: theme.typography.fontWeightRegular,
55+
marginRight: theme.spacing(4),
56+
fontFamily: [
57+
'-apple-system',
58+
'BlinkMacSystemFont',
59+
'"Segoe UI"',
60+
'Roboto',
61+
'"Helvetica Neue"',
62+
'Arial',
63+
'sans-serif',
64+
'"Apple Color Emoji"',
65+
'"Segoe UI Emoji"',
66+
'"Segoe UI Symbol"',
67+
].join(','),
68+
'&:hover': {
69+
color: '#40a9ff',
70+
opacity: 1,
71+
},
72+
'&$tabSelected': {
73+
color: '#1890ff',
74+
fontWeight: theme.typography.fontWeightMedium,
75+
},
76+
'&:focus': {
77+
color: '#40a9ff',
78+
},
79+
},
80+
tabSelected: {},
81+
typography: {
82+
padding: theme.spacing(3),
83+
},
84+
demo2: {
85+
backgroundColor: '#2e1534',
86+
},
87+
}));
88+
89+
function CustomizedTabs() {
90+
const classes = useStyles();
91+
const [value, setValue] = React.useState(0);
92+
93+
function handleChange(event: React.ChangeEvent<{}>, newValue: number) {
94+
setValue(newValue);
95+
}
96+
97+
return (
98+
<div className={classes.root}>
99+
<Tabs
100+
value={value}
101+
onChange={handleChange}
102+
classes={{ root: classes.tabsRoot, indicator: classes.tabsIndicator }}
103+
>
104+
<Tab
105+
disableRipple
106+
classes={{ root: classes.tabRoot, selected: classes.tabSelected }}
107+
label="Tab 1"
108+
/>
109+
<Tab
110+
disableRipple
111+
classes={{ root: classes.tabRoot, selected: classes.tabSelected }}
112+
label="Tab 2"
113+
/>
114+
<Tab
115+
disableRipple
116+
classes={{ root: classes.tabRoot, selected: classes.tabSelected }}
117+
label="Tab 3"
118+
/>
119+
</Tabs>
120+
<Typography className={classes.typography}>Ant Design UI powered by Material-UI</Typography>
121+
<div className={classes.demo2}>
122+
<StyledTabs value={value} onChange={handleChange}>
123+
<StyledTab label="Workflows" />
124+
<StyledTab label="Datasets" />
125+
<StyledTab label="Connections" />
126+
</StyledTabs>
127+
<Typography className={classes.typography} />
128+
</div>
129+
</div>
130+
);
131+
}
132+
133+
export default CustomizedTabs;

‎docs/src/pages/demos/tabs/DisabledTabs.tsx

Lines changed: 24 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,24 @@
1+
import React from 'react';
2+
import Paper from '@material-ui/core/Paper';
3+
import Tabs from '@material-ui/core/Tabs';
4+
import Tab from '@material-ui/core/Tab';
5+
6+
function DisabledTabs() {
7+
const [value, setValue] = React.useState(2);
8+
9+
function handleChange(event: React.ChangeEvent<{}>, newValue: number) {
10+
setValue(newValue);
11+
}
12+
13+
return (
14+
<Paper square>
15+
<Tabs value={value} indicatorColor="primary" textColor="primary" onChange={handleChange}>
16+
<Tab label="Active" />
17+
<Tab label="Disabled" disabled />
18+
<Tab label="Active" />
19+
</Tabs>
20+
</Paper>
21+
);
22+
}
23+
24+
export default DisabledTabs;

‎docs/src/pages/demos/tabs/FullWidthTabs.tsx

Lines changed: 76 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,76 @@
1+
import React from 'react';
2+
import PropTypes from 'prop-types';
3+
import SwipeableViews from 'react-swipeable-views';
4+
import { makeStyles, Theme, useTheme } from '@material-ui/core/styles';
5+
import AppBar from '@material-ui/core/AppBar';
6+
import Tabs from '@material-ui/core/Tabs';
7+
import Tab from '@material-ui/core/Tab';
8+
import Typography from '@material-ui/core/Typography';
9+
10+
interface TabContainerProps {
11+
children?: React.ReactNode;
12+
dir?: string;
13+
}
14+
15+
function TabContainer({ children, dir }: TabContainerProps) {
16+
return (
17+
<Typography component="div" dir={dir} style={{ padding: 8 * 3 }}>
18+
{children}
19+
</Typography>
20+
);
21+
}
22+
23+
TabContainer.propTypes = {
24+
children: PropTypes.node.isRequired,
25+
dir: PropTypes.string.isRequired,
26+
};
27+
28+
const useStyles = makeStyles((theme: Theme) => ({
29+
root: {
30+
backgroundColor: theme.palette.background.paper,
31+
width: 500,
32+
},
33+
}));
34+
35+
function FullWidthTabs() {
36+
const classes = useStyles();
37+
const theme = useTheme();
38+
const [value, setValue] = React.useState(0);
39+
40+
function handleChange(event: React.ChangeEvent<{}>, newValue: number) {
41+
setValue(newValue);
42+
}
43+
44+
function handleChangeIndex(index: number) {
45+
setValue(index);
46+
}
47+
48+
return (
49+
<div className={classes.root}>
50+
<AppBar position="static" color="default">
51+
<Tabs
52+
value={value}
53+
onChange={handleChange}
54+
indicatorColor="primary"
55+
textColor="primary"
56+
variant="fullWidth"
57+
>
58+
<Tab label="Item One" />
59+
<Tab label="Item Two" />
60+
<Tab label="Item Three" />
61+
</Tabs>
62+
</AppBar>
63+
<SwipeableViews
64+
axis={theme.direction === 'rtl' ? 'x-reverse' : 'x'}
65+
index={value}
66+
onChangeIndex={handleChangeIndex}
67+
>
68+
<TabContainer dir={theme.direction}>Item One</TabContainer>
69+
<TabContainer dir={theme.direction}>Item Two</TabContainer>
70+
<TabContainer dir={theme.direction}>Item Three</TabContainer>
71+
</SwipeableViews>
72+
</div>
73+
);
74+
}
75+
76+
export default FullWidthTabs;

‎docs/src/pages/demos/tabs/IconLabelTabs.tsx

Lines changed: 42 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,42 @@
1+
import React from 'react';
2+
import Paper from '@material-ui/core/Paper';
3+
import { makeStyles } from '@material-ui/core/styles';
4+
import Tabs from '@material-ui/core/Tabs';
5+
import Tab from '@material-ui/core/Tab';
6+
import PhoneIcon from '@material-ui/icons/Phone';
7+
import FavoriteIcon from '@material-ui/icons/Favorite';
8+
import PersonPinIcon from '@material-ui/icons/PersonPin';
9+
10+
const useStyles = makeStyles({
11+
root: {
12+
flexGrow: 1,
13+
maxWidth: 500,
14+
},
15+
});
16+
17+
function IconLabelTabs() {
18+
const classes = useStyles();
19+
const [value, setValue] = React.useState(0);
20+
21+
function handleChange(event: React.ChangeEvent<{}>, newValue: number) {
22+
setValue(newValue);
23+
}
24+
25+
return (
26+
<Paper square className={classes.root}>
27+
<Tabs
28+
value={value}
29+
onChange={handleChange}
30+
variant="fullWidth"
31+
indicatorColor="secondary"
32+
textColor="secondary"
33+
>
34+
<Tab icon={<PhoneIcon />} label="RECENTS" />
35+
<Tab icon={<FavoriteIcon />} label="FAVORITES" />
36+
<Tab icon={<PersonPinIcon />} label="NEARBY" />
37+
</Tabs>
38+
</Paper>
39+
);
40+
}
41+
42+
export default IconLabelTabs;

‎docs/src/pages/demos/tabs/IconTabs.tsx

Lines changed: 42 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,42 @@
1+
import React from 'react';
2+
import { makeStyles } from '@material-ui/core/styles';
3+
import Paper from '@material-ui/core/Paper';
4+
import Tabs from '@material-ui/core/Tabs';
5+
import Tab from '@material-ui/core/Tab';
6+
import PhoneIcon from '@material-ui/icons/Phone';
7+
import FavoriteIcon from '@material-ui/icons/Favorite';
8+
import PersonPinIcon from '@material-ui/icons/PersonPin';
9+
10+
const useStyles = makeStyles({
11+
root: {
12+
flexGrow: 1,
13+
maxWidth: 500,
14+
},
15+
});
16+
17+
function IconTabs() {
18+
const classes = useStyles();
19+
const [value, setValue] = React.useState(0);
20+
21+
function handleChange(event: React.ChangeEvent<{}>, newValue: number) {
22+
setValue(newValue);
23+
}
24+
25+
return (
26+
<Paper square className={classes.root}>
27+
<Tabs
28+
value={value}
29+
onChange={handleChange}
30+
variant="fullWidth"
31+
indicatorColor="primary"
32+
textColor="primary"
33+
>
34+
<Tab icon={<PhoneIcon />} />
35+
<Tab icon={<FavoriteIcon />} />
36+
<Tab icon={<PersonPinIcon />} />
37+
</Tabs>
38+
</Paper>
39+
);
40+
}
41+
42+
export default IconTabs;

0 commit comments

Comments
 (0)