Acerca de los Temas de Estilo
Los Temas tienen una función de Vista previa, donde puedes obtener una representación visual rápida de cómo se ven exactamente las diferentes pantallas y paneles en App Builder se verá con el tema seleccionado aplicado. Esta guía describe la despliegue actual de Temas.
Nota
Copia un tema si deseas conservar los cambios durante una actualización. Si estás usando un tema para fines de página o panel, deja el tema base en blanco. Si lo configuras como tema de la aplicación, se cargará el CSS del tema de la aplicación dos veces.
Descripción General
App Builder permite la personalización de cómo aparece visualmente una aplicación en la capa de aplicación mediante el aprovechamiento de Temas de estilo. App Builder los temas son combinaciones definidas de Componentes y Tipos de valor que le permiten controlar la apariencia de áreas definidas de la interfaz de usuario y la experiencia de usuario de la capa de aplicación. Un componente aquí representa un área en la interfaz de usuario de la capa de aplicación cuyas propiedades se pueden cambiar, por ejemplo, Página es un componente. Los tipos de valor representan las propiedades específicas que se pueden cambiar o definir, por ejemplo, Color de fondo es un tipo de valor.
Por ejemplo: Establezca el Color de fondo [Value type] de los Enlaces [Interface] ser morado.
Se envían varios Temas base predefinidos con App Builder que puede ser utilizado fácilmente por su aplicación tal como está, o puede aprovecharse como un tema base que puede personalizar aún más. Además, las siguientes opciones están disponibles a través de Temas:
- Los tipos de configuración de temas están disponibles para configurar la alineación, el espaciado y las transiciones CSS
- Las siguientes áreas nuevas de Páginas de App Builder se exponen para personalizarse mediante temas:
- Áreas de bienes raíces de gráficos, mapas y calendarios
- Margen de mosaico en tableros/carriles, centrado de mosaico en un panel
- Conjuntos de controles de panel de varias filas, encabezados y celdas (permitiendo filas MRP más grandes)
- Validaciones (errores, advertencias, avisos y excepciones presentadas al usuario)
- Botón Atrás
- Botón Cargar más filas
- Capacidad de ocultar la barra de herramientas si todos los controles intrínsecos están ocultos, incluida la desactivación del recuento
- El botón Cerrar ('x') ahora es parte del Panel y se puede diseñar de manera similar
- Soporte de visibilidad del panel que oculta el Panel pero reserva el espacio (valor de "3")
- Ahora se pueden ocultar los encabezados del panel o ajustar su tamaño mediante Formatos
- Las fuentes a nivel de sitio se pueden cargar de forma remota
Estado Sin Tema
Sin ninguna información temática definida y aplicada, App Builder en el nivel de la capa de aplicación, aparece sin tema y con un estilo mínimo. Con el uso de temas, un diseñador puede mejorar rápidamente el aspecto general de una aplicación.
Interfaces
Crear un tema nuevo y asignarlo a una aplicación no producirá ningún cambio visible, ya que el tema nuevo no tiene implementaciones. Los colores elegidos a nivel de tema no se aplican automáticamente a ninguna parte de la interfaz de usuario de la capa de aplicación. Para ver colores personalizados a través de la capa de aplicación, debe configurar los ajustes de componentes. La figura 2 muestra el color de fondo del componente de la barra de título de la página configurado en violeta para el área de enlaces.
Los componentes son partes de la interfaz de usuario que pueden recibir implementaciones de estilo.
Tipos de Valores
Una vez especificado un componente, puede seleccionar un tipo de valor para aplicar una propiedad. Los tipos de valor pueden hacer referencia a colores de fuente, colores de fondo, imágenes, alineación, información de gradiente, información de tamaño, etc., según el área de bienes raíces específica que haya seleccionado para personalizar. En la página de temas, cada tipo de valor tiene información de texto de ayuda correspondiente que contiene consejos útiles e instrucciones sobre qué información específica proporcionar.
Referenciar Colores Mediante Sintaxis Reservada
Al especificar colores en el área Temas de App Builder, (color del borde, color de fondo, etc.) puede hacer referencia al nombre de uno de los tres colores definidos en el nivel de tema. Esto permite una personalización más rápida al utilizar la función Copiar.
Los términos de sintaxis reservados que puede especificar son:
{PrimaryColor}{SecondaryColor}{ComplementaryColor}
Ajuste de Colores
Al utilizar nombres reservados, también se pueden ajustar los colores en cuanto a brillo, oscuridad y opacidad.
Se pueden ajustar los colores en cuanto a brillo, oscuridad y opacidad. Esta personalización está disponible para los siguientes términos reservados:
{PrimaryColor}{SecondaryColor}{ComplementaryColor}
Para ajustar el brillo y la oscuridad del color, agregue un carácter de barra vertical junto con un valor decimal numérico (valor positivo para aumentar o valor negativo para oscurecer el color). Los valores esperados son -.9- .9.
Sintaxis: {PrimaryColor|.25} o {PrimaryColor|-.25}
Para ajustar la opacidad del color, agregue el carácter tilde junto con un valor decimal numérico. Los valores esperados son .1- .9.
Sintaxis: {PrimaryColor~.25}
Botón Copiar
Se puede copiar cualquier tema. Utilice esta función si desea comenzar a utilizar rápidamente un tema y simplemente configurar los tres colores para Primario, Secundario y Complementario. Hay muchos temas predefinidos disponibles que se pueden seleccionar y utilizar tal como están o personalizarlos aún más para comenzar a utilizarlos rápidamente.
App Builder temas Predefinidos
App Builder viene con varios temas predefinidos. Aunque técnicamente se pueden editar, al actualizar se perderán todos los cambios.
Sugerencias
Si especifica un color de fondo oscuro, asegúrese de utilizar un color de fuente que sea legible para todo el texto. Aproveche la propiedad text-shadow incluida en el color de fuente para agregar contraste adicional.
Apéndice
Componentes
| Área Inmobiliaria | Nombre de la Interfaz | Descripción |
|---|---|---|
| Página | Contenedor - Página | El contenedor para las Páginas |
| Contenedor - Sitio | El cuerpo general del sitio, ventanas modales, otras ventanas emergentes | |
| Pestaña - Activa | Pestañas activas en una página | |
| Pestaña - Inactiva | Pestañas inactivas en una página | |
| Contenedor de pestañas | El contenedor de las pestañas que aparecen en las ventanas gráficas reducidas | |
| Página - Barra de título | Enlaces | Enlaces en la barra superior de la página |
| Menús desplegables - Contenedor | Los elementos del menú desplegable | |
| Menús desplegables - Elementos del menú | El menú desplegable, abierto con elementos del menú | |
| Barra de título - Botón Atrás | El botón Atrás que navega a la página anterior | |
| Barra de título - Contenedor | La barra superior que contiene el nombre de la página, la navegación y el botón "más" | |
| Barra de título - Título de la página | El elemento contenedor en la barra superior solo para el título de la página | |
| Barra de título - Divisores | Pequeños divisores entre elementos | |
| Página - Cajón de acciones | Elementos del cajón | Botones del cajón de acciones |
| Menú del sitio | El enlace Inicio que va a la página de inicio del sitio | |
| Estado del servicio: sin conexión | El ícono triangular se utiliza para indicar que el servicio no se está ejecutando | |
| Estado del servicio - En línea | El ícono triangular se utiliza para indicar que el servicio está en ejecución | |
| Estado del servicio: Desconocido | El ícono triangular se utiliza para indicar que el servicio se encuentra en un estado desconocido | |
| Ventana emergente de página | Botón Cerrar | El botón X que cierra los paneles modales |
| Contenedor | Contenedor de página superpuesta | |
| Contenedor - Contenedor de paneles | Paneles que aparecen como una superposición | |
| Panel | Indicador de actividad | Círculo animado que indica la actividad de la red del panel |
| Panel - Contenedor | Panel que contiene el encabezado y el contenido del panel | |
| Panel - Contenido | Contenedor de contenido del panel | |
| Panel - Deshabilitado | Paneles que están deshabilitados porque tienen enlaces incompletos | |
| Panel - Contenedor del panel | El contenedor exterior de cada panel | |
| Panel - Barra de título | El área sobre un panel contiene el nombre del panel | |
| Panel - Barra de herramientas | Barra de herramientas | Barra de herramientas que contiene botones y controles a nivel de panel |
| Panel - Panel de una sola fila | Conjunto de controles - Contenedor | Contenedor de conjunto de campos que contiene controles de formulario |
| Conjunto de control - Etiqueta | La parte de leyenda del contenedor del conjunto de campos | |
| Conjunto de control - Contenido del panel | El contenedor de contenido con un panel de una sola fila | |
| Campo - Etiqueta | El título que representa el campo en un formulario | |
| Campo - Valor | El valor del estado de visualización del campo en un formulario | |
| Panel - Tablero y Carril | Icono de enlace a página | El icono que enlaza a una página |
| Azulejo - Contenedor | El elemento de ficha contenedor de un tipo de panel de mosaico | |
| Tile - Filler | Un elemento de relleno que se utiliza para garantizar que los tableros envueltos se alineen a la izquierda. Ocultar esto para centrarlo, junto con justify-content: center | |
| Título de la ficha - Carril | El título sobre los carriles o grupos de fichas | |
| Mosaico - Seleccionado | El elemento de ficha que contiene un tipo de panel de mosaico, cuando está activo | |
| Contenedor para paneles de baldosas | Un contenedor adicional que envuelve todas las baldosas | |
| Panel - Varias filas | Campo - Agrupado por | Valores de celda que se difuminan al usar agrupar por |
| Encabezado - Contenedor | Fila de encabezado de columna en una cuadrícula de datos | |
| Encabezado - Conjunto de control | Columnas agrupadas en una cuadrícula de datos | |
| Encabezado - Etiqueta del conjunto de control | La etiqueta sobre cada grupo de conjunto de control | |
| Encabezado - Etiqueta | Cada celda de encabezado de columna en una cuadrícula de datos | |
| Fila - Agregar | La fila adicional que aparece al insertar en un panel de varias filas | |
| Fila - Celdas | Celdas en un panel de varias filas | |
| Fila - Par | Cada fila par en una cuadrícula de datos | |
| Fila - Botón Cargar más filas | El botón que aparece cuando puedes cargar más filas | |
| Fila - Impar | Cada fila impar en una cuadrícula de datos | |
| Fila - Seleccionada | La fila en la cuadrícula de datos que está seleccionada actualmente | |
| Fila - Total | La fila total de una cuadrícula de datos | |
| Panel - Gráfico | Colores del gráfico - Color 1 | La primera serie de un gráfico |
| Colores del gráfico - Color 2 | La segunda serie de un gráfico | |
| Colores del gráfico - Color 3 | La tercera serie de un gráfico | |
| Colores del gráfico - Color 4 | La cuarta serie de un gráfico | |
| Colores del gráfico - Color 5 | La quinta serie de un gráfico | |
| Colores del gráfico - Color 6 | La sexta serie de un gráfico | |
| Colores del gráfico - Color del texto | El texto representado para las distintas partes de un gráfico | |
| Misc - Banderas | Las banderas en un gráfico | |
| Varios - Seleccionado | El color del gráfico resaltado | |
| Panel - Calendario | Contenedor | Los días en un calendario |
| Evento - Contenedor | El cuadro de evento dentro de un calendario | |
| Evento - Seleccionado | El cuadro de evento resaltado dentro de un calendario | |
| Fecha de hoy - Contenedor | La caja entera de la fecha de hoy | |
| Fecha de hoy - Día | La parte numérica de la fecha de hoy | |
| Fecha de hoy - Seleccionada | El día del mes seleccionado | |
| Controles | Insignia | El elemento de insignia que se adhiere a otros controles |
| Campos de iconos | Tipos de control de campos de iconos | |
| Control de línea | Controles de línea, utilizados para dividir el contenido en un panel | |
| Barra de progreso | Elemento de barra de progreso | |
| Botón - Indicador de actividad | El ícono giratorio utilizado para indicar actividad | |
| Botón - Contenedor | Botones en un panel | |
| Campos - Contenedores de campos adicionales | Contenido de campos de formulario adicionales, como opciones de cuadro de lista. | |
| Campos - Siempre editables | El efecto de desplazamiento sobre un campo siempre editable | |
| Campos - Edición automática | Efecto de desplazamiento sobre un campo de edición automática | |
| Campos - Editar estado | Elementos del formulario en la página | |
| Campos - Editar estado en uso | Elementos de formulario en la página, cuando están en foco o activos de otro modo | |
| Campos - Control de formulario | Control de formulario | |
| Campos - No editables | Todos los valores de texto no editables que provienen de una fuente de datos | |
| Campos - Obligatorios | El pequeño elemento de color que indica que un campo es obligatorio | |
| Campos - Seleccionados | Varios elementos de datos resaltados, como listas o días en un panel de fechas | |
| Enlaces - Chevron | El chevron que aparece después de un enlace | |
| Enlaces - Contenedor | Enlaces en toda la aplicación | |
| Validaciones | Confirmación | Mensajes de confirmación para eventos como Eliminar |
| Error | Resultados de validación de tipo error | |
| Excepción | App Builder excepciones que aparecen en la parte inferior de la pantalla | |
| Información | Resultados de validación del tipo Información | |
| Advertencia | Resultados de validación de tipo Advertencia |
Tipos de Valores
| Nombre del tipo de valor | Descripción de entrada | Texto de ayuda |
|---|---|---|
| 1 Degradado de fondo | Un degradado de color de un valor de color a otro | Los valores 1 y 2 se utilizan para los colores de destino y origen. El valor 3 es para el color del borde. |
| 2 Color de fondo | Código de color o valor con nombre utilizado para rellenar todo el elemento | Value1 se utiliza para el color de fondo. Puede ser un código HTML o utilizar {PrimaryColor}, por ejemplo, para utilizar el color del tema. |
| 3 Imagen de fondo | URL o valor de imagen Base64 | Value1 es una URL o una imagen codificada en base64. Haga clic derecho en cualquier App Builder imagen y copiar URL para usar App Builder imágenes alojadas. Value2 se utiliza para estirar la imagen o repetirla. Para estirarla, introduzca "cover"; de lo contrario, déjelo en blanco para repetir (ficha) la imagen. |
| 4 Color del borde | Código de color o valor con nombre | Valor1 se utiliza para el color del borde. |
| 5 Icono - Glifo | Código Glyphicon, no valor nombrado | Se utiliza Value1 para el código Glyphicon. |
| 6 Color de fuente | Código de color o valor con nombre | El valor 1 se utiliza para el color de fuente. El valor 2 debe tener un formato específico: 0 1px 1px #222. Cambie el código de color para que afecte el color real. |
| 7 Estilos avanzados | Establezca valores CSS más avanzados para las propiedades de visualización, opacidad y transición | Value1 oculta elementos estableciendo el valor en 'ninguno'. Value2 establece el margen del elemento, mientras que Value3 establece el relleno. Opacidad se utiliza para especificar la opacidad o transparencia de un elemento. Los valores esperados son 0,1 - 0,9. Por ejemplo: 0,5 |
| 8 Fondo avanzado | Todas las opciones relacionadas con el fondo | Value1 representa la forma abreviada del fondo. Con esto, puede especificar todas las opciones de fondo a la vez. Value2 es la propiedad del tamaño del fondo. |
| 9 Sombra de Box | Efecto de sombra en cuadros | Valor1 representa los valores de sombra del cuadro, mientras que Valor2 se utiliza para el color de la sombra. |
| 10 Fuentes avanzadas | Configuración de varios estilos de fuente, como tipo, tamaño y negrita | El valor 1 se utiliza para los nombres de las fuentes. Utilice una lista separada por comas. El valor 2 es el tamaño de la fuente. Puede ser cualquier unidad de medida. El valor 3 es la negrita. Puede introducir un valor o utilizar "negrita" u otras palabras reservadas. |
| 11 Radio del borde | La curva de un borde. Use 100 % para crear un círculo. | El valor 1 se usa para redondear las esquinas de un elemento. |
| 12 ficha de caja flexible | Configuración de estilos que afectan a los mosaicos del panel Tablero. | Los valores 1 y 2 controlan el tamaño de los mosaicos. |
| 13 Texto avanzado | Modificaciones al texto | Value1 establece text-decoration, que se utiliza para agregar subrayado y otras propiedades. Value2 establece text-transform, que se utiliza para convertir texto en mayúsculas. Value3 establece font-style, que se utiliza para cursiva. |
| 14 Alineación | Establece la alineación de los distintos elementos en un área específica | El valor 1 establece la alineación vertical de un contenedor en línea, por ejemplo: medio. El valor 2 se utiliza para establecer la alineación horizontal del texto, por ejemplo: centro. |
| 15 Fuente | Establezca información sobre el estilo de fuente, como el tipo de fuente, el tamaño y el grosor o el espesor (negrita) de los caracteres que se deben mostrar | El valor 1 se utiliza para especificar el tipo de fuente de un elemento. Utilice una lista separada por comas. Por ejemplo: Calibri, Arial, sans-serif. El valor 2 se utiliza para establecer el tamaño de fuente. Las opciones de tamaño de fuente varían de xx-small a xx-large. Por ejemplo: small. El valor 3 se utiliza para establecer el grosor de fuente, o el grosor o espesor de los caracteres de fuente que aparecen en la página. Las opciones de grosor de fuente varían de normal a bolder. Un grosor de fuente de 400 es lo mismo que normal, 700 es lo mismo que negrita. Por ejemplo: bold. |
| 16 Espaciado | Especifica valores de espaciado para el contenido que aparece en un contenedor | El valor 1 establece la altura de línea. La propiedad de altura de línea especifica la altura de un elemento. No se permiten valores negativos. Por ejemplo: 1,4 em. El valor 2 se utiliza para establecer el margen. La propiedad de margen se utiliza para crear espacio alrededor de los elementos. No se permiten valores negativos. Se puede definir un margen en los 4 lados de un elemento: superior, derecho, inferior e izquierdo. El valor 3 se utiliza para establecer el relleno. La propiedad de relleno se utiliza para generar espacio alrededor del contenido de un elemento. Se puede definir un relleno en los 4 lados de un elemento: superior, derecho, inferior e izquierdo. |