blob: ff97d161d56eaa5407d9d9271236353fc386ff53 (
plain)
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
|
import React from 'react';
import PhoneIcon from '@material-ui/icons/Phone';
import FavoriteIcon from '@material-ui/icons/Favorite';
import PersonPinIcon from '@material-ui/icons/PersonPin';
import { Paper, Grid, Tabs, Tab, Typography } from '@material-ui/core';
export default class IconTabs extends React.Component {
state = {
value: 0,
value2: 0,
};
handleChange = (event, value) => {
this.setState({ value });
};
handleChange2 = (event, value2) => {
this.setState({ value2 });
};
render() {
return (
<div>
<Grid container spacing={3}>
<Grid item md={6} xs={12}>
<Typography variant="button" gutterBottom>Without Text</Typography>
<Paper>
<Tabs
value={this.state.value2}
onChange={this.handleChange2}
variant="fullWidth"
indicatorColor="primary"
textColor="primary"
>
<Tab icon={<PhoneIcon />} />
<Tab icon={<FavoriteIcon />} />
<Tab icon={<PersonPinIcon />} />
</Tabs>
</Paper>
</Grid>
<Grid item md={6} xs={12}>
<Typography variant="button" gutterBottom>With Text</Typography>
<Paper>
<Tabs
value={this.state.value}
onChange={this.handleChange}
variant="fullWidth"
indicatorColor="secondary"
textColor="secondary"
>
<Tab icon={<PhoneIcon />} label="RECENTS" />
<Tab icon={<FavoriteIcon />} label="FAVORITES" />
<Tab icon={<PersonPinIcon />} label="NEARBY" />
</Tabs>
</Paper>
</Grid>
</Grid>
</div>
);
}
}
|
