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: