Material-UI es una de las bibliotecas React UI más populares. Los componentes de Material-UI funcionan de forma aislada. Son autosuficientes y solo inyectarán los estilos que necesitan mostrar. No se basan en ninguna hoja de estilo global como normalize.css . Algunos ejemplos de componentes de Material UI son Diálogo, Pestañas, Campo de texto, Menú, Chip, Tarjeta, Paso a paso, Papel. Para usar Material-UI en React, debemos instalarlo manualmente en nuestro proyecto.
requisitos previos:
- Conocimientos básicos de React.
- Cualquier editor de código (editor de texto sublime, VS Code, etc.)
Mapa de ruta a la solución
- Crear un proyecto de muestra
- Instalar material: interfaz de usuario en el proyecto
- Ejemplo de pestañas de implementación
- Aplicación de la solución final
Acercarse:
A) Crear un proyecto de muestra:
- Cree un Proyecto React de muestra ejecutando el siguiente comando en su terminal
npx create-react-app react-material-ui
- El comando anterior creará un modelo de aplicación React dentro de la ruta en la que se ejecutó el comando y garantiza que siempre use la última versión de un generador o herramienta de compilación sin tener que actualizar cada vez que esté a punto de usarlo.
- Ingrese a la carpeta del proyecto escribiendo el siguiente comando
cd react-material-ui/
- Ejecute el proyecto usando el comando
npm start
- Debería poder ver lo siguiente en su navegador
B) Instalar Material – UI en Proyecto:
- Instale Material-UI usando el siguiente comando en su terminal. También puede usar la terminal de VS Code.
npm install @material-ui/core
- Ahora busque App.js en la carpeta src de su proyecto. Elimine todo el código innecesario y agregue algo de código si estamos en el camino correcto.
JavaScript
import
'./App.css'
;
import TabsExample from
'./TabsExample'
;
function
App() {
return
(
<div className=
"App"
>
<h4>
Example to Check which Tab is
active Using Material-UI
</h4>
</div>
);
}
export
default
App;
- Observará que el navegador se actualiza tan pronto como guarde los cambios. Ahora todo está configurado para escribir nuestro ejemplo.
C) Ejemplo de implementación de pestañas:
- Es hora de su editor de código. Cree un archivo llamado TabsExample.js en su carpeta src y pegue el siguiente código en él.
JavaScript
import React from
'react'
;
import Tabs from
'@material-ui/core/Tabs'
;
import Tab from
'@material-ui/core/Tab'
;
export
default
class TabsExample extends React.Component {
constructor(props) {
super
(props);
this
.state = {
value:
'None'
,
};
}
render() {
return
(
<div>
<Tabs
value={
this
.state.value}
indicatorColor=
"primary"
textColor=
"primary"
centered=
"true"
>
<Tab label=
"Tab A"
value=
"Tab A"
/>
<Tab label=
"Tab B"
value=
"Tab B"
/>
</Tabs>
</div>
);
}
}
- Importe su componente anterior recién creado en su archivo App.js. Su archivo App.js debería verse así
JavaScript
import
'./App.css'
;
import TabsExample from
'./TabsExample'
;
function
App() {
return
(
<div className=
"App"
>
<h4>
Example to Check which Tab is
active Using Material-UI
</h4>
<TabsExample/>
</div>
);
}
export
default
App;
- La pantalla se verá así:
Ahora es el momento de las cosas reales. Veamos el enfoque para la solución.
D) Aplicación de la Solución Final:
- La idea es usar la devolución de llamada onChange que se activa automáticamente cuando cambia el valor de una pestaña
Sintaxis:
function(event: object, value: any) => void
Dónde,
event: The event source of the callback value: The index of the child (number)
- Ahora actualice el archivo App.js con el siguiente código:
JavaScript
import React from
'react'
;
import Tabs from
'@material-ui/core/Tabs'
;
import Tab from
'@material-ui/core/Tab'
;
const styles = {
headline: {
fontSize: 24,
paddingTop: 16,
marginBottom: 12,
fontWeight: 400,
color:
'green'
,
},
};
export
default
class TabsExample extends React.Component {
constructor(props) {
super
(props);
this
.state = {
value:
'None'
,
};
}
handleChange = (_, value) => {
this
.setState({
value,
});
};
render() {
return
(
<div>
<Tabs
value={
this
.state.value}
onChange={
this
.handleChange}
indicatorColor=
"primary"
textColor=
"primary"
centered=
"true"
>
<Tab label=
"Tab A"
value=
"Tab A"
/>
<Tab label=
"Tab B"
value=
"Tab B"
/>
</Tabs>
<br></br>
<p style={styles.headline}>
Currently Active Tab: {
this
.state.value}
</p>
</div>
);
}
}
Producción:
Publicación traducida automáticamente
Artículo escrito por PrasannaReddyIsireddy y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA