Barra de herramientas de interfaz de usuario de materiales

Material-UI es una biblioteca de interfaz de usuario que proporciona componentes de React predefinidos y personalizables para un desarrollo web más rápido y sencillo. Estos componentes de Material-UI se basan en la parte superior de Material Design de Google. En este artículo, analicemos el componente Barra de herramientas en la biblioteca Material-UI.

Barra de herramientas:

ToolBar no funciona de forma independiente como la de otros componentes de Material-UI, funciona con AppBar. El componente Barra de herramientas establece las propiedades de los elementos secundarios para alinearlos horizontalmente. El componente de la barra de herramientas simplemente aplica el CSS flexible normal (display: ‘flex’), con centrado vertical a través de alignItems: ‘center’, algo de relleno y minHeight: 56px proporcionado por theme.mixins.toolbar.

Sintaxis:

<AppBar>
<Toolbar>
  <Typography variant="h6">
    This Is ToolBar Example
  </Typography>
</Toolbar>
</AppBar>

Instalación de la aplicación React:

Paso 1 : cree una aplicación React con el siguiente comando.

npx create-react-app toolbar-example

Paso 2: ahora ingrese al directorio del proyecto

cd toolbar-example

Instalación de Material-UI: 

Instalando los archivos fuente de Material-UI a través de npm/yarn, y se encargan de inyectar el CSS necesario.

npm install @material-ui/core
// OR
yarn add @material-ui/core

Importación de AppBar y Toolbar:

import AppBar from '@material-ui/core/AppBar';
import Toolbar from '@material-ui/core/Toolbar';

Accesorios importantes:

• children : es la barra de herramientas child, por lo general puede ser una mezcla de IconButton, Button, Typography, etc.
• componente : el componente utilizado para el Node raíz. O una string para usar el elemento HTML o un componente. por ejemplo: div.
• disabledGutters : se utiliza para habilitar o deshabilitar el relleno de canalones. Ejemplo: verdadero o falso.
• variante : Se utiliza para elegir la variante de la barra de herramientas. Ejemplo: regular, denso.

Nombres de reglas CSS:

• root : Esto aplica estilos al elemento raíz.
• canaletas : Esto aplica estilos al elemento raíz si disabledGutters={false}.
• regular : Esto aplica estilos al elemento raíz si variant=”regular”.
• denso : Esto aplica estilos al elemento raíz si variant=”dense”.

Ejemplo 1: En este ejemplo, hemos implementado la barra de herramientas como 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>
  );
}

Paso para ejecutar la aplicación: ejecute la aplicación utilizando el siguiente comando desde el directorio raíz del proyecto:

npm start

Producción:

Ejemplo 2: como una barra de aplicaciones inferior

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>
  );
}

Producción: