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
|
import React from 'react';
import PropTypes from 'prop-types';
import { withStyles } from '@material-ui/core/styles';
import RestoreIcon from '@material-ui/icons/Restore';
import FavoriteIcon from '@material-ui/icons/Favorite';
import LocationOnIcon from '@material-ui/icons/LocationOn';
import { Typography, Grid, BottomNavigation, BottomNavigationAction, Icon } from '@material-ui/core';
const styles = theme => ({
root: {
width: 'auto',
},
divider: {
display: 'block',
margin: `${theme.spacing(3)}px 0`,
}
});
class BottomNav extends React.Component {
state = {
value: 0,
value2: 'recents',
};
handleChange = (event, value) => {
this.setState({ value });
};
handleChange2 = (event, value2) => {
this.setState({ value2 });
};
render() {
const { classes } = this.props;
const { value, value2 } = this.state;
return (
<Grid
container
alignItems="flex-start"
justify="flex-start"
direction="row"
spacing={2}
>
<Grid item md={6} xs={12}>
<Typography variant="button" className={classes.divider}>With Label</Typography>
<div>
<BottomNavigation
value={value}
onChange={this.handleChange}
showLabels
className={classes.root}
>
<BottomNavigationAction label="Recents" icon={<RestoreIcon />} />
<BottomNavigationAction label="Favorites" icon={<FavoriteIcon />} />
<BottomNavigationAction label="Nearby" icon={<LocationOnIcon />} />
</BottomNavigation>
</div>
</Grid>
<Grid item md={6} xs={12}>
<Typography variant="button" className={classes.divider}>Without Label</Typography>
<div>
<BottomNavigation value={value2} onChange={this.handleChange2} className={classes.root}>
<BottomNavigationAction label="Recents" value="recents" icon={<RestoreIcon />} />
<BottomNavigationAction label="Favorites" value="favorites" icon={<FavoriteIcon />} />
<BottomNavigationAction label="Nearby" value="nearby" icon={<LocationOnIcon />} />
<BottomNavigationAction label="Folder" value="folder" icon={<Icon>folder</Icon>} />
</BottomNavigation>
</div>
</Grid>
</Grid>
);
}
}
BottomNav.propTypes = {
classes: PropTypes.object.isRequired,
};
export default withStyles(styles)(BottomNav);
|
