Componentes MUI
Guía para diseñar elementos de la interfaz de usuario usando React Material UI
Plantillas de reacción
Las secciones de cada diseño están claramente definidas mediante comentarios o el uso de archivos separados, lo que simplifica la extracción de partes de una página (como una "unidad principal" o un pie de página, por ejemplo) para su reutilización en otras páginas. Para ejemplos de varias partes, una tabla en el archivo README en la ubicación del código fuente vinculado describe el propósito de cada archivo.
Puntos de interrupción predeterminados
Cada punto de interrupción (una clave) coincide con un ancho de pantalla fijo (un valor):
- xs , extrapequeño: 0px
- pequeño , pequeño: 600px
- md , medio: 900px
- grande , grande: 1200px
- XL , extra grande: 1536px
cd /d G: O thers r eact v ite-project
npm run dev
http://localhost:5173/
Escaparate
Echa un vistazo a estas aplicaciones públicas que utilizan Material UI para inspirarte para tu próximo proyecto.
Tematización
Aquí hay utilidades que pueden ayudarlo a personalizar su tema y la posibilidad de cambiarlo en el navegador.
- Crear tema Material-UI: herramienta en línea para crear temas MUI a través de Material Design Color Tool.
- Generador de temas Material-UI: generador de paleta/tema Material-UI.
- Material-UI Theme Editor: una herramienta para generar temas para sus aplicaciones MUI simplemente seleccionando los colores y teniendo una vista previa en vivo.
Proyectos Relacionados
Familia de proyectos Material-UI Design.
- material-ui-theme-editor: una herramienta para generar temas para sus aplicaciones Material UI que presenta vista previa en vivo.
- Generador de paleta de materiales: el generador de paleta oficial de Material Design se puede utilizar para generar una paleta para cualquier color que elija.
- Componentes adicionales: proporciona un conjunto de componentes de "molécula" creados sobre Material-UI, como un pie de página, un CookiesBanner, un botón BackToTop y otros elementos complejos altamente personalizables para ayudar a los desarrolladores a crear las partes macro de su UI muy rápidamente. Esos componentes a menudo están duplicados en todos los sitios; esta biblioteca resuelve exactamente este problema.
- React Admin: un marco de interfaz para crear aplicaciones de administración que se ejecutan en el navegador, además de las API REST/GraphQL, utilizando ES6, React y Material Design.
- Fragmentos de interfaz de usuario de materiales: extensión VSCode que proporciona fragmentos.
- Material UI Codemorphs: extensión VSCode que proporciona codemods.
- Eslint: detecta clases no utilizadas: complemento ESLint para detectar clases de estilo no utilizadas con
@mui/styles .
Componentes
Una lista de componentes de la interfaz de usuario creados con Material-UI Design.
- Campo de contraseña de Material-UI: un campo de contraseña que utiliza Material-UI.
- Diálogo de pantalla completa: un cuadro de diálogo de pantalla completa para Material-UI.
- Carga de Material-UI: cargue controles creados en Material-UI usando FileAPI.
- Campo Super Select: componente desplegable de autocompletar de selección múltiple para Material-UI.
- Formulario de esquema JSON de material: formulario de interfaz de usuario de material generado a partir de json.
- Notistack: snackbars sencillos para Material-UI (para que no tengas que lidiar con su estado de apertura/cierre).
- Material-UI Dropzone: componente Material-UI construido sobre reaccionar-dropzone.
- Formik-Material-UI: enlaces para usar Material-UI con formik.
- Redux-Form-Material-UI: componentes envolventes para facilitar el uso de Material-UI con Redux Form.
- Final-Form-Material-UI: componentes envolventes para facilitar el uso de Material-UI con Final Form.
- Carrusel giratorio automático Material-UI: carrusel de estilo material.
- Imagen Material-UI: imagen de estilo Material con animación de carga.
- Paginación plana Material-UI: un componente de paginación de diseño plano para Material-UI.
- Dx-react-scheduler-Material-UI: un componente de programación/calendario para Material-UI.
- Dx-react-chart-Material-UI: gráficos para Material-UI que visualizan datos utilizando una variedad de tipos de series, incluidas barras, líneas, áreas, dispersión, circular y más.
- Blog mediano Material-UI: componente de tarjeta Material-UI extendido para mostrar los blogs medianos.
- React Github Repo Cards: componente de tarjeta de interfaz de usuario de material extendido para mostrar los repositorios de GitHub.
- Reaccionar componentes moleculares: reaccionar componentes moleculares basados en Material-UI.
- Material-UI NestedMenuItem: reemplazo directo para MenuItem de MUI con menús infinitamente anidados y se abre al pasar el mouse.
- React-planet: crea menús circulares que parecen planetas.
