Colocando los estilos del buscador

Clase 12 de 24 • Curso Fundamental de Material UI con React

Kevin Mejia

student•

Una mejor manera de implementar el icono dentro del input es usando una prop llamada InputProps. . A esta se le pasa un objeto que tendrá como llave (key) endAdorment y como valor (value) lo que queremos dentro del input. En este caso es un botón con un icono de buscar. No olvidar encerrar el codigo de retorno entre parentesis. . ++Nota:++ los estilos los estoy usando con variables para ver el código mas limpio. . Entonces, quedaría así el código:

import React from "react";
import { Stack, TextField, IconButton } from "@mui/material";
import SearchIcon from "@mui/icons-material/Search";

const Searcher = () => {
  const estilos = {
    marginTop: "30px",
    width: "80%",
  };
  const styleTextField = {
    width: "90%",
    margin: "0 auto",
  };

  return (
    <Stack sx={estilos} direction="row">
      <TextField
        sx={styleTextField}
        type="search"
        autoComplete="off"
        label="Github User"
        id="outlined-basic"
        placeholder="Octocat"
	//  🔽🔽🔽
        InputProps={{
            endAdornment: (
              <IconButton>
                <SearchIcon />
              </IconButton>
            )
          }}
      />
    </Stack>
  );
};

export default Searcher;

Jhoana España Urresty

student•

Hola, gracias, este InputProps es de MUI ? o es algo de React?

Juan Pablo Trejos Valencia

student•

Hola, es como tal de Mui

Patrick Jhonatan Hernandez Blanco

student•

Así va la UI del proyecto

Rodolfo Sanchez

student•

como pusiste los colores de fondo?

Erick Stiven Campaz

student•

Para lo que se aparecen error en icono recuerde que hay que instalar npm install @mui/icons-material yarn add @mui/icons-material

Fidel Parabacuto

student•

Para no forzar el estilo con CSS. Les dejo la docu https://mui.com/material-ui/react-text-field/

Y mi código

 <Stack
      sx={{ display: 'flex', flexDirection: 'row', justifyContent: 'center' }}
    >
      <TextField
        id="outlined-basic"
        variant="outlined"
        label="GitHub User"
        placeholder="fidelp27"
        sx={{ width: '80%', marginTop: '30px' }}
        InputProps={{
          endAdornment: (
            <InputAdornment position="end">
              <SearchIcon />
            </InputAdornment>
          ),
        }}
      />
    </Stack>

Rolando Oxalc Quispe Juarez

student•

El problema de tu solución es que el icono de seach deja de ser clickleable

Jose Luis Bedoya

student•

me parece mucho mejor esta aplicación! Es mejor! Se puede dar raw styles al icon para que sea clickeable otra vez

Cristopher Alexis Saldaña Yeber

student•

¿Por que grita tanto ?

Daniel Rodrigo Valdivieso Merino

teacher•

Por la emoción de estar compartiendo con todos lo que he aprendido 😊🫶

Fernando Quinteros Gutierrez

student•

📕 Documentación de Text field

https://mui.com/material-ui/react-text-field/#main-content

import React from "react";
import { Stack, TextField, IconButton } from "@mui/material";
import SearchIcon from "@mui/icons-material/Search";

const Searcher = () => {
  const estilos = {
    marginTop: "30px",
    width: "80%",
  };
  const styleTextField = {
    width: "90%",
    margin: "0 auto",
  };

  return (
    <Stack sx={estilos} direction="row">
      <TextField
        sx={styleTextField}
        type="search"
        autoComplete="off"
        label="Github User"
        id="outlined-basic"
        placeholder="Octocat"
	//  🔽🔽🔽
        InputProps={{
            endAdornment: (
              <IconButton>
                <SearchIcon />
              </IconButton>
            )
          }}
      />
    </Stack>
  );
};

export default Searcher;

 <Stack
      sx={{ display: 'flex', flexDirection: 'row', justifyContent: 'center' }}
    >
      <TextField
        id="outlined-basic"
        variant="outlined"
        label="GitHub User"
        placeholder="fidelp27"
        sx={{ width: '80%', marginTop: '30px' }}
        InputProps={{
          endAdornment: (
            <InputAdornment position="end">
              <SearchIcon />
            </InputAdornment>
          ),
        }}
      />
    </Stack>

Colocando los estilos del buscador

Introducción al curso

Bienvenida al curso

Presentación proyecto

¿Qué es Material UI?

Preparación de entorno de desarrollo

Herramientas dentro de Material UI

Componentes simples

Componentes compuestos

Contenedores responsive

Material icons

Bonus

Construcción del proyecto

Análisis detallado del proyecto

Creando el contenedor y el text field

Colocando los estilos del buscador

Construyendo la lógica del buscador

Conectando nuestro proyecto a la API de GitHub

Conectando el buscador con la API

Creando el contenedor y trayendo la imagen de perfil del usuario

Trayendo la información principal del usuario

Trayendo la descripción del usuario

Creando el componente con las estadísticas del usuario

Mostrando la localización del usuario

Ajuste de estilos con SX a los componentes de descripción e información principal

Ajuste de estilos con SX al componente de descripción, PaperInformation y LocationInformation

Evaluación del proyecto

Despedida

Resumen del curso