Cards Group

El Cards Group es uno de los componentes que deben añadirse al componente Card Container para poder utilizarlo. Se comporta como un contenedor para las tarjetas que contiene. Para insertar un componente de Cards Group en la pantalla, ve al Panel Izquierdo en el constructor visual. Recorre la lista de componentes hasta encontrar el componente Cards Group o haz clic en la barra de búsqueda y escribe su nombre. A continuación, arrastra y suelta el componente en el canvas y configura sus atributos en el panel derecho. Consulta las secciones a continuación para obtener más información.Visual Builder - Left Panel

Atención

El Cards Group debe arrastrarse y soltarse dentro del componente Card Panel Container. Comprueba la vista de árbol y asegúrate de que sigue la estructura jerárquica definida para el Card Container.

Atributos

En el panel derecho, puedes configurar diferentes atributos para personalizar el componente. Consulta Design, Actions y Advanced a continuación para obtener más información.Visual Builder - Right Panel

Design

En la pestaña Design, puedes configurar la información básica del componente seleccionado y los atributos que determinan el aspecto que tendrá el componente en la app. Consulta las secciones a continuación para obtener más información.Design Tab

En esta sección, puedes definir el estilo de uno o varios bordes de tu componente.

Para fijar todos los bordes del componente, haz clic en el icono de eslabón de cadena situado en el centro del cuadrado. La cadena aparece intacta y todos los bordes del cuadrado se vuelven azules.

Para configurar los atributos de los bordes individualmente, haz clic en el borde deseado del icono cuadrado; el borde seleccionado se vuelve azul y el icono de eslabón de cadena aparece roto. Recuerda configurar los atributos para cada borde que desee personalizar.

A continuación, debes establecer el color y la anchura del borde o bordes que desees configurar. Consulta la tabla a continuación para obtener más información.

Color	Color del borde. Para establecer el color, haz clic en el campo Hex y escribe el código de color hexadecimal o haz clic en el icono cuadrado para abrir el selector de color. En el selector de color, selecciona un color o haz clic en HEXA o RGBA, luego haz clic en el campo de la izquierda y escribe un código de color HEXA o RGBA, respectivamente.
Width	Ancho del borde. Escriba un número para establecer el ancho. Para cambiar la unidad de medida, haz clic en la unidad de medida seleccionada en el campo Width (texto de color azul) y selecciona una opción del menú desplegable.

En esta sección, puedes configurar el radio para definir la redondez de las esquinas del componente.

Por defecto, todas las esquinas del componente aparecen seleccionadas. La cadena aparece intacta y los puntos que representan cada esquina del cuadrado se vuelven azules. Si utilizas esta opción, se aplicarán los mismos atributos a todas las esquinas.

Para configurar los atributos de las esquinas individualmente, haz clic en la esquina deseada del icono cuadrado; el punto de la esquina seleccionada se vuelve azul y el icono de eslabón de cadena aparece roto. Recuerda configurar atributos para cada esquina que desees personalizar.

Para aumentar o disminuir el tamaño del radio de los bordes o de un borde específico, escribe el valor en el campo Radius o utiliza la barra deslizante situada a la izquierda o a la derecha, respectivamente. Si el valor de la barra deslizante es superior a cero, los lados del icono cuadrado se vuelven azules y el valor aparece automáticamente en el campo de valor.

Para cambiar la unidad de medida, haz clic en la unidad de medida seleccionada (texto de color azul) y elige una opción del menú desplegable.

En esta sección, puedes definir los ajustes del fondo del componente. Consulta la tabla a continuación para obtener más información.

Flat	Haz clic en el botón de opción Flat para establecer un único color para el fondo del componente. Para establecer un color, haz clic en el campo y escribe un código de color hexadecimal o haz clic en el icono cuadrado para abrir el selector de color. En el selector de color, selecciona un color o haz clic en HEXA o RGBA, luego haz clic en el campo de la izquierda y escribe un código de color HEXA o RGBA, respectivamente. Para establecer un nivel de opacidad, escribe el porcentaje en el campo Opacity.
Gradient	Haz clic en el botón de opción Gradient para establecer un degradado de color para el fondo del componente. Haz clic en cada uno de los iconos cuadrados para abrir el selector de color. En el selector de color, selecciona el color o haz clic en HEX o RGB, luego haz clic en el campo de la izquierda y escribe un código de color HEXA o RGBA para formar el degradado de color. Haz clic en Switch direction para invertir el orden de los colores seleccionados para el degradado. Haz clic en Change to horizontal direction o Change to vertical direction para definir la dirección del degradado en posición horizontal o vertical, respectivamente.
Background Image	Haz clic en la casilla Image para añadir una imagen al fondo del componente. Puedes utilizar una imagen de fondo con las opciones de fondo flat y gradient. Haz clic en el campo Background Image y escribe el nombre de la imagen de fondo, o haz clic en Select an image para abrir el selector de imágenes. Selecciona una de las imágenes de la lista o utiliza la barra de búsqueda para encontrar una imagen por su nombre.

Nota

Si seleccionas el fondo Flat, no podrás elegir el fondo Gradient y viceversa. La opción Background Image está disponible en ambos casos.

En esta sección puedes configurar los atributos básicos del componente. Consulta la tabla a continuación para obtener más información.

Spacing	Espacio entre las tarjetas dentro del grupo de tarjetas. Para establecer el espacio, haz clic en el campo y selecciona un valor entre 1 y 5 en el menú desplegable.
Important For Accessibility	Atributo que define si el lector de pantalla lee o ignora el valor definido en el atributo Texto de accesibilidad del componente. Haz clic en la flecha y selecciona una opción del menú desplegable. Elige true para que el lector de pantalla lea el componente o false para que el lector de pantalla no lea el componente. El valor por defecto es false.
Accessibility Text	Texto alternativo. Añade un texto breve para describir el componente a los usuarios que no puedan verlo. El texto será leído por iOS Voice Over o Android Talk Back. También puedes añadir el texto de accesibilidad al diccionario de traducciones o seleccionar una traducción existente si hay idiomas seleccionados en la configuración de tu app.

En esta sección se configuran los atributos para alinear el texto dentro del componente y se establecen las propiedades de margen y relleno. Consulta la tabla a continuación para obtener más información.

Padding Top	Espacio entre el borde superior del componente y el contenido del componente. Introduce un valor. A continuación, haz clic en la flecha situada a la derecha del campo y selecciona una unidad de medida en el menú desplegable.
Padding Bottom	Espacio entre el borde inferior del componente y el contenido del componente. Introduce un valor. A continuación, haz clic en la flecha situada a la derecha del campo y selecciona una unidad de medida en el menú desplegable.

Actions

No hay atributos configurables en la pestaña Actions del componente Cards Group.

Advanced

No hay atributos disponibles para configurar en la pestaña Advanced para el componente Cards Group.

Veritran Docs