f
Home

Published

- 7 min de lectura

MUI X v7 en pruebas

css mui
img of MUI X v7 en pruebas

Traducido de la entrada de José Freitas en el blog de Material UI

Estamos a finales de enero y ya podemos empezar a desplegar algunos de los planes para 2024. Tenemos nuevos componentes, características interesantes, y un montón de mejoras tanto para desarrolladores como para usuarios finales.

A partir de ahora, MUI X v7 está en beta. La mayoría de los cambios de ruptura están en su lugar, y cambiamos nuestro enfoque hacia el perfeccionamiento y la expansión sobre la nueva versión.

Data Grid

Hemos introducido cambios críticos de última hora diseñados no sólo para mejorar la experiencia del desarrollador, sino también para llevar la experiencia del usuario a un nuevo nivel.

Cabeceras adhesivas

Las cabeceras de columna y las implementaciones de fijación se han refactorizado para mejorar la experiencia del usuario. Observará un Data Grid con mayor capacidad de respuesta, un desplazamiento horizontal más suave y una mejor compatibilidad con lectores de pantalla. El siguiente vídeo muestra algunas de estas mejoras. IMAGE ALT TEXT HERE

⚠️ La nueva experiencia de desplazamiento horizontal es mucho mejor, pero la solución tiene una limitación: las cabeceras de las columnas ya no pueden ser transparentes porque el contenido se desplaza detrás de ellas.

Si utiliza nuestro sistema de tematización, la cuadrícula de datos se adaptará perfectamente a su aplicación.

Sin el sistema de tematización, es posible que tenga que establecer manualmente un color de fondo adecuado para mantener su diseño.

Diseño mejorado del panel de columnas

El panel de gestión de columnas presenta ahora un diseño más elegante, basado en casillas de verificación, que sustituye al anterior estilo de botón de alternancia. Además, hemos extraído el componente interno para facilitar la introducción de la próxima interfaz de usuario pivotante.

Soporte de objetos Date en el modelo de filtrado

El filterModel admite ahora objetos Date para los tipos de columna date y dateTime, lo que proporciona una experiencia de filtrado más intuitiva y eficaz.

Aunque los valores de cadena siguen siendo compatibles para estos tipos, cualquier actualización del filterModel realizada a través de la interfaz de usuario (por ejemplo, mediante el panel de filtrado) utilizará ahora automáticamente objetos Date, lo que garantiza la coherencia y la facilidad de manejo de los datos.

Menor tamaño del paquete

La introducción de un punto de entrada independiente para las configuraciones regionales ha reducido significativamente el tamaño del paquete del índice de barril cuando el árbol no está operativo (por ejemplo, Webpack en modo de desarrollo).

Por ejemplo, con el paquete npm @mui/x-data-grid, este cambio ha supuesto una reducción de aproximadamente el 22%, reduciendo el tamaño del paquete de 114,2 kB a 88,5 kB.

Nuevas características estables

Durante las actualizaciones de versiones mayores, MUI X introduce nuevas características bajo la bandera experimentalFeatures o usando el prefijo unstable_. Esta aproximación sirve como seguridad en caso de que haya necesidad de cambiar el API basado en el feedback de los usuarios.

Nos complace anunciar que las siguientes características han sido promovidas a estable:

Tree View

Tras la promoción del componente de los laboratorios a MUI X, nuestro principal objetivo ha sido mejorar su experiencia para los desarrolladores. Esto incluye esfuerzos para clarificar la documentación y mejorar los ejemplos clave, haciéndolos más informativos y fáciles de usar.

Una iniciativa particularmente significativa es la alternativa que ahorra tiempo a la arquitectura JSX tradicional, la RichTreeView.

RichTreeView

Hemos dividido la Tree View en dos componentes distintos.

El primero es el SimpleTreeView, que conserva el enfoque JSX clásico y familiar y sigue siendo el que está detrás de la etiqueta <TreeView /> original.

El segundo es el RichTreeView, una nueva variante diseñada para agilizar el proceso de desarrollo, y con la que pretendemos dar soporte a varios casos de uso comunes desde el primer momento.

Al igual que la Data Grid, sólo requiere un conjunto de datos y, posiblemente, algunas propiedades para renderizar; hace todo el trabajo pesado por usted, manejando internamente la mayor parte de las complejidades.

   const myDataSet = [
	{
		id: "node-1",
		label: "Node 1",
		children: [
			{ id: "node-1-1", label: "Node 1.1" },
			{ id: "node-1-2", label: "Node 1.2" }
		]
	},
	{
		id: "node-2",
		label: "Node 2"
	}
];
   <RichTreeView items="{myDataSet}" multiSelect />

¡Mira el nuevo componente!

Gráficos

Desde el lanzamiento estable inicial de MUI X Charts hace unos meses, hemos estado escuchando diligentemente sus comentarios y centrándonos en perfeccionar los gráficos básicos para garantizar que se adapten eficazmente a sus diversos casos de uso. Esto incluye correcciones de errores, mejoras en la documentación y soporte para escenarios más complejos.

Línea de referencia

El componente ChartsReferenceLine mejora la visualización de datos, proporcionando a los usuarios una referencia clara para comprender y analizar mejor los puntos de datos clave.

Encuentra más detalles en la documentación.

Selector de fecha y hora

La atención se ha centrado principalmente en el desarrollo de los nuevos y esperados componentes, DateTimeRangePicker y TimeRangePicker, junto con un importante esfuerzo por mejorar la accesibilidad en los campos, garantizando que nuestros componentes sean lo más inclusivos y fáciles de usar posible.

Mientras prosigue nuestro camino hacia estas nuevas incorporaciones, nuestro compromiso de mejorar las funciones existentes sigue siendo una prioridad absoluta. En consecuencia, actualizamos constantemente los componentes existentes para que se adapten perfectamente a las últimas versiones de las bibliotecas de fechas compatibles.

Selector de intervalos de fechas y horas

Dé soporte a nuevos casos de uso con este componente tan esperado. La última incorporación al conjunto de selectores de fecha y hora es el <DateTimeRangePicker />, un componente diseñado para enriquecer la experiencia del usuario con la selección avanzada de fecha y hora. Este intuitivo selector simplifica el proceso de selección de intervalos de fechas y horas, por lo que resulta ideal para aplicaciones que requieren una programación detallada o la selección de periodos.

Aprenda ahora a utilizar y personalizar este nuevo componente.

Soporte para date-fns v3

Los selectores de fecha y hora ahora son compatibles con las versiones v2 y v3 de date-fns y puede seleccionar la versión que desee en una de las dos líneas (formas) de importación:

   // date-fns v2.x
import { AdapterDateFns } from "@mui/x-date-pickers/AdapterDateFns";
   // date-fns v3.x
import { AdapterDateFns } from "@mui/x-date-pickers/AdapterDateFnsV3";

Próximos pasos

A medida que nos acercamos a la versión estable de la v7, nuestra hoja de ruta está bien definida y se centra en ofrecer mejoras y funciones clave justo antes o un par de semanas después del lanzamiento de la versión estable.

Data Grid

Tree View

Gráficos

Selector de fecha y hora

Guía de migración

Somos plenamente conscientes de que actualizar una biblioteca de dependencias puede resultar a veces desalentador. Para facilitar la transición a la nueva versión, hemos documentado todos los cambios de última hora en nuestras guías de migración:

Estas guías específicas para cada componente son páginas de referencia diseñadas para ayudarle en caso de que encuentre algún problema al actualizar a la nueva versión principal. Es nuestra forma de hacer el proceso de actualización más manejable y menos pesado para usted. No obstante, si necesita más ayuda, no dude en ponerse en contacto con nosotros y enviarnos sus comentarios.

Cómo participar

Sus comentarios han sido muy valiosos para el desarrollo del MUI X, y siempre estamos encantados de recibirlos. Por favor, considere compartir sus experiencias y puntos débiles:

¡Esperamos sus comentarios!