El widget Tarjeta proporciona un contenedor de contenido flexible y extensible en el que puede mostrar varios bits de información relacionada. Su contenido puede contener distintos widgets, como texto, imágenes, botones y un mapa. Seleccione entre varias plantillas de tarjeta predefinidas o elija una plantilla en blanco para diseñar la suya propia. Puede definir un vínculo para que se pueda hacer clic en la tarjeta y puede configurar diferentes estilos para sus estados Regular y Mantener el puntero.
Ejemplos
Use este widget para apoyar los requisitos de diseño de la aplicación como por ejemplo los siguientes:
- Desea recopilar información relacionada sobre un único tema en una sola parte coherente de contenido, como resumir los detalles del elemento para un mapa o servicio de entidades de ArcGIS.
- Desea agrupar llamadas a la acción concisas, como mostrar un grupo de datos o productos para que su público pueda encontrar lo que necesita y hacer clic en tarjetas para facilitar el acceso.
- Desea mostrar un resumen visual de un lugar con texto breve y una imagen o mapa en el que los usuarios puedan hacer clic para explorar más detalles en otra página o sección de su aplicación.
Notas de uso
Al agregar un widget Tarjeta, elija primero un diseño de plantilla y haga clic en Iniciar. En el lienzo, seleccione los widgets anidados en la tarjeta para modificar su contenido y diseño o agregue más arrastrando widgets desde el panel Insertar a la tarjeta. Todos los widgets son compatibles con el widget Tarjeta.
Sugerencia:
Si los widgets anidados rellenan el contenedor, puede abrir la configuración del widget Tarjeta seleccionándolo en el panel Contorno.
Si configura la tarjeta como un vínculo, su apariencia puede tener dos estados: Regular y Mantener el puntero. Diseñe el estilo del puntero para indicar que se puede hacer clic en la tarjeta o defina otro contenido para el estado del puntero que muestre información adicional a los usuarios en la misma tarjeta. Cuando habilita ambos estados para una tarjeta, los botones de estados aparecen cerca de la tarjeta en el lienzo para alternar entre ellos para un diseño posterior. Aparece un botón Vinculado a 
cuando selecciona los widgets anidados. El botón indica si los ajustes del widget están aislados o sincronizados a través de los estados.
- Para widgets sincronizados, el contenido del widget y ajustes de estilo (fondo, borde y sombra) son los mismos, y el tamaño y posiciones pueden ser diferentes en función de los estados.
- Para widgets aislados, puede configurar propiedades sin afectar a ningún otro widget en otro estado.
- Para usar el mismo widget en otro estado o sincronizar el tamaño y posición del widget, seleccione el widget y aplíquelo al estado del destino.
- Cuando elimina un widget sincronizado, el mismo widget en diferentes estados también se elimina a menos que aísle el widget primero.
Configuración
El widget Tarjeta incluye los siguientes ajustes:
- Seleccionar una plantilla: elija entre los diseños de tarjeta predefinidos o empiece con una plantilla de tarjeta vacía. (Si elige una plantilla, puede personalizar su apariencia posteriormente.)
- Definir vínculo: agregue un vínculo a la tarjeta para ir a otro contenido, por ejemplo, una dirección web, una vista de sección, una ventana o una página en su aplicación. Si vincula a una dirección web, escriba una URL (que empiece por https://). Puede elegir si el vínculo se abre en la misma ventana que la aplicación, en la ventana superior o en una nueva ventana.
- Estados: proporcione una representación visual para comunicar el estado de la tarjeta utilizando diferentes colores, estilos y contenido.
- Regular: el estado predeterminado de la tarjeta sin interacción del usuario. Puede establecer estilos de fondo, borde y sombra de cuadro para este estado.
- Mantener el puntero: el estado que inicia el usuario cuando apunta a una tarjeta. Este estado es opcional. Cuando el estado del puntero está activado, puede aislar el diseño (incluido el diseño y el contenido del widget). Puede establecer estilos de fondo, borde, sombra de cuadro y transición de animación para este estado.
Sugerencia:
Para experimentar con estas opciones, haga clic en Vista en directo en la barra de herramientas del builder.