Download Material Ui
Wesley Dupler
Cómo descargar material de interfaz de usuario: Una guía para desarrolladores React
Si está buscando un marco de React UI que sea hermoso, personalizable y fácil de usar, es posible que desee consultar Material UI. Material UI es una biblioteca de componentes de React que implementa el diseño de materiales de Google. Ofrece una completa colección de componentes prefabricados que están listos para su uso en producción desde el primer momento. En este artículo, le mostraremos cómo descargar e instalar la interfaz de usuario de materiales, cómo agregar iconos de fuentes y materiales de Roboto y cómo usar los componentes de la interfaz de usuario de materiales en su aplicación React.
Qué es la interfaz de usuario de material y por qué usarlo?
Material UI es una biblioteca de componentes React de código abierto que implementa el diseño de materiales de Google. Incluye una colección completa de componentes prediseñados que cubren varios aspectos del desarrollo de frontend, como botones, tarjetas, formularios, navegación y más. La interfaz de usuario de materiales es hermosa por diseño y cuenta con un conjunto de opciones de personalización que facilitan la implementación de su propio sistema de diseño personalizado en la parte superior de nuestros componentes. Material UI v5 soporta Material Design v2. La adopción de v3 está tentativamente planeada para Material UI v6-vea el calendario de lanzamiento . Puede seguir este problema de GitHub para futuras actualizaciones.
Características de la interfaz de usuario material
- Interoperabilidad con sistemas de estilo: Una de las principales ventajas de la interfaz de usuario de materiales es que es interoperable con diferentes sistemas de estilo. Esta interoperabilidad significa que los desarrolladores pueden usar la biblioteca con diferentes marcos de CSS o incluso con vanilla CSS.
- Componentes preconstruidos: Material-UI ofrece un conjunto de componentes preconstruidos que le ayudan a crear hermosos sitios web y aplicaciones a la vez que ahorran tiempo y aumentan su productividad.
- Temas personalizables: La biblioteca incluye un amplio conjunto de características de personalización intuitiva. Las plantillas de nuestra tienda demuestran hasta dónde puedes llegar con la personalización.
- Confiable por miles de organizaciones: Material UI tiene la comunidad de UI más grande en el ecosistema React. Es casi tan antiguo como el propio React -su historia se remonta al 2014- y estamos en esto a largo plazo. Puede contar con el apoyo de la comunidad durante los próximos años (p. ej., Stack Overflow).
Ventajas de la interfaz de usuario de materiales
Aquí están algunos de los beneficios de usar la interfaz de usuario de materiales para sus proyectos React:
| Ventaja |
|---|
| Descripción |
|---|
| Enviar más rápido |
| Más de 2.500 colaboradores de código abierto han invertido incontables horas en estos componentes. Enfócate en tu lógica empresarial principal en lugar de reinventar la rueda: tenemos tu interfaz de usuario cubierta. |
| Hermoso por defecto |
| Somos meticulosos con nuestra implementación de Diseño de Materiales, asegurando que cada componente de Interfaz de Usuario de Materiales cumpla con los más altos estándares de forma y función, pero diverge de las especificaciones oficiales donde sea necesario para proporcionar múltiples opciones excelentes. |
| Personalización |
| Nuestros componentes son tan flexibles como potentes. Siempre tienes control total sobre cómo se ven y se comportan. |
| Documentación sin igual |
| La respuesta a su problema se puede encontrar en nuestra documentación. Cómo podemos estar tan seguros? Porque nuestros documentos cuentan con más de 2.000 colaboradores. |
| Dedicado a la accesibilidad |
Si está buscando un marco de React UI que sea hermoso, personalizable y fácil de usar, es posible que desee consultar Material UI. Material UI es una biblioteca de componentes de React que implementa el diseño de materiales de Google. Ofrece una completa colección de componentes prefabricados que están listos para su uso en producción desde el primer momento. En este artículo, le mostraremos cómo descargar e instalar la interfaz de usuario de materiales, cómo agregar iconos de fuentes y materiales de Roboto y cómo usar los componentes de la interfaz de usuario de materiales en su aplicación React.
Qué es la interfaz de usuario de material y por qué usarlo?
Material UI es una biblioteca de componentes React de código abierto que implementa el diseño de materiales de Google. Incluye una colección completa de componentes prediseñados que cubren varios aspectos del desarrollo de frontend, como botones, tarjetas, formularios, navegación y más. La interfaz de usuario de materiales es hermosa por diseño y cuenta con un conjunto de opciones de personalización que facilitan la implementación de su propio sistema de diseño personalizado en la parte superior de nuestros componentes. Material UI v5 soporta Material Design v2. La adopción de v3 está tentativamente planeada para Material UI v6-vea el calendario de lanzamiento . Puede seguir este problema de GitHub para futuras actualizaciones.
Características de la interfaz de usuario material
- Interoperabilidad con sistemas de estilo: Una de las principales ventajas de la interfaz de usuario de materiales es que es interoperable con diferentes sistemas de estilo. Esta interoperabilidad significa que los desarrolladores pueden usar la biblioteca con diferentes marcos de CSS o incluso con vanilla CSS.
- Componentes preconstruidos: Material-UI ofrece un conjunto de componentes preconstruidos que le ayudan a crear hermosos sitios web y aplicaciones a la vez que ahorran tiempo y aumentan su productividad.
- Temas personalizables: La biblioteca incluye un amplio conjunto de características de personalización intuitiva. Las plantillas de nuestra tienda demuestran hasta dónde puedes llegar con la personalización.
- Confiable por miles de organizaciones: Material UI tiene la comunidad de UI más grande en el ecosistema React. Es casi tan antiguo como el propio React -su historia se remonta al 2014- y estamos en esto a largo plazo. Puede contar con el apoyo de la comunidad durante los próximos años (p. ej., Stack Overflow).
Ventajas de la interfaz de usuario de materiales
Aquí están algunos de los beneficios de usar la interfaz de usuario de materiales para sus proyectos React:
| Ventaja |
|---|
| Descripción |
|---|
| Enviar más rápido |
| Más de 2.500 colaboradores de código abierto han invertido incontables horas en estos componentes. Enfócate en tu lógica empresarial principal en lugar de reinventar la rueda: tenemos tu interfaz de usuario cubierta. |
| Hermoso por defecto |
| Somos meticulosos con nuestra implementación de Diseño de Materiales, asegurando que cada componente de Interfaz de Usuario de Materiales cumpla con los más altos estándares de forma y función, pero diverge de las especificaciones oficiales donde sea necesario para proporcionar múltiples opciones excelentes. |
| Personalización |
| Nuestros componentes son tan flexibles como potentes. Siempre tienes control total sobre cómo se ven y se comportan. |
| Documentación sin igual |
| La respuesta a su problema se puede encontrar en nuestra documentación. Cómo podemos estar tan seguros? Porque nuestros documentos cuentan con más de 2.000 colaboradores. |
| Dedicado a la accesibilidad |
| Creemos en construir para todos. Esto significa que seguimos las Pautas de Accesibilidad de Contenido Web (WCAG) y utilizamos las Herramientas de Accesibilidad para Desarrolladores para auditar nuestros componentes. También proporcionamos documentación de accesibilidad y demostraciones para ayudarte a que tus aplicaciones sean más inclusivas. |
Cómo instalar la interfaz de usuario de material con npm o hilado
Instalación por defecto
Para instalar el paquete predeterminado, ejecute el siguiente comando en su terminal:
npm install @mui/material @emotion/react @emotion/styledor
yarn add @mui/material @emotion/react @emotion/styledCon componentes de estilo
Si prefiere usar componentes con estilo en lugar de Emoción, puede instalar el paquete con el siguiente comando:
npm install @mui/material styled-components @mui/styled-engine-scor
Dependencias de pares
También necesita instalar React y PropTypes como dependencias de pares. Puede usar el siguiente comando:
npm install react react-dom prop-typesor
yarn add react react-dom prop-typesCómo agregar fuente y material de Roboto iconos
Para que tu app se vea más consistente con Material Design, puedes agregar la fuente Roboto y los iconos Material a tu proyecto. Hay diferentes formas de hacerlo, pero te mostraremos las más fáciles.
Roboto de fuente
La fuente Roboto es la fuente predeterminada para los componentes de la interfaz de usuario de Material. Puedes añadirlo a tu proyecto importándolo desde Google Fonts en tu archivo index.html. Solo tienes que añadir la siguiente línea dentro de la etiqueta :
Iconos de fuente
Los iconos de fuente son un conjunto de iconos que se representan como fuentes. También puedes utilizarlos en los componentes de la interfaz de usuario de materiales importándolos desde Google Fonts. Solo tienes que añadir la siguiente línea dentro de la etiqueta :
Iconos de SVG
or
Entonces, en su componente React, puede importar y usar el icono de inicio como este:
import HomeIcon from '@mui/icons-material/Home';Cómo usar componentes de interfaz de usuario de materiales en su aplicación React
Ahora que ha instalado la interfaz de usuario de Material y ha agregado la fuente de Roboto y los iconos de Material, está listo para usar los componentes de la interfaz de usuario de Material en su aplicación React. Estos son algunos pasos básicos para empezar.
Importación de componentes
Para usar un componente de interfaz de usuario de material, debe importarlo desde el paquete @mui/material. Por ejemplo, para usar un componente Button, puedes hacer lo siguiente:
import Botón de '@mui/material/Button';Aplicación de temas y estilos
Para personalizar la apariencia de los componentes de la interfaz de usuario de Material, puede usar temas y estilos. Los temas son configuraciones globales que afectan a todos los componentes de tu app, como colores, tipografía, espaciado, etc. Los estilos son configuraciones locales que afectan a componentes o elementos específicos, como márgenes, relleno, alineación, etc.
Para crear y aplicar un tema, debe usar el componente ThemeProvider del paquete @mui/material y envolver su aplicación con él. Luego, puede usar la función createTheme del mismo paquete para generar un objeto de tema con sus configuraciones personalizadas. Por ejemplo, para crear un tema oscuro con un color primario de púrpura, puedes hacer lo siguiente:
import ThemeProvider, createTheme from '@mui/material/styles';// Crear un tema const theme = createTheme( paleta: mode: 'dark', primary: main: '#9c27b0', , , ); // Aplicar el tema >Personalización de componentes
Si desea modificar el comportamiento o la apariencia de un componente de la interfaz de usuario de materiales más allá de lo que los temas y estilos pueden ofrecer, puede usar las características de personalización de la biblioteca. Estos incluyen accesorios, variantes, composición y ganchos. Por ejemplo, para cambiar el tamaño, el color y la variante de un componente Button, puedes usar los accesorios de esta manera:
Click mePara crear sus propias variantes personalizadas de un componente, puede usar la función de variantes del tema. Por ejemplo, para crear una variante redondeada del botón, puede hacer lo siguiente:
// Add a custom variant to the theme const theme = createTheme( components: MuiButton: variants: [ props: variant: 'rounded' , style: borderRadius: '16px', , , ], , , ); // Utilice la variante personalizada Para componer varios componentes juntos, puede usar la función de composición de la biblioteca. Por ejemplo, para crear un componente Card con una imagen, un título y un botón, puede hacer lo siguiente:
import Card from '@mui/material/Card'; import CardMedia from '@mui/material/CardMedia'; import CardContent from '@mui/material/CardContent'; import CardActions from '@mui/material/CardActions'; import Typography from '@mui///Typography'; Botón de importación de '@mui/material/Button'; Para acceder al estado interno o a la lógica de un componente, puede utilizar la función hooks de la biblioteca. Por ejemplo, para usar el estado de alternancia de un componente Switch en su lógica personalizada, puede hacer lo siguiente:
import Switch from '@mui/material/Switch'; import useSwitch from '@mui/core/SwitchUnstyled'; const MySwitch = () => const getInputProps = useSwitch(); const inputProps = getInputProps(); // Use inputProps.checked for your custom logic console.log(inputProps.checked); return ; ;Conclusión y recursos
En este artículo, le hemos mostrado cómo descargar e instalar la interfaz de usuario de Material, cómo agregar la fuente de Roboto y los iconos de Material, y cómo usar los componentes de la interfaz de usuario de Material en su aplicación React. Esperamos que haya encontrado esta guía útil e informativa. Si desea obtener más información sobre la IU de materiales, puede consultar los siguientes recursos:
- El sitio web oficial : El mejor lugar para encontrar documentación, demos, guías y más.
- El repositorio de GitHub : El código fuente de la biblioteca y un lugar para reportar problemas o contribuir.
- El blog : Las últimas noticias y actualizaciones sobre Material UI.
- El servidor de discordia : Una comunidad amigable de desarrolladores y usuarios que están felices de ayudar y chatear.
- La cuenta de Twitter : Síguenos para anuncios y consejos.
Preguntas frecuentes
- Q: Cómo uso la interfaz de usuario de Material con Next.js?
A: La interfaz de usuario de material funciona bien con Next.js, un marco popular para crear aplicaciones React con renderizado del lado del servidor. Puede seguir esta guía para aprender cómo configurar la interfaz de usuario de Material con Next.js.
- P: Cómo uso la interfaz de usuario de Material con Gatsby?
A: La interfaz de usuario de Material también funciona bien con Gatsby, un marco popular para crear aplicaciones estáticas de React. Puede seguir esta guía para aprender cómo configurar la interfaz de usuario de Material con Gatsby.
- Q: Cómo uso la interfaz de usuario de Material con Create React App?
A: La interfaz de usuario de material es compatible con Create React App, una herramienta que le ayuda a crear aplicaciones de React sin configuración. Puede seguir esta guía para aprender cómo configurar la interfaz de usuario de Material con Create React App.
- Q: Cómo puedo personalizar el tema global de Material UI?
A: Puedes personalizar el tema global de la interfaz de usuario de Material usando la función createTheme y pasándola al componente ThemeProvider. Puede anular cualquiera de los valores de tema predeterminados, como colores, tipografía, espaciado, puntos de interrupción, etc. También puede agregar sus propias propiedades personalizadas al objeto de tema. Para más detalles, vea la documentación de tematización .