1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
|
import React from 'react';
import PropTypes from 'prop-types';
import { withStyles } from '@material-ui/core/styles';
import { Tabs, Tab, Typography } from '@material-ui/core';
const styles = theme => ({
root: {
flexGrow: 1,
backgroundColor: theme.palette.background.paper,
},
tabsRoot: {
borderBottom: '1px solid #e8e8e8',
},
tabsIndicator: {
backgroundColor: '#1890ff',
},
tabRoot: {
textTransform: 'initial',
minWidth: 64,
[theme.breakpoints.up('sm')]: {
minWidth: 72,
},
fontWeight: theme.typography.fontWeightRegular,
marginRight: theme.spacing(4),
fontFamily: [
'-apple-system',
'BlinkMacSystemFont',
'"Segoe UI"',
'Roboto',
'"Helvetica Neue"',
'Arial',
'sans-serif',
'"Apple Color Emoji"',
'"Segoe UI Emoji"',
'"Segoe UI Symbol"',
].join(','),
'&:hover': {
color: '#40a9ff',
opacity: 1,
},
'&$tabSelected': {
color: '#1890ff',
fontWeight: theme.typography.fontWeightMedium,
},
'&:focus': {
color: '#40a9ff',
},
},
tabSelected: {},
typography: {
padding: theme.spacing(3),
},
});
class CustomTabs extends React.Component {
state = {
value: 0,
};
handleChange = (event, value) => {
this.setState({ value });
};
render() {
const { classes } = this.props;
const { value } = this.state;
return (
<div className={classes.root}>
<Tabs
value={value}
onChange={this.handleChange}
classes={{ root: classes.tabsRoot, indicator: classes.tabsIndicator }}
>
<Tab
disableRipple
classes={{ root: classes.tabRoot, selected: classes.tabSelected }}
label="Tab 1"
/>
<Tab
disableRipple
classes={{ root: classes.tabRoot, selected: classes.tabSelected }}
label="Tab 2"
/>
<Tab
disableRipple
classes={{ root: classes.tabRoot, selected: classes.tabSelected }}
label="Tab 3"
/>
</Tabs>
<Typography className={classes.typography}>powered by Material-UI</Typography>
</div>
);
}
}
CustomTabs.propTypes = {
classes: PropTypes.object.isRequired,
};
export default withStyles(styles)(CustomTabs);
|
