Interfaz de usuario de materiales | Barra de aplicaciones ReactJS

Posted on by Rudeus Greyrat

Material-UI es una biblioteca que proporciona componentes React para un desarrollo web fácil y rápido. Podemos juntar fácilmente componentes realmente estéticos y funcionales y hacerlo funcionar de acuerdo a nuestro uso ya que todos los componentes son configurables. Esto ahorra mucho tiempo ya que no tenemos que luchar con CSS para hacer que las cosas estén presentables. Los componentes de Material-UI funcionan de forma aislada. Son autosuficientes y solo inyectarán los estilos que necesitan mostrar. 

Aprenderá cómo configurar y usar Material-UI en su aplicación web React a medida que construimos una aplicación de demostración «Iniciar sesión».

Como puede ver, la interfaz de usuario consta de elementos de diseño de materiales. Usaremos componentes Material-UI para mostrar un formulario de inicio de sesión al usuario. La aplicación consta de una barra de aplicaciones en la parte superior que contiene el título de la aplicación, dos campos de texto que se utilizan para ingresar el correo electrónico y la contraseña y un botón para iniciar sesión.

Generación del proyecto React: Primero, necesitamos crear un nuevo proyecto React. Esto se puede hacer usando el script create-react-app de la siguiente manera:

npx create-react-app signin-material-ui

Después de ejecutar este comando, está disponible un nuevo directorio de proyecto signin-material-UI. Cambie a la carpeta del proyecto recién creada y encontrará el proyecto de inicio de React.

Inicie su proyecto React por:

npm start

Instalación de la biblioteca y las dependencias de Material-UI: para poder usar los componentes de Material-UI, debemos asegurarnos de haberlo instalado en nuestro proyecto, lo que se puede hacer de la siguiente manera:

npm install @material-ui/core

Implementación de la aplicación de muestra: eliminación del contenido predeterminado, antes de comenzar a construir nuestro proyecto, debemos eliminar el contenido predeterminado del proyecto responsable de la pantalla de inicio:

  • Seleccione todos los archivos en la carpeta src y elimínelos.
  • Cree un nuevo archivo index.js en la carpeta src.

Ahora podemos agregar nuestro propio código al archivo index.js.

Componentes que usaremos:

Nombre del componente                   Accesorios utilizados                  Descripción
barra de aplicaciones posición El tipo de posicionamiento.
Barra de herramientas – Barra de herramientas
Botón variante La variante a utilizar.
color El color del componente. 
ancho completo Si es verdadero, el botón ocupará todo el ancho de su contenedor.
Campo de texto variante La variante a utilizar.
margen  Si es denso o normal, ajustará el espaciado vertical de este y los componentes contenidos.
requerido Si es verdadero, la etiqueta se muestra como requerida y el elemento de entrada será requerido.
ancho completo Si es verdadero, la entrada ocupará todo el ancho de su contenedor.
identificación El id del elemento de entrada. Utilice esta propiedad para hacer que la etiqueta y el texto auxiliar sean accesibles para los lectores de pantalla.
etiqueta El contenido de la etiqueta.
nombre  Atributo de nombre del elemento de entrada.
escribe Tipo del elemento de entrada. Debe ser un tipo de entrada HTML5 válido.
autocompletar  Este accesorio ayuda a los usuarios a completar formularios más rápido, especialmente en dispositivos móviles.
Etiqueta de control de formulario control  Un elemento de mando. Por ejemplo, puede ser una radio, un interruptor o una casilla de verificación.
etiqueta El texto que se utilizará en un elemento de etiqueta envolvente.
Caja valor El valor del componente. El navegador utiliza «on» como valor predeterminado.
color El color del componente.
Enlace href Dirección de enlace.
variante Aplica los estilos de tipografía del tema.
Cuadrícula envase  Si es verdadero, el componente tendrá el comportamiento del contenedor flexible. Deberías envolver artículos en un contenedor.
artículo Si es verdadero, el componente tendrá el comportamiento de elemento flexible. Deberías envolver artículos en un contenedor.
Tipografía variante Aplica los estilos de tipografía del tema.
Envase componente El componente utilizado para el Node raíz. Ya sea una string para usar un elemento HTML o un componente.
anchura máxima Determine el ancho máximo del contenedor. El ancho del contenedor crece con el tamaño de la pantalla. Establézcalo en falso para deshabilitar maxWidth.

  1. Importación de los componentes anteriores: Tenemos que importar estos componentes antes de poder usarlos en nuestro proyecto escribiendo declaraciones de importación para cada componente en nuestro archivo index.js junto con las declaraciones de importación necesarias de React y ReactDOM.

    JavaScript

    import React from "react";
    import ReactDOM from "react-dom";
    import AppBar from "@material-ui/core/AppBar";
    import Toolbar from "@material-ui/core/Toolbar";
    import Button from "@material-ui/core/Button";
    import TextField from "@material-ui/core/TextField";
    import FormControlLabel from "@material-ui/core/FormControlLabel";
    import Checkbox from "@material-ui/core/Checkbox";
    import Link from "@material-ui/core/Link";
    import Grid from "@material-ui/core/Grid";
    import Typography from "@material-ui/core/Typography";
    import Container from "@material-ui/core/Container";

  2. Creación de la función Signing: Primero, crearemos un elemento contenedor dentro de la función SignIn que se usará para envolver todos los componentes.

    JavaScript

    function SignIn(){
    return(
        <Container component="main" maxWidth="xs">
            <div>
            .
            .
            .
            </div>
        </Container>
        )
    }
      
    ReactDOM.render(<SignIn />, document.getElementById("root"));

  3. Creación de un componente de la barra de aplicaciones:

    JavaScript

    <AppBar position="static">
              <Toolbar>
                <Typography variant="h6">Sign In</Typography>
              </Toolbar>
    </AppBar>

    Salida: No incluimos ningún componente, solo hay un título.

  4. Creación del componente de formulario de inicio de sesión: el formulario contendrá dos campos de texto, cada uno para el correo electrónico y la contraseña, una casilla de verificación para recordarme, un botón de inicio de sesión y algunos enlaces.

    JavaScript

    <form noValidate>
          
              // Email Textfield
              <TextField
                variant="outlined"
                margin="normal"
                required
                fullWidth
                id="email"
                label="Email Address"
                name="email"
                autoComplete="email"
                autoFocus
              />
                
              // Password Textfield
              <TextField
                variant="outlined"
                margin="normal"
                required
                fullWidth
                name="password"
                label="Password"
                type="password"
                id="password"
                autoComplete="current-password"
              />
                
              // Remember Me Checkbox
              <FormControlLabel
                control={<Checkbox value="remember" 
                                   color="primary" />}
                label="Remember me"
              />
                
              // Sign In button
              <Button type="submit" 
                      fullWidth variant="contained" 
                      color="primary"> 
                Sign In
              </Button>
              <Grid container>
                <Grid item xs>
                  
                  // Forgot Password link
                  <Link href="#" variant="body2">
                    Forgot password?
                  </Link>
                </Grid>
                <Grid item>
                  
                  // Sign Up Link
                  <Link href="#" variant="body2"> 
                    {"Don't have an account? Sign Up"}
                  </Link>
                </Grid>
              </Grid>
            </form>

    Salida: Al hacer este componente, hemos completado nuestro proyecto. 

Código completo: este es index.js si borra la carpeta src y crea un solo archivo indes.js.

Javascript

import React from "react";
import ReactDOM from "react-dom";
import AppBar from "@material-ui/core/AppBar";
import Toolbar from "@material-ui/core/Toolbar";
import Button from "@material-ui/core/Button";
import TextField from "@material-ui/core/TextField";
import FormControlLabel from "@material-ui/core/FormControlLabel";
import Checkbox from "@material-ui/core/Checkbox";
import Link from "@material-ui/core/Link";
import Grid from "@material-ui/core/Grid";
import Typography from "@material-ui/core/Typography";
import Container from "@material-ui/core/Container";
  
function SignIn() {
  return (
    <Container component="main" maxWidth="xs">
      <div>
        <AppBar position="static">
          <Toolbar>
            <Typography variant="h6">
                Sign In
            </Typography>
          </Toolbar>
        </AppBar>
        <form noValidate>
          <TextField
            variant="outlined"
            margin="normal"
            required
            fullWidth
            id="email"
            label="Email Address"
            name="email"
            autoComplete="email"
            autoFocus
          />
          <TextField
            variant="outlined"
            margin="normal"
            required
            fullWidth
            name="password"
            label="Password"
            type="password"
            id="password"
            autoComplete="current-password"
          />
          <FormControlLabel
            control={<Checkbox value="remember" 
                               color="primary" />}
            label="Remember me"
          />
          <Button type="submit" 
                  fullWidth variant="contained" 
                  color="primary">
            Sign In
          </Button>
          <Grid container>
            <Grid item xs>
              <Link href="#" variant="body2">
                Forgot password?
              </Link>
            </Grid>
            <Grid item>
              <Link href="#" variant="body2">
                {"Don't have an account? Sign Up"}
              </Link>
            </Grid>
          </Grid>
        </form>
      </div>
    </Container>
  );
}
  
ReactDOM.render(<SignIn />, document.getElementById("root"));

Producción:

Publicación traducida automáticamente

Artículo escrito por 16shubhamagarwal y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *