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.
Javascript
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
Javascript
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:
