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, puedes definir el número de columnas de cuadrícula para Web Components Tile Manager. Para ello, simplemente establece lacolumn-count propiedad en el número deseado de columnas.
Gap
La propiedad de Gap define el espacio entre losetas. El valor de lagap 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 (altura) entre las fichas.
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. Similar a la propiedad de hueco, 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
Puedes reordenar las casillas en el Administrador de Mosaicos usando la función de arrastrar y soltar. Por defecto, las casillas no se pueden arrastrar. Para habilitar esta funcionalidad, configura ladrag-mode propiedad en el Administrador de Tiles en cualquieratile de las dostile-header.
- Con la
tileopción, puedes hacer clic y mantener pulsado en cualquier lugar de una casilla individual para empezar a arrastrarla. - Con la
tile-headeropción, solo puedes hacer clic y mantener pulsado en la sección de cabecera de la casilla 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 te permite guardar la disposición actual de las losetas en el Administrador de Loseta. Captura el orden, tamaño y posición actuales de todas las casillas para que puedas restaurarlas a esta configuración exacta más adelante. - El
loadLayoutmétodo te permite cargar un diseño guardado previamente. Cuando se llama, restaura las casillas al estado exacto en que estaban cuando se guardó el diseño, incluyendo su orden, tamaño y posición.
Estilo
También puedes personalizar la apariencia de los dos componentes –Tile ManageryTile. SoloTile Manager expone una propiedad CSS,base que puede usarse para estilizar el envoltorio base del Tile Manager. El componente Tile expone varias propiedades CSS que puedes usar.
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 cuántas columnas atravesará la loseta en la maquetación, permitiéndote controlar su tamaño horizontal. - La
row-spanpropiedad determina cuántas filas se extenderá verticalmente la baldosa, ajustando la altura de la loseta dentro de la disposición. - La
col-startpropiedad especifica la columna inicial donde se coloca la ficha. - La
row-startpropiedad especifica la fila inicial donde se coloca la ficha. - La
disable-fullscreenpropiedad oculta el botón de acción predeterminado a pantalla completa. - La
disable-maximizepropiedad oculta el botón predeterminado de activar la acción de maximizar. - Esta
disable-resizepropiedad impide que el usuario redimensione la ficha.
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 revela una nuevaselectedpropiedad. Cuando se establece en un elemento de lista, este 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.
