Imagen (tipo de control) en Jitterbit App Builder
Un control de Imagen muestra una imagen de la biblioteca de imágenes unificada de App Builder en un panel de la capa de UI. Esta biblioteca contiene tanto fotos que subes como conjuntos de iconos integrados de App Builder, así que el mismo control de Imagen puede mostrar una foto cargada por el usuario, un logotipo estático o uno de los iconos integrados, dependiendo de cuál imagen selecciones y cómo configures Propósito de la imagen.
Añadir un control de Imagen
Para añadir un nuevo control de Imagen a un panel, usa el diálogo Añadir un control y selecciona Imagen como el Tipo de control:
Convertir un control existente a un control de Imagen
Para cambiar un control existente para usar el tipo de control Imagen:
-
Navega al control usando el Diseñador en vivo o el Banco de trabajo de aplicaciones:
-
Desde la vista previa de la aplicación, abre la página que contiene el control y selecciona Cajón de acciones > Diseñador en vivo.
-
Desde el Banco de trabajo de aplicaciones, abre la pestaña Páginas, luego en el panel Páginas, localiza la página que contiene el control y ya sea haz doble clic en su fila o haz clic en el ícono Abrir registro. En el panel Diseño del panel de páginas, encuentra el panel que aloja el control y haz clic en Controles.
-
-
Si estás en el Diseñador en vivo, haz clic en el control en la vista de página; esto poblará el Diseñador en vivo con opciones de edición para ese control. Si estás en el Banco de trabajo de aplicaciones, en el panel Controles, encuentra el control y ya sea haz doble clic en su fila o haz clic en el ícono Abrir registro al final de su fila; App Builder abre un diálogo similar al del Diseñador en vivo.
-
En la pestaña Propiedades del control, establece el campo Tipo de control a Imagen.
-
En la pestaña Imagen, usa el campo Imagen para buscar y seleccionar una imagen. El desplegable incluye tanto fotos cargadas como conjuntos de iconos integrados de App Builder; consulta Categorías de iconos para los conjuntos de iconos disponibles.
-
Establece Propósito de la imagen a Ícono o Foto para que coincida con el tipo de imagen que seleccionaste. Esta configuración controla solamente cómo se renderiza la imagen; no filtra qué imágenes están disponibles para seleccionar.
-
(Opcional) Establece Origen de la insignia (Columna) a un valor de columna para mostrar una insignia numérica en la imagen. Consulta Insignias con botones para más detalles.
-
Haz clic en Guardar.
Actualiza la vista de la aplicación para confirmar la actualización.
Categorías de iconos
Los iconos se organizan por categorías en desplegables de selección como los presentes en el campo Ícono en el diálogo Elemento de menú o el campo Imagen en un control Botón o Imagen. A medida que escribes en el campo de búsqueda del desplegable, aparecen iconos coincidentes en una lista agrupada bajo encabezados de categoría que representan diferentes fuentes de iconos.
Las siguientes categorías están disponibles:
| Categoría | Origen | Descripción |
|---|---|---|
| Marcas | Font Awesome Brands | Logotipos de empresas y servicios (por ejemplo, youtube, youtube-square). |
| Sólido | Font Awesome Solid | El estilo de icono Font Awesome sólido predeterminado. |
| Regular | Font Awesome Regular | Una variante delineada y sin relleno del estilo de icono Font Awesome. |
| Material Relleno | Google Material Icons | Una variante sólida y rellena de la biblioteca Google Material Icons. |
| Material Redondeado | Google Material Icons | Una variante de la biblioteca Google Material Icons con esquinas redondeadas. |
| Material Agudo | Google Material Icons | Una variante de la biblioteca Google Material Icons con esquinas afiladas. |
Nota
Google distribuye su biblioteca Material Icons como una fuente con contorno, "Material Icons Outlined". App Builder aplica un relleno a esta fuente y expone el resultado aquí como Material Filled para alinearse con el estilo sólido de Font Awesome.
Para obtener más información sobre cómo cambiar los estilos de iconos actualmente en uso, consulta Cambiar el icono del botón de relleno sólido a regular.
Subir y reemplazar una foto
Combina un control Image con un control File para permitir que los usuarios suban una foto nueva que reemplace la que se muestra actualmente. Establece la propiedad Image Purpose del control Image emparejado en Photo para este caso de uso.
App Builder 4.67 y versiones anteriores
En App Builder 4.67 y versiones anteriores, los iconos integrados y las imágenes cargadas se almacenan por separado, por lo que el siguiente comportamiento difiere de lo que esta página describe:
- Los iconos integrados se muestran usando un tipo de control Icon separado. Para mostrar un icono de forma dinámica, pasa el nombre CSS del icono (por ejemplo,
times-circle-o) al control Icon. - El campo Image en los controles Image, Checkbox y List enumera solo las imágenes cargadas, no los conjuntos de iconos integrados.
Consulta Categorías de iconos para ver los conjuntos de iconos disponibles en App Builder.