API de botón de interfaz de usuario de material

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 Tipografía en la biblioteca Material-UI.

Los botones son una de las formas en que el usuario se comunica en la aplicación. Material UI proporciona un componente <Button/> personalizable que se puede usar para varios propósitos a través de sus accesorios.

Sintaxis :

<Button> This ia a Button </Button> 

Instalación de la aplicación React:

• Paso 1: Cree una aplicación React usando el siguiente comando.

  npx create-react-app button-example

• Paso 2: ahora ingrese al directorio del proyecto

  cd button-example

Instalación de Material-UI: instalación de los archivos fuente de Material-UI a través de npm/yarn, y ellos 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 Button from '@material-ui/core/Button';

Botones contenidos: los botones contenidos usan elevación y relleno para dar un alto énfasis a los usuarios. Los hay de varios tipos

• Defecto
• Primario
• Secundario
• Enlace
• Desactivado

Lista de accesorios:

• niños: Es el contenido del botón.
• clases: Es para anular o extender los estilos aplicados al componente.
• tamaño: Se utiliza para personalizar el tamaño del botón.
• disabledElevation: Es el valor booleano para determinar la elevación del botón.
• fullWidth: Es el valor booleano que determina si cubre todo el ancho del contenedor o no.
• disabled: Es el valor booleano para habilitar o deshabilitar el botón.
• disabledElevation:  Es el valor booleano para habilitar o deshabilitar la apariencia elevada del botón.
• disabledFocusRipple: Es el valor booleano para habilitar o deshabilitar el efecto dominó del foco del teclado.
• startIcon: Elemento antes de los niños.
• endIcon: Elemento después de los niños.
• href: Su URL para enlazar cuando se hace clic en el botón.
• color: Es el color del componente.
• disabledRipple: Es el valor booleano para deshabilitar o habilitar el efecto dominó.

Ejemplo:

import React from 'react';
import { makeStyles } from '@material-ui/core/styles';
import Button from '@material-ui/core/Button';
import Typography from '@material-ui/core/Typography';
  
const useStyles = makeStyles((theme) => ({
  root: {
    textAlign: "center",
    marginTop: "50px"
  },
  btns:{
      '& > *': {
      margin: theme.spacing(1),
    },
      marginTop: "40px"
  }
}));
  
export default function SimpleContainer() {
  const classes = useStyles();
  
  return (
    <div className={classes.root}>
      <Typography variant="h4" component="h4">
          Welcome to GFG
      </Typography>
      <div className={classes.btns}>
        <Button variant="contained">Default</Button>
        <Button variant="contained" color="primary">
          Primary
        </Button>
        <Button variant="contained" color="secondary">
          Secondary
        </Button>
        <Button variant="contained" disabled>
          Disabled
        </Button>
        <Button variant="contained" color="primary" 
                href="#contained-buttons">
          Link
        </Button>
      </div>
    </div>
  );
}

Producción:

Botones de texto: los botones de texto se enfatizan más en el contenido del botón que en la apariencia del botón.

Ejemplo:

import React from 'react';
import { makeStyles } from '@material-ui/core/styles';
import Button from '@material-ui/core/Button';
import Typography from '@material-ui/core/Typography';
  
const useStyles = makeStyles((theme) => ({
  root: {
    textAlign: "center",
    marginTop: "50px"
  },
  btns:{
      '& > *': {
      margin: theme.spacing(1),
    },
      marginTop: "40px"
  }
}));
  
export default function SimpleContainer() {
      const classes = useStyles();
  
  return (
    <div className={classes.root}>
        <Typography variant="h4" component="h4">
              Welcome to GFG
            </Typography>
            <div className={classes.btns}>
      <Button>Default</Button>
      <Button color="primary">Primary</Button>
      <Button color="secondary">Secondary</Button>
      <Button disabled>Disabled</Button>
      <Button href="#text-buttons" color="primary">
        Link
      </Button>
      </div>
    </div>
  );
}

Producción:

Botones delineados: son botones de texto envueltos con un borde

Ejemplo:

import React from 'react';
import { makeStyles } from '@material-ui/core/styles';
import Button from '@material-ui/core/Button';
import Typography from '@material-ui/core/Typography';
  
const useStyles = makeStyles((theme) => ({
  root: {
    textAlign: "center",
    marginTop: "50px"
  },
  btns:{
      '& > *': {
      margin: theme.spacing(1),
    },
      marginTop: "40px"
  }
}));
  
export default function SimpleContainer() {
      const classes = useStyles();
  
  return (
    <div className={classes.root}>
      <Typography variant="h4" component="h4">
          Welcome to GFG
      </Typography>
      <div className={classes.btns}>
        <Button variant="outlined">Default</Button>
        <Button variant="outlined" color="primary">
          Primary
        </Button>
        <Button variant="outlined" color="secondary">
          Secondary
        </Button>
        <Button variant="outlined" disabled>
          Disabled
        </Button>
        <Button variant="outlined" color="primary" 
                href="#outlined-buttons">
          Link
        </Button>
      </div>
    </div>
  );
}

Producción:

Referencia: https://material-ui.com/api/button/