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:
App.js
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:
App.js
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:
App.js
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/
Publicación traducida automáticamente
Artículo escrito por saideepesh000 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA