Ignite UI for Angular 16.1.0: ¿Qué hay de nuevo?

Ignite UI for Angular está en constante evolución para mejorar la experiencia de los desarrolladores. Con la versión Ignite UI for Angular 16.1.0, hacemos exactamente eso: ofrecer mejores procesos de creación de aplicaciones, pero también estandarizar la experiencia de usuario en todos nuestros marcos de componentes de interfaz de usuario modernos, incluidos Ignite UI for Angular, Ignite UI for Web Components y Ignite UI for Blazor.

Try Ignite UI for Angular

El nuevo Ignite UI Component Sizing (versión preliminar) - ¿Ahora qué...

Ignite UI for Angular 16.1.0 presenta una nueva forma de ajustar el tamaño de los componentes con el objetivo de reemplazar las propiedades de entrada DisplayDensityToken y displayDensity existentes. El lanzamiento oficial está previsto para Ignite UI for Angular 17.0.0 y las propiedades se eliminarán en Ignite UI for Angular 18.0.0. La forma de establecer la densidad o el tamaño de visualización de los componentes en el futuro es utilizando una sola propiedad CSS personalizada: –ig-size.

¿Por qué era necesario todo esto?

Este cambio no solo nos permitió eliminar un montón de enlaces de clase CSS dispersos por todos nuestros componentes Angular, sino que también nos permitió simplificar la implementación del tamaño de los componentes en las hojas de estilo CSS. Lo que tenemos ahora es una forma universal de cambiar el tamaño de todos los componentes de una aplicación en todos nuestros marcos de componentes de interfaz de usuario modernos.

Las herramientas que usamos para implementar el tamaño de los componentes en Ignite UI for Angular 16.1.0 ahora se exponen como API pública de Sass, lo que permite que sus componentes y diseños respondan a los cambios en –ig-size de la misma manera que lo hacen Ignite UI for Angular componentes.

Cómo dimensionar sus componentes

1. Comience con una limpieza: quite todas las declaraciones en las que se proporciona DisplayDensityToken:

// *.component.ts
// remove the provider declaration for `DisplayDensityToken`
providers: [{ provide: DisplayDensityToken, useValue: { displayDensity: DisplayDen

Quite todos los enlaces o asignaciones mediante programación a la propiedad de entrada displayDensity:

<!-- Remove `[displayDensity]="'compact'"` -->
<igx-grid [displayDensity]="'compact'">...</

2. A continuación, mueva su aplicación al tamaño basado en CSS: en su lugar, use la propiedad CSS personalizada –ig-size para lograr el mismo resultado que con displayDensity. Además de –ig-size, incluimos propiedades CSS para los tamaños de componentes permitidos:

• –ig-size-small – dimensionará el componente al equivalente de compacto;
• –ig-size-medium – dimensionará el componente al equivalente de acogedor;
• –ig-size-large – dimensionará el componente al equivalente de cómodo;

He aquí un ejemplo práctico:

/* Add --ig-size to a component or global file. */
igx-grid {
--ig-size: var(--ig-size-small);
}

Como alternativa, si quieres que todos los componentes de tu app sean pequeños, haz lo siguiente:

body {
--ig-size: var(--ig-size-small);
}

3. Cree diseños personalizados que respondan a los cambios de tamaño: como se mencionó anteriormente, Ignite UI for Angular 16.1.0 expone una API Sass nueva y fácil de usar como parte de nuestra biblioteca de temas, lo que le permite crear diseños y componentes de gran tamaño. Supongamos que queremos crear un elemento div que cambie su tamaño en función del valor de –ig-size. Así es como podemos lograrlo:

<div class="square"></div>

@use "igniteui-angular/theming" as *;
%sizable-element {
@include sizable();
}
.square {
/* Make the element sizable */
@extend %sizable-element;
/*
* Define the default size of the element and
* bind it to the `--ig-size` custom property
*/
--component-size: var(--ig-size, var(--ig-size-large));
/* Define small (10px), medium (20px), and large (30px) sizes */
--size: #{sizable(10px, 20px, 30px)};
width: var(--size);
height: var(--size);
container: square;
}

Como puedes ver en el ejemplo anterior, al utilizar solo una mezcla Sass y una función, hemos hecho que nuestro elemento sea considerable. Cada vez que cambie el valor de –ig-size a una de las opciones permitidas, el elemento .square cambiará de tamaño.

Bonus

En el futuro, cuando el soporte para consultas de contenedor se adopte más ampliamente en todos los navegadores, podremos obtener aún más beneficios de tener –ig-size.

/* Set the background to red when the square container is small */
@container square style(--component-size: 1) {
  .square {
    background: red;
  }
}

Conclusión

Comprometidos a proporcionarle el mejor kit de herramientas de interfaz de usuario Angular y la información relacionada, nuestro objetivo es brindarle más conocimientos, nuevas funciones, rendimiento mejorado y estabilidad mejorada. Aparte de la nueva Pivot Grid, que es tan crucial, sabemos que otros componentes como la Angular Data Grid también son supercríticos. Es por eso que publicamos un útil tutorial de Angular UI Data Grid para ayudarlo a aprender a crear una cuadrícula de interfaz de usuario Angular con todas las funciones desde cero. Ve y míralo.

Además de esto, con el objetivo de acelerar aún más todo el proceso de diseño a código, continuamos desarrollando la mejor plataforma de bajo código basada en la nube: App Builder (TM). Asigna Sketch o Figma archivos de diseño a componentes de interfaz de usuario reales, creando código listo para producción en Angular, Blazor o Web Components.

Algunas de las mejoras se agregaron gracias a las solicitudes de usuarios como tú a través de nuestro repositorio Ignite UI for Angular de GitHub. Con esto en mente, siempre estamos abiertos a sugerencias y comentarios, ya que nos hacen crecer y responder mejor a sus necesidades de desarrollo.

Por último, sabemos que la transparencia y la visibilidad de nuestros próximos objetivos también son fundamentales. Es por eso que siempre mantenemos la hoja de ruta actualizada.

Además

Siga Ignite UI for Angular en Medium para mantenerse al día y conocer los últimos proyectos relacionados con la Angular en los que estamos trabajando. Danos una estrella en GitHub y ayúdanos a seguir mejorando nuestro producto abordando cualquier inquietud, pregunta o solicitud de características en la sección de problemas.