Novedades: Web Components Administrador de mosaicos
Garantizar la máxima flexibilidad y agilidad en el desarrollo de aplicaciones con los componentes que utiliza es clave. Es por eso que hemos agregado un nuevo componente a la caja de herramientas de Ignite UI for Web Components: Tile Manager. Echa un vistazo a sus propiedades y mira cómo usarlo.
Radoslav Mirchev
5min read
Esta versión Ignite UI for Web Components 5.3 presenta un nuevo componente que ahorra tiempo con características que garantizan agilidad y una experiencia de usuario óptima: Tile Manager. En esta entrada del blog, explicaremos cómo funciona y analizaremos características como el cambio de tamaño, el reordenamiento, la serialización y mucho más.
Web Components Componente Administrador de mosaicos
El componente Administrador de iconos de Web Components proporciona una interfaz de usuario para mostrar contenido en iconos individuales. Permite a los usuarios interactuar con los mosaicos reorganizándolos y cambiando su tamaño. La libertad de personalizar el diseño y la apariencia del contenido de acuerdo con sus preferencias solo podría ser igualada por el componente Dock Manager. Esta flexibilidad mejora la experiencia del usuario al permitir una forma más personalizada y eficiente de ver y administrar el contenido.
Propiedades del Administrador de mosaicos
Columnas y filas
Como usuario, puede definir el número de columnas de cuadrícula para Web Components Administrador de mosaicos. Para ello, basta con establecer la column-count propiedad en el número deseado de columnas.
Gap
La propiedad Gap define el espacio entre las baldosas. El valor de la gap propiedad debe ser un número seguido de una unidad de longitud (por ejemplo, px, rem, em, ...). Este valor se aplicará tanto al espacio horizontal (ancho) como al espacio vertical (alto) entre mosaicos.
Anchura y altura mínimas
Son propiedades para establecer el ancho mínimo de las columnas (min-column-width) y la altura mínima de las filas (min-row-height) en el Administrador de mosaicos. De forma similar a la propiedad gap, los valores de estas propiedades deben ser un número seguido de una unidad de longitud.
Cambiar el tamaño
El cambio de tamaño en el Administrador de mosaicos es una funcionalidad que permite cambiar el tamaño de los mosaicos mediante tres adornos de cambio de tamaño diferentes.
- Adorno lateral: Ajusta la anchura modificando el tramo de la columna.
- Adorno inferior: Ajusta la altura modificando el intervalo de la fila.
- Adorno de esquina: Ajusta la anchura y la altura simultáneamente.
Reordenar
Puede reordenar los mosaicos en el Administrador de mosaicos mediante la función de arrastrar y soltar. De forma predeterminada, los mosaicos no se pueden arrastrar. Para habilitar esta funcionalidad, establezca la drag-mode propiedad en el Administrador de mosaicos en o tile. tile-header
- Con la
tileopción, puede hacer clic y mantener presionado en cualquier lugar de un mosaico individual para comenzar a arrastrarlo. - Con la
tile-headeropción, solo puede hacer clic y mantener presionada la sección del encabezado del mosaico para iniciar el proceso de arrastre.
Serialización
El Administrador de mosaicos de Web Components proporciona métodos que ayudan a administrar el diseño de los mosaicos:
- El
saveLayoutmétodo le permite guardar la disposición actual de las fichas en el Administrador de baldosas. Captura el orden, el tamaño y la posición actuales de todas las baldosas para que pueda restaurarlas a esta configuración exacta más adelante. - El
loadLayoutmétodo le permite cargar un diseño guardado previamente. Cuando se llama, restaura las baldosas al estado exacto en el que se encontraban cuando se guardó el diseño, incluido su orden, tamaño y posición.
Estilo
También puede personalizar la apariencia de los dos componentes –Tile Manager y Tile. Expone Tile Manager solo una propiedad CSS, base que se puede usar para diseñar el envoltorio base del Administrador de mosaicos. El componente Tile expone varias propiedades CSS que se pueden utilizar.
Propiedades del componente Tile
El componente Web Components mosaico tiene propiedades que se pueden establecer individualmente para cada mosaico. Algunas de estas propiedades incluyen:
- La
col-spanpropiedad especifica el número de columnas que abarcará el mosaico en el diseño, lo que le permite controlar su tamaño horizontal. - La
row-spanpropiedad determina el número de filas que se extenderá verticalmente el mosaico, ajustando la altura del mosaico dentro del diseño. - La
col-startpropiedad especifica la columna inicial donde se coloca el mosaico. - La
row-startpropiedad especifica la fila inicial en la que se coloca el mosaico. - La
disable-fullscreenpropiedad oculta el botón de acción de pantalla completa predeterminado. - La
disable-maximizepropiedad oculta el botón de acción de alternancia de maximización predeterminado. - La
disable-resizepropiedad impide que el usuario cambie el tamaño del icono.
Ignite UI for Web Components 5.3.0 Registro de cambios
Explora todos los detalles aquí.
Added
- Componente del administrador de mosaicos#1402
- List
- El
igc-list-itemcomponente expone una nuevaselectedpropiedad. Cuando se establece en un elemento de la lista, el elemento se resaltará visualmente #1590
- El
Cambiado
- Progressbar
- Use theme schemas #1582
Fixed
- Calendar
- Chip
- Estilos de diseño responsivos mejorados #1588
- Combo
- Estados visuales mejorados del botón de alternancia #1580
Para terminar...
Diseñada a la perfección para la compatibilidad, Ignite UI for Angular es la biblioteca que le permite aprovechar el poder de las últimas tecnologías y los principales lanzamientos. Comprometidos a proporcionarle el mejor kit de herramientas de interfaz de usuario Angular y conocimientos relacionados, nuestro objetivo es equiparlo con más conocimientos, nuevas funciones, rendimiento mejorado y estabilidad mejorada. Algunas de las mejoras se agregaron gracias a las solicitudes de usuarios como tú a través de nuestro repositorio de GitHub Ignite UI for Web Components. Con esto en mente, siempre estamos abiertos a sugerencias y comentarios, ya que nos hacen crecer y responder mejor a sus necesidades de desarrollo.
Si necesitas más detalles, te animamos a que consultes nuestro:
Además
Siga Ignite UI en Medium para mantenerse actualizado 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.
