Material-UI is a user interface library that provides predefined and customizable React components for faster and easy web development, these Material-UI components are based on top of Material Design by Google. In this article let’s discuss the Toolbar component in the Material-UI library.
Toolbar:
ToolBar doesn’t work independently as that of other Material-UI components, it works with the AppBar. The Toolbar component sets the properties of the children to make them horizontally aligned. The Toolbar component simply applies the normal CSS flex(display: ‘flex’), with vertical centering via alignItems: ‘center’, some padding, and the minHeight: 56px provided by the theme.mixins.toolbar.
Syntax:
<AppBar> <Toolbar> <Typography variant="h6"> This Is ToolBar Example </Typography> </Toolbar> </AppBar>
Installing React App:
Step1: Create a React app using the following command.
npx create-react-app toolbar-example
Step 2: Now get into the project directory
cd toolbar-example
Installing Material-UI:
Installing Material-UI’s source files via npm/yarn, and they take care of injecting the CSS needed.
npm install @material-ui/core // OR yarn add @material-ui/core
Importing AppBar and Toolbar:
import AppBar from '@material-ui/core/AppBar'; import Toolbar from '@material-ui/core/Toolbar';
Important Props:
- children: It is Toolbar children, usually it can be a mixture of IconButton, Button, Typography, etc.
- component: The component used for the root node. Either a string to use the HTML element or a component. eg: div.
- disableGutters: It is used to enable or disable gutter padding. Example: true or false.
- variant: It is used to choose the variant of the toolbar. Example: regular, dense.
CSS Rule Names:
- root: This applies styles to the root element.
- gutters: This applies styles to the root element if disableGutters={false}.
- regular: This applies styles to the root element if variant=”regular”.
- dense: This applies styles to the root element if variant=”dense”.
Example 1: In this example, we have implemented the toolbar as Top AppBar.
import React from 'react' ;
import {AppBar, Toolbar, IconButton, Typography, Button} from '@material-ui/core' ;
import { fade, makeStyles } from '@material-ui/core/styles' ;
import MenuIcon from '@material-ui/icons/Menu' ;
const useStyles = makeStyles((theme) => ({ root: {
flexGrow: 1,
},
menuButton: {
marginRight: theme.spacing(2),
},
title: {
flexGrow: 1,
display: 'none' ,
[
theme.breakpoints.up( 'sm' )]: {
display: 'block' ,
},
},
})); export default function ToolbarExample() {
const classes = useStyles();
return (
<div className={classes.root}>
<AppBar position= "static" >
<Toolbar>
<IconButton
className={classes.menuButton}
color= "inherit"
>
<MenuIcon />
</IconButton>
<Typography className={classes.title} variant= "h6" noWrap>
Welcome To GFG
</Typography>
<Button color= "inherit" >Login</Button>
</Toolbar>
</AppBar>
</div>
);
} |
Step to Run Application: Run the application using the following command from the root directory of the project:
npm start
Output:
Example 2: As a Bottom AppBar
import React from 'react' ;
import { makeStyles } from '@material-ui/core/styles' ;
import { AppBar,
Toolbar,
Typography,
IconButton,
Paper,
Fab,
List,
ListItem,
ListItemText} from '@material-ui/core' ;
import MenuIcon from '@material-ui/icons/Menu' ;
import AddIcon from '@material-ui/icons/Add' ;
const messages = [ {
id: 1,
primary: 'Welcome To GeeksForGeeks' ,
secondary: "A Computer Science Portal For Geeks" ,
},
{
id: 2,
primary: 'Welcome To GeeksForGeeks' ,
secondary: "A Computer Science Portal For Geeks" ,
},
{
id: 3,
primary: 'Welcome To GeeksForGeeks' ,
secondary: "A Computer Science Portal For Geeks" ,
},
{
id: 4,
primary: 'Welcome To GeeksForGeeks' ,
secondary: "A Computer Science Portal For Geeks" ,
},
{
id: 5,
primary: 'Welcome To GeeksForGeeks' ,
secondary: "A Computer Science Portal For Geeks" ,
},
{
id: 6,
primary: 'Welcome To GeeksForGeeks' ,
secondary: "A Computer Science Portal For Geeks" ,
},
{
id: 7,
primary: 'Welcome To GeeksForGeeks' ,
secondary: "A Computer Science Portal For Geeks" ,
},
{
id: 8,
primary: 'Welcome To GeeksForGeeks' ,
secondary: "A Computer Science Portal For Geeks" ,
}
]; const useStyles = makeStyles((theme) => ({ text: {
padding: theme.spacing(2, 2, 0),
},
paper: {
paddingBottom: 50,
},
list: {
marginBottom: theme.spacing(2),
},
appBar: {
top: 'auto' ,
bottom: 0,
},
fabButton: {
position: 'absolute' ,
zIndex: 1,
top: -30,
left: 0,
right: 0,
margin: '0 auto' ,
},
})); export default function BottomAppBar() {
const classes = useStyles();
return (
<React.Fragment>
<Paper square className={classes.paper}>
<Typography className={classes.text}
variant= "h5" gutterBottom>
List
</Typography>
<List className={classes.list}>
{messages.map(({ id, primary,
secondary, person }) => (
<React.Fragment key={id}>
<ListItem button>
<ListItemText primary={primary}
secondary={secondary} />
</ListItem>
</React.Fragment>
))}
</List>
</Paper>
<AppBar position= "fixed" color= "primary" className={classes.appBar}>
<Toolbar>
<IconButton edge= "start" color= "inherit" aria-label= "open drawer" >
<MenuIcon />
</IconButton>
<Fab color= "secondary" aria-label= "add" className={classes.fabButton}>
<AddIcon />
</Fab>
</Toolbar>
</AppBar>
</React.Fragment>
);
} |
Output: