Temas en Jitterbit App Builder
Descripción general
Un tema controla cómo se ve visualmente una aplicación de App Builder en la capa de UI. Un tema es una combinación de componentes y tipos de estilo (anteriormente conocidos como tipos de valor) que permite controlar la apariencia de áreas definidas de la UI. Por ejemplo, puedes establecer el color de fondo (un tipo de estilo) del área de Enlaces (un componente) en verde azulado.
Esta página explica cómo funcionan los temas, cómo los tokens de tema simplifican la personalización y cómo configurar el modo oscuro.
Cómo funcionan los temas
Un componente representa un área de la UI cuyas propiedades se pueden cambiar (por ejemplo, las páginas son componentes). Los tipos de estilo representan las propiedades específicas que se pueden cambiar o definir (por ejemplo, Color de fondo es un tipo de estilo).
Un tema nuevo no tiene efecto visible hasta que configures componentes en él. Los colores elegidos a nivel de tema no se aplican automáticamente a ninguna parte de la UI por sí solos. Sin ningún tema aplicado, App Builder aparece a nivel de Capa de UI en un estado sin tema con un estilo mínimo. Usa el botón Vista previa de un tema para ver cómo se ven diferentes pantallas y paneles con el tema aplicado, sin necesidad de aplicarlo primero.
App Builder incluye varios temas base predefinidos que tu aplicación puede usar tal como están o aprovechar como tema base que puedas personalizar aún más. Más allá de los colores básicos, los componentes y tipos de estilo permiten personalizar docenas de otras áreas y comportamientos.
Componentes y subcomponentes
Un componente es una parte de la UI que se puede personalizar, como una página o un panel. Cada componente se divide en subcomponentes que puedes personalizar individualmente, como la barra de título de un panel o los enlaces en la barra de título de una página.
Para ver colores personalizados a través de la Capa de UI, configura los paneles Componentes y Subcomponentes. La siguiente captura de pantalla muestra el subcomponente Enlaces del componente Página - Barra de título con su Color de fondo establecido en verde azulado:
Consulta la Referencia de componentes para obtener la lista completa de componentes y subcomponentes.
Tipos de estilo
Con un componente y subcomponente especificados, selecciona un tipo de estilo del campo Tipo de estilo para aplicar una propiedad. Los tipos de estilo pueden referirse a colores de fuente, colores de fondo, imágenes, alineación, información de degradado, información de tamaño y más, según el subcomponente que estés personalizando. El texto de ayuda de cada tipo de estilo en el campo Tipo de estilo describe los valores específicos que espera.
Consulta la Referencia de tipos de estilo para obtener la lista completa.
Tokens de tema
Un token es un valor nombrado y reutilizable, como un color, una configuración de texto o una imagen, que un estilo puede referenciar en lugar de un valor codificado. Referencia un token en un valor de estilo usando la sintaxis {TokenName}:
Tokens del sistema
Cada tema incluye un conjunto de tokens del sistema proporcionados por la plataforma. Los tokens del sistema tienen un punto a la izquierda de su nombre en la cuadrícula Tokens, y sus nombres son universales en todos los temas:
BackgroundColorBorderColorCautionColorComplementaryColorDangerColorForegroundColorPageBackgroundColorPrimaryColorSecondaryColor
Los colores establecidos directamente en el editor de tema aparecen como estos tokens del sistema en la cuadrícula Tokens. La sintaxis {TokenName} es la misma sintaxis reservada que estaba disponible anteriormente solo para los tokens PrimaryColor, SecondaryColor y ComplementaryColor.
Tokens personalizados
También puedes agregar tokens personalizados a un tema para tus propios colores, configuraciones de texto e imágenes, referenciados de la misma manera que {TokenName}. Para editar tokens, haz clic en el icono de lista a la derecha del título Tokens. Esto abre el diálogo Tokens:
La cuadrícula Tokens agrupa los tokens en tres pestañas:
- Colors: Valores de color. Un token sin color asignado muestra una vista previa de almohadillas.
- Text: Configuración de texto como Border Radius o Font Family. Cada token de texto tiene una propiedad Style, que controla en qué listas de estilos aparece el token cuando se configura un estilo.
- Images: Valores de imagen ingresados como CSS, como
linear-gradient(to right, #FFD700, #1E90FF), no imágenes visuales cargadas en la colección.
Los tokens personalizados definidos en un tema base también están disponibles para cualquier tema construido sobre él, sin necesidad de redefinirlos. Sin embargo, los temas a nivel de control usados directamente en el diseño de un Field, Panel u otro control similar no están vinculados a un tema principal de la aplicación, por lo que solo ofrecen tokens del sistema al configurar un estilo. Si se sabe que un control utiliza un tema específico que se creó, se puede escribir directamente el nombre de un token personalizado en el campo de estilo de tema como {MyCustomTokenName}, pero si el tema de la aplicación cambia posteriormente y el nuevo tema no tiene ese token, el estilo no se representará como se espera.
Precaución
Si se utiliza un tema para propósitos de página o panel, dejar su Base Theme en blanco. Si se establece en el tema de la aplicación, se carga el CSS del tema de la aplicación dos veces.
Sugerencia
El uso de tokens permite copiar un tema y editar el valor de un token una sola vez para actualizar todos los estilos que lo referencia, lo que acelera la personalización del tema.
Ajustar colores
Los colores se pueden ajustar por brillo u oscuridad y opacidad. Esta personalización está disponible para cualquier token de color, incluidos los tokens del sistema, como {PrimaryColor}, {SecondaryColor} y {ComplementaryColor}.
Para ajustar el brillo y la oscuridad del color, agregar un carácter de tubería junto con un valor decimal numérico (valor positivo para aumentar u valor negativo para oscurecer el color). Los valores esperados van de -.9 a .9.
Sintaxis: {PrimaryColor|.25} o {PrimaryColor|-.25}
Para un tema que admite modo oscuro, agregar un segundo valor separado por coma para establecer un ajuste diferente para la variante oscura. Por ejemplo, {ForegroundColor|-.8} oscurece un color, lo que funciona bien para una variante clara, pero en una variante oscura probablemente se quiera aclarar el color en su lugar. Agregar un segundo valor establece el ajuste de la variante oscura: {ForegroundColor|-.8,.8} oscurece el color para la variante clara y lo aclara para la variante oscura.
Para ajustar la opacidad del color, agregar el carácter de tilde junto con un valor decimal numérico. Los valores esperados van de .1 a .9.
Sintaxis: {PrimaryColor~.25}
Modo oscuro
La configuración Supports Dark de un tema controla si ese tema puede representarse en modo oscuro, y la preferencia Color Scheme de cada usuario, establecida en la página User Profile, controla cuándo se solicita el modo oscuro. Como desarrollador, se elige qué temas admiten el modo oscuro y se definen los colores e imágenes oscuros que utilizan esos temas. Ver Theme tokens para cómo un solo tema almacena sus valores claros y oscuros.
Cómo se aplica el Color Scheme de un usuario
Los usuarios eligen una de las siguientes opciones para el Color Scheme de su cuenta:
| Opción | Comportamiento |
|---|---|
| Light | (Predeterminado.) Utilizar siempre colores e imágenes claros. |
| Dark | Utilizar colores e imágenes oscuros donde el tema activo admita el modo oscuro. |
| System | Seguir la configuración del sistema operativo o navegador del usuario, y cambiar automáticamente cuando esa configuración cambie. |
Un tema solo se renderiza en oscuro si es compatible con el modo oscuro. Si un usuario prefiere Oscuro pero el tema de un elemento no es compatible con el modo oscuro, ese elemento permanece claro, por lo que una sola pantalla puede mezclar ambas apariencias. Por ejemplo, la aplicación principal puede estar oscura mientras que una página emergente que usa un tema diferente sin soporte para modo oscuro permanece clara, como la ventana emergente de Perfil de Usuario abierta desde el cajón de acciones.
Claro es el Esquema de Color predeterminado para usuarios nuevos.
Configurar el modo oscuro para un tema
Para asegurar que el modo oscuro esté habilitado en un tema, sigue estos pasos:
- Abre el tema en el editor de temas.
- Habilita la configuración Soporta Oscuro.
- Haz clic en el icono de lista a la derecha del título Tokens para abrir el diálogo Tokens.
- En las pestañas Colores e Imágenes, ingresa un valor Claro y un valor Oscuro para cada token. Un token de Texto tiene un único valor compartido por ambos modos.
Imágenes de colección y modo oscuro
Las imágenes de colección no están conectadas a un tema; se definen en una colección y se usan directamente en el Workbench al construir una página. Por esta razón, la configuración Soporta Oscuro del tema no tiene un efecto directo en las imágenes de colección usadas en una aplicación.
En su lugar, cada imagen de colección puede vincularse a una variante de Imagen Oscura. Cuando se renderiza una página de aplicación, App Builder verifica la preferencia de Esquema de Color del usuario y si el tema activo es compatible con el modo oscuro. Si la imagen se renderiza en un modo de tema oscuro y existe una Imagen Oscura vinculada, se renderiza la variante oscura vinculada en lugar de la imagen normal.
Para vincular una variante oscura a una imagen de colección:
- Carga la imagen a usar como variante oscura a la misma colección que la imagen original. Consulta Carga el logo a una colección para los pasos de carga.
- Navega a Apariencia de la colección, haz clic en la pestaña Imágenes y abre el registro de la imagen original.
- Haz clic en Editar.
- En el campo Imagen Oscura, selecciona la variante oscura.
- Haz clic en Guardar.
Para un caso especial donde no desees que se renderice la variante oscura aunque una imagen tenga una Imagen Oscura vinculada, como en un control de lista donde la imagen exacta debe coincidir con lo que el usuario seleccionó, consulta Desactiva la variante de imagen oscura.
Elementos que no cambian en modo oscuro
Los siguientes elementos no cambian cuando el Esquema de Color de un usuario requiere oscuro:
- Elementos con estilo de un tema que no es compatible con modo oscuro. Por ejemplo, una página emergente que usa un tema sin soporte para modo oscuro permanece clara incluso mientras la aplicación principal está oscura.
- Imágenes de colección sin una Imagen Oscura vinculada.
- Imágenes renderizadas desde datos de la aplicación, como fotos de empleados. Estas imágenes no tienen variante oscura.
Función Copiar
Se puede copiar cualquier tema. Dado que los estilos hacen referencia a tokens en lugar de valores codificados, frecuentemente puedes cambiar el estilo de una copia modificando solo sus valores de tokens, como PrimaryColor, SecondaryColor y ComplementaryColor. Hay muchos temas predefinidos disponibles que se pueden seleccionar y usar tal como están o personalizarse más para comenzar rápidamente.
Temas predefinidos de App Builder
App Builder incluye varios temas predefinidos. Aunque estos son técnicamente editables, cuando actualices se perderán los cambios. Copia un tema predefinido para preservar tus cambios durante una actualización.
El tema Oscuro predefinido es un tema de color oscuro fijo y no responde a la preferencia de Esquema de Color del usuario. Para hacer que un tema cambie entre valores claros y oscuros, consulta en su lugar Modo oscuro.
Desde App Builder 4.67, los temas predefinidos Claro, Oscuro, Formas, Violeta, Degradado, Claro - Moderno y Tema Base de Inicio de Sesión incluyen cada uno un tema móvil precompilado, ya configurado como el tema móvil de ese tema, por lo que se aplica automáticamente en pantallas pequeñas. Estos temas móviles están optimizados para uso móvil de fábrica, con los siguientes ajustes:
- Áreas de toque amigables, con un tamaño mínimo de 44x44 píxeles.
- Tipografía y alturas de línea escaladas para dispositivos móviles.
- Espaciado interno y márgenes compactos.
- Apilamiento de campos de formulario en una sola columna.
Este comportamiento automático solo se aplica a las aplicaciones que utilizan directamente uno de estos temas del sistema. Un tema personalizado basado en un tema del sistema no hereda su tema móvil predefinido. Si utilizas un tema del sistema directamente y deseas desactivar su tema móvil predefinido, crea un tema personalizado basado en el tema del sistema y utiliza ese en su lugar; el tema móvil predefinido no se transfiere. Si ya utilizas un tema personalizado basado en un tema del sistema y deseas adoptar su tema móvil predefinido, consulta Usar un tema móvil predefinido con un tema base personalizado.
Consulta Cómo crear un tema móvil para crear un tema móvil personalizado en su lugar.
Sugerencias
Si especificas un color de fondo oscuro, asegúrate de utilizar un color de fuente que sea legible para todo el texto. Aprovecha la propiedad text-shadow incluida en el color de fuente para agregar contraste adicional. Esto es especialmente relevante al elegir los colores de variante oscura de un tema.
Apéndice
Referencia de componentes
Página
| Nombre de interfaz | Descripción |
|---|---|
| Container - Framed Page Container (Mobile) | Contenedor de página en un marco, en un dispositivo móvil |
| Container - Individual page containers | El contenedor creado para cada página mostrada en pantalla |
| Container - Maximized Page Container | |
| Container - Outer page container | Elemento que envuelve cada nodo de página |
| Container - Page | El contenedor para las páginas |
| Container - Page Container Inner | Elemento dentro del contenedor de página |
| Container - Page Container Inner - not scrolled | Elemento dentro de una página que no está configurado para desplazarse |
| Container - Page Container (Mobile) | Contenedor de página, en un dispositivo móvil |
| Container - Site | El cuerpo del sitio general, ventanas modales, otros elementos emergentes |
| Container - Top level Vinyl container | Contenedor de nivel más alto bajo la etiqueta body |
| Footer - Version footer | El pie de página de versión que se muestra en la parte inferior |
| Other content areas - Action Drawer Content | |
| Other content areas - Audit Link Container | |
| Other content areas - Misc content areas | Varios paneles como el cajón de acciones y cuadros de selector de fecha |
| Other content areas - Notification Button | Botones que aparecen en las notificaciones |
| Other content areas - Pages Container Inner | |
| Other content areas - Vinyl Menu Labels | |
| Other content areas - Wizard Panel Help | |
| Tab - Active | Pestañas activas en una página |
| Tab - Inactive | Pestañas inactivas en una página |
| Tab - Page Tabs Outer Container | |
| Tab - Tabs Container | El contenedor para las pestañas que aparecen en ventanas gráficas reducidas |
| Wizard Steps Bar - Active step text | Texto activo en un paso en una barra de pasos del asistente |
| Wizard Steps Bar - Incomplete step marker | Marcador que representa un paso incompleto en una barra de pasos del asistente |
| Wizard Steps Bar - Incomplete steps connector line | Línea que conecta un paso a un paso incompleto en una barra de pasos del asistente |
| Wizard Steps Bar - Step marker | Marcador que representa un paso en una barra de pasos del asistente |
| Wizard Steps Bar - Steps connector line | Línea que conecta 2 pasos en una barra de pasos del asistente |
| Wizard Steps Bar - Step text | Texto en un paso en una barra de pasos del asistente |
| Wizard Steps Bar - Wizard Panel Button Container | |
| Wizard Steps Bar - Wizard Panel Header | |
| Wizard Steps Bar - Wizard steps container | El contenedor para una barra de pasos del asistente |
| Wizard Toolbar - Wizard all toolbar buttons | Se aplica a todos los botones en la barra de herramientas del asistente, incluyendo los botones intrínsecos |
| Wizard Toolbar - Wizard custom toolbar buttons | Se aplica a los botones personalizados en la barra de herramientas del asistente. Esto excluye los botones intrínsecos (Anterior, Siguiente, Finalizar) |
| Wizard Toolbar - Wizard intrinsic toolbar buttons | Se aplica a los botones del sistema en la barra de herramientas del asistente (Anterior, Siguiente, Finalizar). Esto excluye los botones personalizados en la barra de herramientas del asistente |
Página - Barra de título
| Nombre de interfaz | Descripción |
|---|---|
| Badge - Menu Badge | |
| Menús desplegables - Action Drawer Container | |
| Menús desplegables - Drop Down Links | Los elementos del menú desplegable |
| Menús desplegables - Menú desplegable | El menú desplegable, abierto con elementos de menú |
| Menús desplegables - Enlaces en menú desplegable | |
| Enlaces - Enlace activo a página (Menú) | Un enlace de menú que enlaza a la página actualmente mostrada |
| Enlaces - Icono de botón atrás | |
| Enlaces - Icono de menú hamburguesa | El icono de menú hamburguesa en la esquina superior derecha |
| Enlaces - Iconos en enlaces | Elementos de menú de tipo Icono |
| Enlaces - Campo enlazado en menú | |
| Enlaces - Enlaces | Enlaces en la barra de página superior |
| Enlaces - Contenedor de menú para enlaces | El contenedor que tiene los elementos del menú, pero no el título de la página ni la hamburguesa del cajón de acciones |
| Enlaces - Campo de menú en menú | |
| Enlaces - Contenedor exterior del menú | Contenedor exterior para elementos de menú; no se puede usar en temas de elementos de menú |
| Enlaces - Contenedor de desbordamiento | Cuando hay demasiados elementos, aparece este menú |
| Enlaces - Desbordamiento - Icono | Un icono que aparece cuando hay demasiados elementos para mostrar |
| Enlaces - Enlaces de desbordamiento | |
| Enlaces - Enlaces del menú del sitio | Solo contenido del menú del sitio |
| Enlaces - Iconos del sistema | |
| Barra de título - Botón atrás | El botón atrás que navega a la página anterior |
| Barra de título - Divisor de botón atrás | |
| Barra de título - Texto del botón atrás | |
| 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 - Contenedor alineado a la izquierda en menú | |
| Barra de título - Activador de edición en vivo | |
| Barra de título - Contenedor de menú | Elemento que contiene todos los elementos del menú |
| Barra de título - Contenedor interior de menú | Los menús se dividen en 3 (izquierda, centro, derecha), y esto se dirige a los 3 |
| Barra de título - Contenedores flex de menú | |
| Barra de título - Contenedor de elemento de menú | Contenedor exterior para cada elemento de menú |
| Barra de título - Logo de menú | Imágenes en elementos de menú |
| Barra de título - Título de 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 |
| Barra de título - Título de página del asistente | Texto que se muestra como título de página de un asistente |
Página - Barra de pestañas
| Nombre de interfaz | Descripción |
|---|---|
| Barra de pestañas - Pestaña | Cada elemento de pestaña en la barra |
| Barra de pestañas - Barra de pestañas | Barra debajo de la página |
| Barra de pestañas - Contenedor de barra de pestañas solo para página | El contenedor exterior para pestañas, pero la versión de página |
| Barra de pestañas - Barra de pestañas solo para página - Botón | |
| Barra de pestañas - Barra de pestañas solo para página - Botón (Activo) | |
| Barra de pestañas - Barra de pestañas solo para página - Grupo de botones | |
| Barra de pestañas - Barra de pestañas solo para página - Botón (Último en el grupo) | |
| Elemento de pestaña - Icono de menú | |
| Elemento de pestaña - Elemento de menú (Activo) | |
| Elemento de pestaña - Icono de elemento de menú (Activo) |
Página - Cajón de acciones
| Nombre de interfaz | Descripción |
|---|---|
| Elementos del cajón - Elementos del cajón | Botones del cajón de acciones |
| Elementos del cajón - Divisor de línea de menú hamburguesa | |
| Menú del sitio - Menú del sitio | El enlace Inicio que va a la página de Inicio del sitio |
Pop-up de página
| Nombre de interfaz | Descripción |
|---|---|
| Botón Cerrar - Botón Cerrar | El botón X que cierra los paneles modales |
| Botón Cerrar - Icono del botón Cerrar | |
| Botón Cerrar - SVG del botón Cerrar | |
| Contenedor - Todas las capas de opacidad | Todas las capas de opacidad en la página |
| Contenedor - Contenedor | Contenedor de página superpuesto |
| Contenedor - Contenedor - Después del movimiento | Una vez que se ha movido un modal, top/left se usa para posicionarlo |
| Contenedor - Solo primera capa de opacidad modal | Selecciona el primer bloqueador de opacidad, pero si no es el primero no se aplicará |
| Contenedor - Pop-up de edición en vivo alineado a la derecha | |
| Contenedor - Página sin pop-up, Página sin marco | Páginas que no se están superponiendo (es decir, Planas) y tampoco están enmarcadas |
| Contenedor - Contenedor de panel | Paneles que aparecen como una superposición |
| Contenedor - Título del panel pop-up | Título del panel específicamente dentro de un tipo de página pop-up |
| Contenedor - Contenedor de diapositiva | Contenedor de página con deslizamiento |
| Contenedor - Encabezado del panel de barra de título | |
| Contenedor - Contenedor de panel de filtro de vinilo |
Panel
| Nombre de la interfaz | Descripción |
|---|---|
| Action Drawer - Action Drawer Button | Un botón dentro de un cajón de acciones de panel |
| Action Drawer - Action Drawer More Button | Botón que muestra un menú con botones promovidos al cajón de acciones |
| Action Drawer - Action Drawer More Button - Opened | |
| Action Drawer - Action Drawer Wrapper | El div externo alrededor del botón del cajón de acciones |
| Activity indicator - Activity indicator | Contenedor de círculo animado que indica la actividad de red del panel |
| Activity indicator - Activity indicator - Icon | |
| Activity indicator - Activity Indicator Temporary | |
| Activity indicator - Activity Indicator - Wrapper | |
| Activity indicator - Report Spinner | Spinner de carga de reportes |
| Group - Panel Group Tabs | Las pestañas mostradas con un grupo con pestañas |
| Panel - App Menu - Content | |
| Panel - App Menu - Outer Container | |
| Panel - Container | Panel que contiene el encabezado y el contenido del panel |
| Panel - Content | Contenedor de contenido del panel |
| Panel - Content - Pop Up Page | |
| Panel - Control Labels | |
| Panel - Disabled | Paneles deshabilitados porque tienen enlaces incompletos |
| Panel - Link To Page Image | La imagen que te vincula a otra página |
| Panel - Maximized Panel Container | Identifica paneles que están maximizados |
| Panel - Maximize icon | Icono que hace que un panel ocupe todo el tamaño de la pantalla |
| Panel - Metric Panel | |
| Panel - Outer container | El contenedor más externo alrededor de un panel individual |
| Panel - Panel Container | El contenedor externo de cada panel |
| Panel - Panel In A Lane/Board Panel | |
| Panel - Panel Inner Shadow | |
| Panel - Title Bar | El área encima de un panel, contiene el nombre del panel |
| Panel - Title center helpers | Controles ocultos que se pueden mostrar al centrar títulos de paneles; usa Position: static |
| Title Bar - Close Button | El botón X que cierra los paneles modales |
| Title Bar - Header button | El botón en sí cuando se promueve al encabezado del panel |
| Title Bar - Header button container | El contenedor para cada botón promovido al encabezado del panel |
| Title Bar - Header Buttons Container | |
| Title Bar - More Button Container | |
| Title Bar - More Button Items | |
| Title Bar - Panel Header in Tab Group | |
| Title Bar - Title | El texto del título del panel |
| Title Bar - Title Bar Button | |
| Title Bar - Title (Before) |
Panel Placement
| Nombre de la interfaz | Descripción |
|---|---|
| All panels - Left-most and Right-most | |
| All panels - Padded All Sides | Panel con relleno en todos los lados |
| All panels - Padded Top Bottom Left | Panel con relleno en la parte superior, inferior e izquierda |
| All panels - Padded Top Left | Panel con relleno en la parte superior e izquierda |
| All panels - Padded Top Right Left | Panel con relleno en la parte superior, derecha e izquierda |
| All panels - Panel In Scroll Container | |
| All panels - Panel shown alone | Un panel que no comparte la página con otro |
| All panels - Scrolled Panel Containers | |
| All panels - Scrolling Padded Right | Grupo de desplazamiento con relleno en la derecha |
| All panels - Side By Side Scrolled Container | |
| Overlay panels - Padded All Sides | Panel con relleno en todos los lados |
| Overlay panels - Padded Top Bottom Left | Panel con relleno en la parte superior, inferior e izquierda |
| Overlay panels - Padded Top Left | Panel con relleno en la parte superior e izquierda |
| Overlay panels - Padded Top Right Left | Panel con relleno en la parte superior, derecha e izquierda |
| Overlay panels - Panel shown alone | Un panel que no comparte la página con otro |
| Overlay panels - Scrolling Padded Right | Grupo de desplazamiento con relleno en la derecha |
Panel - Toolbar
| Nombre de la interfaz | Descripción |
|---|---|
| Search and Filter - Container | Contenedor simple de criterios de búsqueda y filtro |
| Search and Filter - Container in a Tabbed Panel Group | |
| Search and Filter - Filter Clear X Icon | Icono X pequeño para limpiar el filtro |
| Search and Filter - Input | Cuadro de búsqueda simple de búsqueda de entrada |
| Search and Filter - Widget Searchbox | |
| Toolbar - All Icon Containers | |
| Toolbar - All toolbar buttons (override) | Selecciona todos los botones de la barra de herramientas, anulando todos los temas de nivel inferior |
| Toolbar - Audit Button | El botón de auditoría, cuando está en una barra de herramientas |
| Toolbar - Buttons | Botones en la barra de herramientas |
| Toolbar - Cancel Button | |
| Toolbar - Create Button | El botón crear, cuando está en una barra de herramientas |
| Toolbar - Delete Button | El botón eliminar, cuando está en una barra de herramientas |
| Toolbar - Download Icon Container | |
| Toolbar - Edit Button | El botón editar, cuando está en una barra de herramientas |
| Toolbar - Edit, Cancel, Audit & Clear Buttons | |
| Toolbar - Filter Icon Container | |
| Toolbar - Icon Containers | |
| Toolbar - Icons In Toolbar | Iconos de botón en una barra de herramientas |
| Toolbar - Row Count | El texto de visualización del recuento de filas |
| Toolbar - Save Button | |
| Toolbar - Search Icon Container | Contenedor externo del icono de búsqueda |
| Toolbar - Search Icon in Toolbar | |
| Toolbar - Search Icon in Toolbar - Input | |
| Toolbar - Search Icon (When In Focus) | |
| Toolbar - Search Icon (When Not In Focus) | |
| Toolbar - Search Input Container (In Focus or Has Value) | |
| Toolbar - Search Input (In Focus or Has Value) | |
| Toolbar - Search Input (In Toolbar) | |
| Toolbar - Search X Icon | |
| Toolbar - Secondary Buttons | Botones secundarios en la barra de herramientas |
| Toolbar - Toolbar | Barra de herramientas que contiene botones y controles a nivel de panel |
| Toolbar - Toolbar Button, Not Last Child | |
| Toolbar - Toolbar Group (First Group) | |
| Toolbar - Toolbar in a Lane Panel | |
| Toolbar - Toolbar in a Tabbed Panel | |
| Toolbar - Toolbar - Pop Up Page | |
| Toolbar - Toolbar Spacer |
Panel - Filtro
| Nombre de interfaz | Descripción |
|---|---|
| Búsqueda y filtro - Grupo de botones activo | El botón actualmente seleccionado para el operador de filtro |
| Búsqueda y filtro - Grupo de botones | Botones utilizados para seleccionar el tipo de filtro a usar |
| Búsqueda y filtro - Botón Cancelar filtro | El botón secundario que cancela el filtro |
| Búsqueda y filtro - Grupo de botones de filtro | |
| Búsqueda y filtro - Etiquetas de campos de filtro | Las etiquetas en cada campo de filtro |
| Búsqueda y filtro - Contenedor de campos de filtro | |
| Búsqueda y filtro - Opción de filtro (Primer botón) | |
| Búsqueda y filtro - Página de filtro - Contenido del panel | |
| Búsqueda y filtro - Página de filtro - Encabezado del panel | |
| Búsqueda y filtro - Página de filtro - Barra de herramientas | |
| Búsqueda y filtro - Filtro requerido | |
| Búsqueda y filtro - Botón de filtro requerido | |
| Búsqueda y filtro - Texto de filtro requerido | |
| Búsqueda y filtro - Etiquetas de filtro | |
| Búsqueda y filtro - Icono X de filtro | |
| Búsqueda y filtro - Línea de filtro múltiple | Línea delgada que muestra que múltiples valores en el mismo campo están vinculados |
| Búsqueda y filtro - Botón Ejecutar filtro | El botón principal que ejecuta el filtro |
| Búsqueda y filtro - Filtro desplegable único |
Panel - Panel de una sola fila
| Nombre de interfaz | Descripción |
|---|---|
| Contenido - Formulario de panel de métrica | |
| Contenido - Contenido del panel | El contenedor de contenido dentro de un panel de una sola fila |
| Contenido - Formulario del panel | El formulario, contenedor de campos de nivel superior dentro de un panel que admite visualización de estilo formulario |
| Contenido - Exterior del formulario del panel | |
| Campo - Controles (SRP, Tablero y carriles) | |
| Campo - Etiqueta | El título que representa el campo en un formulario |
| Campo - Control del último hijo | Contenedor externo del control del último hijo |
| Campo - Indicador requerido | |
| Campo - SRP - Selector de fecha | |
| Campo - SRP - Icono del selector de fecha | |
| Campo - Campos apilados en un formulario | Contenedor de campos cuando está dentro de un panel de una sola fila y apilado |
| Campo - Valor | El estado de visualización del valor del campo en un formulario |
Panel - Tablero y carril
| Nombre de interfaz | Descripción |
|---|---|
| Carril - Ambos ejes - Grupo - Grupo par | Borde alrededor de cada grupo alterno, utilizado para rayado |
| Carril - Ambos ejes - Grupo - Título del grupo | Títulos encima de cada carril que corren horizontalmente, así como el título del otro eje |
| Carril - Ambos ejes - Grupo - Contenedor del grupo de carriles | El contenedor por grupo en un carril; tiene el título y los mosaicos en cada uno |
| Carril - Ambos ejes - Grupo - Grupo del panel | Borde alrededor de cada grupo vertical repetido |
| Carril - Ambos ejes - Grupo - Título del grupo vertical | Títulos de grupo que corren verticalmente |
| Icono Enlace a página | El icono que enlaza a una página |
| Mosaico - Contenedor | El elemento mosaico contenedor de un tipo de panel en mosaico |
| Mosaico - Contenido | El contenido de cada mosaico, el contenedor de los controles de formulario; utiliza esto para afectar la alineación de campos |
| Mosaico - Contenido en un panel de carril | |
| Mosaico - Relleno | Un elemento de relleno utilizado para garantizar que los tableros envueltos se alineen a la izquierda. Ocúltalo para centrar, junto con justify-content: center |
| Mosaico - Título del carril | El encabezado arriba de los carriles o grupos de mosaicos |
| Mosaico - Seleccionado | El elemento mosaico contenedor de un tipo de panel en mosaico, cuando está activo |
| Mosaico - Contenedor del panel de mosaicos | El contenedor inmediato que envuelve todos los mosaicos |
| Mosaico - Valor | Campos dentro de un tablero |
Panel - Múltiples filas
| Nombre de interfaz | Descripción |
|---|---|
| Campo - Icono de auditoría | |
| Campo - Control de casilla | |
| Campo - Campo tramado | |
| Campo - Agrupado en | Valores de celda que se traman cuando se utiliza agrupar por |
| Campo - Iconos en MRP | |
| Campo - Icono de enlace a página | |
| Campo - Botón Cargar más filas - Icono | |
| Campo - MRP Edición automática | Campos de edición automática que aparecen en un panel de múltiples filas |
| Campo - Contenedor desplegable de MRP | |
| Campo - MRP Modo Excel | Campos de modo Excel que aparecen en paneles de múltiples filas |
| Campo - Lista de modo Excel de MRP | |
| Campo - Lista de modo Excel de MRP - Después | |
| Campo - Fila seleccionada - Control | |
Campo - Encabezado de tabla - <th> |
|
| Campo - Icono Papelera y eliminar | |
| Campo - Valor | Campo en un MRP |
| Campo - Iconos de fuente personalizada Vinyl | |
| Encabezado - Col de cogroup | |
| Encabezado - Espaciadores de col de cogroup | |
| Encabezado - Contenedor | Fila del encabezado de columna en una cuadrícula de datos |
| Encabezado - Grupo de control | Columnas agrupadas en una cuadrícula de datos |
| Encabezado - Etiqueta del grupo de control | La etiqueta encima de cada grupo de control |
| Encabezado - Etiqueta | Cada celda del encabezado de columna en una cuadrícula de datos |
| Encabezado - Área de columna fija | El contenedor para columnas fijas |
| Encabezado - Iconos de ordenamiento | Iconos utilizados para mostrar el ordenamiento en un MRP; también incluye los pequeños números que aparecen junto a él |
| Fila - Agregar | La fila de agregar que aparece al insertar en un panel de múltiples filas |
| Fila - Botón | Botones en un panel de múltiples filas |
| Fila - Icono de botón | Iconos dentro de botones en un panel de múltiples filas |
| Fila - Celdas | Celdas en un panel de múltiples filas |
| Fila - Celdas con iconos | |
| Fila - Espaciadores de columna vacía | |
| Fila - Par | Cada fila par en una cuadrícula de datos |
| Fila - Pie de página - Fila espaciadora | Fila agregada para proporcionar espaciado a un MRP; también se utiliza para mostrar texto indicando sin datos. Establece la opacidad en 1 para mostrarlo |
| Fila - Pie de página - Texto de fila espaciadora | Texto real mostrado en el MRP. Establece "Contenido" para personalizar tu mensaje |
| Fila - Pie de página - Contenedor de texto de fila espaciadora | DIV de texto utilizado para mostrar el mensaje "No se encontraron resultados" |
Fila - Pie de página <td> |
|
| Fila - Iconos | Iconos en paneles de múltiples filas |
| Fila - Botón Cargar más filas | El botón que aparece cuando puedes cargar más filas |
| Fila - Contenedor del botón Cargar más filas | |
| Fila - Contenedor del panel MRP | |
| Fila - Contenido del panel MRP | |
| Fila - Icono de nueva ventana | |
| Fila - Impar | Cada fila impar en una cuadrícula de datos |
| Fila - Fila | La fila |
| Fila - Fila al pasar, celda de destino | Dirige celdas de fila, cuando no es fila activa y solo al pasar |
| Fila - Seleccionado | La fila en cuadrículas de datos que está actualmente resaltada |
| Fila - Total | La fila total de una cuadrícula de datos |
Panel - Gráfico
| Nombre de la interfaz | Descripción |
|---|---|
| Colores del gráfico - Color 1 | La primera serie en un gráfico |
| Colores del gráfico - Color 2 | La segunda serie en un gráfico |
| Colores del gráfico - Color 3 | La tercera serie en un gráfico |
| Colores del gráfico - Color 4 | La cuarta serie en un gráfico |
| Colores del gráfico - Color 5 | La quinta serie en un gráfico |
| Colores del gráfico - Color 6 | La sexta serie en un gráfico |
| Colores del gráfico - Color 7 | La séptima serie en un gráfico |
| Colores del gráfico - Color 8 | La octava serie en un gráfico |
| Colores del gráfico - Color 9 | La novena serie en un gráfico |
| Colores del gráfico - Color 10 | La décima serie en un gráfico |
| Colores del gráfico - Color de texto | El texto renderizado en varias partes de un gráfico |
| Misc - Banderas | Las banderas en un gráfico |
| Misc - Seleccionado | El color del gráfico resaltado |
| Gráfico de red - Resalte | Estado resaltado en un gráfico de red. Solo establece el color de fondo y el color del borde |
| Gráfico de red - Nodo | Nodos en un gráfico de red. Solo establece el color de fondo y el color del borde |
| Gráfico de red - Texto | Texto en los nodos de un gráfico de red. Solo establece el color de fuente |
Panel - Calendario
| Nombre de la interfaz | Descripción |
|---|---|
| Contenedor - Botón | Botones en la barra de herramientas del calendario |
| Contenedor - Botón - Activo | Botón activo o seleccionado en la barra de herramientas del calendario |
| Contenedor - Celdas | Celdas del calendario, incluidos los días de la semana y los encabezados |
| Contenedor - Contenedor | Los días en un calendario |
| Contenedor - Números de fecha | |
| Contenedor - Encabezado de día | Encabezados de columna de tabla para los días de la semana |
| Contenedor - Título | El título grande en la parte superior del calendario |
| Contenedor - Barra de herramientas | La barra de herramientas del 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 | Todo el cuadro de la fecha de hoy |
| Fecha de hoy - Día | La parte del número de la fecha de hoy |
| Fecha de hoy - Seleccionado | El día del mes seleccionado |
Grupo
| Nombre de la interfaz | Descripción |
|---|---|
| Grupo - Contenido en grupo de panel con pestañas | Los hijos directos de un grupo con pestañas (típicamente un panel) |
| Grupo - Grupos de panel | Todos los grupos a nivel de página |
| Grupo - Grupos de panel desplazado | Grupos que se desplazan; reciben flex para autogestionar la renderización de sus hijos |
| Grupo - Encabezado de grupo con pestañas | |
| Grupo - Título de grupo con pestañas | |
| Grupo - Grupo de panel con pestañas | El grupo cuando se establece como con pestañas |
| Pestaña - Pestaña | |
| Pestaña - Pestaña - Activa | |
| Pestaña - Pestaña - Primera | |
| Pestaña - Pestaña - Contenedor interno | |
| Pestaña - Pestaña - Última | |
| Pestaña - Pestaña - Contenedor externo |
Panel - Chat de agente
| Nombre de la interfaz | Descripción |
|---|---|
| Diseño global - Contenedor raíz del panel de chat | |
| Diseño global - Estado de carga del contenido del panel | |
| Diseño global - Envoltorio de contenido del panel | |
| Ventana principal - Contenedor del área de chat principal | |
| Ventana principal - Encabezado - Botón de menú de hamburguesa | |
| Ventana principal - Encabezado - Imagen de agente del encabezado | |
| Ventana principal - Encabezado - Envoltorio del selector de agente del encabezado | |
| Ventana principal - Encabezado - Envoltorio de icono del encabezado | |
| Ventana principal - Encabezado - Botón de nuevo chat del encabezado | |
| Ventana principal - Encabezado - Barra de encabezado superior | |
| Ventana principal - Área de entrada - Botón de adjuntar | |
| Ventana principal - Área de entrada - Botones de icono de entrada (Base) | |
| Ventana principal - Área de entrada - Envoltorio de sección de entrada | |
| Ventana principal - Área de entrada - Área de texto de entrada | |
| Ventana principal - Área de entrada - Área de texto de entrada (Marcador de posición) | |
| Ventana principal - Área de entrada - Cuadro de entrada de píldora | |
| Ventana principal - Área de entrada - Botón de envío | |
| Ventana principal - Mensajes - Icono de avatar de IA | |
| Ventana principal - Mensajes - Burbuja de mensaje del asistente | |
| Ventana principal - Mensajes - Modificador de burbuja de mensaje local | |
| Ventana principal - Mensajes - Envoltorio de contenido Markdown | |
| Ventana principal - Mensajes - Código en línea Markdown | |
| Ventana principal - Mensajes - Bloque de código preformateado Markdown | |
| Ventana principal - Mensajes - Tabla Markdown | |
| Ventana principal - Mensajes - Contenedor de desplazamiento de mensajes | |
| Ventana principal - Mensajes - Indicador de sondeo | |
| Ventana principal - Mensajes - Burbuja de mensaje del usuario | |
| Barra lateral - Botón de cierre móvil | |
| Barra lateral - Contenedor de barra lateral | |
| Barra lateral - Contenedor de barra lateral (Estado abierto móvil) | |
| Barra lateral - Listas y elementos - Cuadro de icono de agente/historial | |
| Barra lateral - Listas y elementos - Fila de elemento de agente (Específica) | |
| Barra lateral - Listas y elementos - Contenedor de lista de agentes | |
| Barra lateral - Listas y elementos - Icono de agente del historial (Específica) | |
| Barra lateral - Listas y elementos - Botón de eliminación del historial | |
| Barra lateral - Listas y elementos - Fila de elemento de historial (Específica) | |
| Barra lateral - Listas y elementos - Etiqueta de texto de elemento de historial | |
| Barra lateral - Listas y elementos - Filas de elementos de lista | |
| Barra lateral - Listas y elementos - Filas de elementos de lista (Activas) | |
| Barra lateral - Listas y elementos - Respaldo de iconos de imagen de barra lateral | |
| Barra lateral - Secciones y encabezados - Estado de historial vacío | |
| Barra lateral - Secciones y encabezados - Etiqueta de grupo de historial | |
| Barra lateral - Secciones y encabezados - Contenedor de encabezado de sección | |
| Barra lateral - Secciones y encabezados - Icono de encabezado de sección | |
| Barra lateral - Secciones y encabezados - Título de encabezado de sección | |
| Barra lateral - Secciones y encabezados - Envoltorios de sección | |
| Barra lateral - Secciones y encabezados - Envoltorios de sección (Desplazable) | |
| Barra lateral - Acciones superiores - Botón de nuevo chat | |
| Barra lateral - Acciones superiores - Contenedor de fila de nuevo chat |
Contenedores de Control
| Nombre de Interfaz | Descripción |
|---|---|
Acordeón - Icono de Flecha de Acordeón <img> |
|
| Acordeón - Icono de Acordeón | |
| Acordeón - Elemento de Acordeón | |
| Acordeón - Contenedor | Contenedor de control para todos los grupos de campos internos |
| Acordeón - Contenedor - Solo Hijo | Igual que contenedor, pero solo para el hijo que recibe el tema |
| Acordeón - Grupo de Control | Los grupos de control mostrados bajo el título del acordeón |
| Acordeón - Grupo de Control con Borde | |
| Acordeón - Control dentro del Título Abierto | |
| Acordeón - Grupo de Campos Directamente dentro del Acordeón | |
| Acordeón - Primer Elemento de Acordeón | |
| Acordeón - Título | El área de título en la que se puede hacer clic del acordeón, que contiene la etiqueta e icono de cierre |
| Acordeón - Título - Abierto | El área de título de un acordeón, cuando está abierto |
| Grupo de Campos - Contenedor | Contenedor de conjunto de campos que aloja controles de formulario |
| Grupo de Campos - Contenedor con Borde Oculto | Contenedor de grupo de campos con su borde configurado como oculto |
| Grupo de Campos - Contenedores de Control en Grupos de Campos | |
| Grupo de Campos - Controles dentro de un Grupo de Control - Interno | Para usar con un grupo de control, dirige el primer elemento en el contenedor exterior |
| Grupo de Campos - Grupo de Control Encerrado | Grupos de control encerrados |
| Grupo de Campos - Etiqueta de Grupo de Campos (Borde Visible) | |
| Grupo de Campos - Primer Hijo del Contenedor | El primer elemento en un contenedor |
| Grupo de Campos - Grupo:Etiqueta Expandida:Posición de Etiqueta Apilada | Etiquetas de un grupo de control expandido cuando el contenedor principal tiene etiquetas apiladas |
| Grupo de Campos - Grupo con Borde Visible | Grupo de Control con borde visible |
| Grupo de Campos - Fila Destacada | Selecciona todas las celdas después de este campo |
| Grupo de Campos - Etiqueta | La parte de leyenda del contenedor de conjunto de campos |
| Grupo de Campos - Etiqueta (Borde Visible) | |
| Grupo de Campos - Etiqueta en Grupo de Control con Borde Visible | |
| Grupo de Campos - Contenedor de Envoltura de Campo SBS | |
| Grupo de Campos - Contenedor de Envoltura de Campo SBS Una Vez | |
| Grupo de Campos - Etiquetas SBS | |
| Grupo de Campos - Grupo de Campos Apilado con Etiqueta Lado a Lado (Corrección de Errores) | |
| Grupo de Campos - Contenedor Interno Apilado | El elemento interno de un grupo de campos apilado |
| Grupo de Campos - Hijos del Contenedor Interno Apilado | |
| Grupo de Campos - Grupo de Control de Nivel Superior | |
| Barra de Pestañas - Contenedor de Pestañas en la que se puede Hacer Clic | El área que contiene las pestañas en las que se puede hacer clic |
| Barra de Pestañas - Contenedor | Contenedor de control para las pestañas y los grupos de campos dentro |
| Barra de Pestañas - Grupo de Control | El grupo de control en un conjunto de pestañas |
| Barra de Pestañas - Grupo de Campos Directamente dentro de Pestañas | |
| Barra de Pestañas - Abierto | La pestaña que está abierta |
| Barra de Pestañas - Pestaña | Todas las pestañas en un conjunto de pestañas |
| Barra de Pestañas - Línea de Pestaña | Elemento de línea bajo las pestañas |
Controles
| Nombre de Interfaz | Descripción |
|---|---|
| Insignia - Insignia | El elemento de insignia que se adhiere a otros controles |
| Botón - Enlace Activo a Página - Botón | |
| Botón - Indicador de Actividad | El elemento giratorio utilizado para indicar actividad |
| Botón - Indicador de Actividad - Icono | El icono giratorio utilizado para indicar actividad |
| Botón - Indicador de Actividad - Icono [Deshabilitado] | Icono giratorio en un botón que también está deshabilitado; podría estar en estado de ejecución |
| Botón - Menú de Aplicación - Enlace Activo a Página - Botón | |
| Botón - Menú de Aplicación - Enlace a Página - Botón | |
| Botón - Menú de Aplicación - Enlace a Página - Icono | |
| Botón - Botón | Botones en un panel |
| Botón - Contenedor de Botón | Envoltorio alrededor de un botón, no el botón en sí |
| Botón - Control de Botón | Selector para botones, pero en Vinyl los botones pueden ser una etiqueta BUTTON o <A> |
| Botón - Espaciador de Margen de Botón | Además de la clase de icono base, los botones agregan márgenes si el título es visible (no un espacio) |
| Botón - Botones en un Grupo SBS | |
| Botón - Botones en un Grupo SBS (Excepto el Primero) | |
| Botón - Botones en un Grupo SBS (Excepto el Último) | |
| Botón - Botón con Icono - Etiqueta Oculta | |
| Botón - Botones Deshabilitados | Selecciona botones que están específicamente deshabilitados |
| Botón - Icono | Iconos en botones |
| Botón - Icono - Etiqueta Oculta | Icono en botón cuando la etiqueta está oculta |
| Botón - Etiqueta | La etiqueta de texto de un botón |
| Botón - Botón Grande | Botones Grandes en un panel |
| Botón - Icono de Botón Grande | Iconos en Botones Grandes |
| Botón - Botón de Subtipo Grande | Esta área es para botones con un subtipo de grande (actualmente solo se aplica a menús en línea) |
| Botón - Botones Principales | El botón principal en un panel; típicamente de color sólido |
| Botón - Botones Secundarios | Botones menos destacados, para acciones secundarias |
| Botón - SRP - Botón | |
| Grupo de Botones - Botón Activo | El botón actualmente seleccionado |
| Grupo de Botones - Icono de Botón Activo | El icono del botón actualmente seleccionado |
| Grupo de Botones - Botón Activo (No Seleccionable por Usuario) | El botón actualmente seleccionado cuando no es seleccionable por usuario |
| Grupo de Botones - Botón | Cada botón en un grupo. Usa flex: auto para cambiar cómo se ajustan los botones |
| Grupo de Botones - Indicador Requerido de Grupo de Botones | |
| Grupo de Botones - Botón (No Seleccionable por Usuario) | Cada botón en un grupo. Usa flex: auto para cambiar cómo se ajustan los botones cuando no es seleccionable por usuario |
| Grupo de Botones - Contenedor | El contenedor exterior alrededor de un conjunto de botones |
| Grupo de Botones - Iconos | Iconos dentro de un grupo de botones |
| Grupo de Botones - Etiqueta | Texto de etiqueta dentro de un grupo de botones |
| Grupo de Botones - Etiqueta (No Seleccionable por Usuario) | Texto de etiqueta dentro de un grupo de botones cuando no es seleccionable por usuario |
| Grupo de Botones - Botones de Carga | 3 botones que aparecen cuando el grupo de botones está cargando sus datos |
| Grupo de Botones - Relleno de Espacio | Un elemento que hace que la última fila de un grupo de botones no se extienda para llenar todo el espacio disponible |
| Campos - Contenedores de Campos Adicionales | Contenido de campo de formulario adicional, como opciones de cuadro de lista |
| Campos - Modo Experto de I.A. | |
| Campos - Modo Novato de I.A. | |
| Campos - Todos los Controles de Campo - Heredado | |
| Campos - Campos Siempre en Edición | |
| Campos - Menú de Aplicación - Valor de Campo | |
Campos - Campos de Autocompletar <ul> |
|
| Campos - Autoedición | El efecto de desplazamiento sobre un campo de autoedición |
| Campos - Autoedición - Casilla de Verificación | |
| Campos - Autoedición Inactiva | |
| Campos - Autoedición (No Casilla de Verificación) | |
| Campos - Datos Ocultos de Chat | |
| Campos - Control de Casilla de Verificación | |
| Campos - Contenedor de Control de Casilla de Verificación (Todos los Estados) | |
Campos - Casilla de Verificación <img> |
|
| Campos - Control de Tipo Casilla de Verificación | |
| Campos - Control de Tipo Casilla de Verificación - Casilla de Verificación | |
| Campos - Control de Tipo Casilla de Verificación - Etiqueta | |
| Campos - Botón Limpiar Valor | Botón que limpia el valor de un campo |
| Campos - Icono del Botón Limpiar Valor | Icono utilizado en el botón que limpia el valor de un campo |
| Campos - Selector de Color | La visualización del elemento selector de color |
| Campos - Control Posterior | |
| Campos - Contenedor de Control dentro del Grupo SBS | |
| Campos - Desplazamiento del Control | Pasar el cursor sobre un control, afectando el :after |
| Campos - Controles en un Grupo SBS (Excepto el Primero) | |
| Campos - Controles en un Grupo SBS (Excepto el Último) | Controles en este grupo de control específico, excepto el último |
| Campos - Controles con Etiquetas Lado a Lado | Todos los tipos de control de campo, el área que contiene el valor en estado de vista y el control de entrada cuando está en edición |
| Campos - Control dentro de un Grupo SBS (Todos) | |
| Campos - Control con Etiqueta Lado a Lado (Contenedor) | |
| Campos - Día Activo del Selector de Fecha | |
| Campos - Flecha del Widget del Selector de Fecha | |
| Campos - Contenedor del Widget del Selector de Fecha | |
| Campos - Día del Widget del Selector de Fecha | |
| Campos - Botones Superiores del Widget del Selector de Fecha | |
| Campos - Campo Deshabilitado | |
| Campos - Flecha de Desplegable | La flecha en el lado derecho de un campo desplegable |
| Campos - Contenido de Flecha de Desplegable | El icono de flecha en el lado derecho de un campo desplegable |
| Campos - Contenedor de Desplegable | |
| Campos - Elemento de Desplegable | Un elemento dentro de una lista desplegable |
| Campos - Elemento de Desplegable (No Seleccionable por Usuario) | Un elemento dentro de una lista desplegable cuando no es seleccionable por usuario |
| Campos - Desplegable No Seleccionado | |
| Campos - Estado de Edición | Elementos de formulario en la página |
| Campos - Estado de Edición en Uso | Elementos de formulario en la página, cuando están enfocados u otro estado activo |
| Campos - Video Incrustado | |
| Campos - Control Encerrado | |
| Campos - Contenedor de Control Encerrado | |
| Campos - Etiqueta de Control Encerrado | |
| Campos - Campo Estático de Control Encerrado | |
| Campos - Editor HTML Encerrado | |
| Campos - Modo Excel | El efecto de desplazamiento sobre un campo de Modo Excel |
| Campos - Modo Excel - Casilla de Verificación | Casillas de verificación cuando se usa Modo Excel |
| Campos - Modo Excel - Casilla de Verificación IMG | Imagen dentro de una casilla de verificación en Modo Excel |
| Campos - Modo Excel - Lista | Listas cuando se usa Modo Excel |
| Campos - Modo Excel - Lista (Posterior) | |
| Campos - Contenedor de Campo | Contenedor de campo para todos los tipos |
| Campos - Controles de Archivo | Dirige el contenedor exterior del control de archivo |
| Campos - Controles de Archivo - Div de Botón | |
| Campos - Controles de Archivo - Icono de Botón | |
| Campos - Controles de Archivo - Icono de Botón Anterior | |
| Campos - Controles de Archivo - Entrada de Nombre de Archivo | Campo de entrada de nombre de archivo del control de archivo únicamente |
| Campos - Controles de Archivo - Texto de Tamaño de Archivo | Texto de Tamaño de Archivo en un control de Archivo cuando está en estado de edición |
| Campos - Controles de Archivo - Botón Eliminar | Botón eliminar del control de archivo únicamente |
| Campos - Control de Tipo de Archivo - Botón de Descarga de Archivo | |
| Campos - Control de Tipo de Archivo - Icono del Botón de Descarga de Archivo | |
| Campos - Elementos de Enfoque | |
| Campos - Control de Formulario | Control de Formulario |
| Campos - Campos de Formulario General | Selector todo en uno para permitir editar el tamaño de los campos de formulario |
| Campos - Editor HTML | |
| Campos - Contenedor del Editor HTML | |
| Campos - Editor HTML - Contenedor Interno | |
| Campos - Control de Tipo HTML | |
| Campos - Control de Imagen | |
Campos - Control de Imagen - <img> |
Etiquetas IMG en un control de imagen de foto |
| Campos - Imagen con Propósito de Foto | |
| Campos - Menú en Línea - Contenedor Exterior de Botones | |
| Campos - Envoltorio Interno | El primer elemento dentro de un control; úsalo con moderación |
| Campos - Entrada - Etiqueta Interna | |
| Campos - Etiqueta Interna | La etiqueta dentro de un campo de entrada |
| Campos - Flecha de Cuadro de Lista | |
| Campos - Flecha de Cuadro de Lista (Control con Etiqueta Interna) | |
| Campos - Control de Cuadro de Lista | |
| Campos - Campo de Panel de Métrica | |
| Campos - Etiqueta de Campo de Panel de Métrica | |
| Campos - Valor de Campo de Panel de Métrica | |
| Campos - Botón de Encabezado Más | |
| Campos - No Editable | Todos los valores de texto no editable provenientes de una fuente de datos |
| Campos - Campos No Editables (Sin MRP ni Autoedición) | |
| Campos - Actualmente No Editable | Campos que podrían editarse si pasas al modo de edición |
| Campos - Contenedores de Control Exterior | |
| Campos - Selector de Control Exterior | Envoltorio más externo que pueden usar los temas |
| Campos - Envoltorio Exterior | El elemento superior más que puede usarse con temas condicionales |
| Campos - Campo de Solo Lectura - Estado de Vista | Campos en estado de vista que están bloqueados para pasar a edición debido al estado del control |
| Campos - Asterisco Requerido | Un asterisco junto a la etiqueta de un control que indica que el campo es obligatorio |
| Campos - Indicador Requerido | El pequeño elemento de color que indica que un campo es obligatorio |
| Campos - Indicador Requerido - Etiqueta Interna | |
| Campos - Control Alineado a la Derecha en un Grupo SBS | |
| Campos - Contenedor del Constructor de Reglas | |
| Campos - Seleccionado | Varios elementos de datos destacados como listas o días en un panel de fecha |
| Campos - Etiqueta Lado a Lado en un Grupo de Campos Apilado | |
| Campos - SRP - Siempre en Edición | |
| Campos - SRP - Siempre en Edición - Lista | |
| Campos - SRP - Autoedición | |
| Campos - SRP - Selector de Color en Uso | |
| Campos - SRP - Flecha de Desplegable | La flecha en el lado derecho de un campo desplegable solo para Paneles de Fila Única |
| Campos - SRP - Contenido de Flecha de Desplegable | El icono de flecha en el lado derecho de un campo desplegable solo para Paneles de Fila Única |
| Campos - SRP - Contenedor de Desplegable | |
| Campos - SRP - Desplegable No Seleccionado | |
| Campos - SRP - Estado de Edición | |
| Campos - SRP - Contenedor de Estado de Edición | |
| Campos - SRP - Estado de Edición en Uso | |
| Campos - SRP - Lista de Estado de Edición (Permitir Inserción) | |
| Campos - SRP - Modo Excel - Lista (Posterior) | Lista de Modo Excel (selector css :after) |
| Campos - SRP - Botón de Archivo | |
| Campos - SRP - Icono de Entrada de Archivo | |
| Campos - SRP - Control de Formulario | |
| Campos - SRP - Grupo de Entrada | |
| Campos - SRP - Área de Texto | |
| Campos - Control Apilado en un Grupo SBS | |
| Campos - Control Apilado en un Grupo Apilado | |
| Campos - Control Apilado en Grupo Apilado (no el primero) | |
| Campos - Etiqueta de Control Apilado | |
| Campos - Etiqueta de Control Apilado - Alineado al Centro | |
| Campos - Control Apilado (Corrección de Margen) | |
| Campos - Campo Apilado con Etiqueta Oculta | |
| Campos - Diseño Apilado, Etiqueta en SBS, Div en SBS (Corrección de Errores) | |
| Campos - Etiquetas - Etiqueta Individual | |
| Campos - Etiquetas - Contenedor de Grupo de Etiquetas | |
| Campos - Etiquetas - Texto dentro de Etiqueta | |
| Campos - Control de Área de Texto | |
| Campos - Enlaces de Texto | |
| Campos - Control de Estado de Vista | Selector de formato heredado; dirige la versión de estado de vista de un control |
| Ayuda - Icono junto a Botón con Ayuda | El icono junto a un botón que tiene texto de ayuda para mostrar |
| Ayuda - Icono junto a Etiqueta con Ayuda | Una etiqueta que tiene texto de ayuda para mostrar |
| Ayuda - Contenedor de Información | La información emergente que aparece para mostrar ayuda |
| Campos de Icono - Campos de Icono | Tipos de control de campo de icono |
| Campos de Icono - Imagen con Propósito de Icono | |
| Campos de Icono - Campos de Icono Vinculados | |
| Campos de Icono - Iconos de Lista | Campos de lista con iconos (solo la parte del icono) |
| Campos de Icono - SRP - Contenedor de Icono | |
| Control de Línea - Control de Línea | Controles de línea, utilizados para dividir contenido en un panel |
| Enlaces - Enlace Activo a Página (Campo) | Dirige el control que está vinculado a la página actualmente activa |
| Enlaces - Chevron | El chevron que aparece después de un hipervínculo |
| Enlaces - Contenedor | Enlaces en toda la aplicación |
| Enlaces - Anulación de Color de Enlace (Iconos de Barra de Herramientas) | |
| Barra de Progreso - Barra de Progreso - Llena | Elemento de barra de progreso (lleno) |
| Barra de Progreso - Barra de Progreso - Exterior | Elemento exterior alrededor de la parte llena de una barra de progreso |
| Radio - Texto de Carga | Texto mostrado mientras un radio está cargando sus controles |
| Radio - Grupo de Radio | Contenedor exterior para múltiples elementos de botón de radio |
| Radio - Elemento de Radio | Cada elemento de radio, incluyendo el botón y su título |
| Radio - Botón de Elemento de Radio | El botón de radio circular en sí |
| Radio - Botón de Elemento de Radio (No Seleccionable por Usuario) | El botón de radio circular en sí cuando no es seleccionable por usuario |
| Radio - Imagen de Elemento de Radio | El icono por elemento de botón de radio |
| Radio - Elemento de Radio (No Seleccionable por Usuario) | Cada elemento de radio, incluyendo el botón y su título cuando no es seleccionable por usuario |
| Radio - Elemento de Radio Seleccionado | El elemento de radio actualmente seleccionado |
| Radio - Elemento de Radio Seleccionado - Imagen | La imagen de un elemento de radio, cuando está seleccionado |
| Radio - Elemento de Radio Seleccionado - Título | Título del elemento de radio seleccionado |
| Radio - Texto de Elemento de Radio | El contenedor para el texto de cada elemento de radio |
| Radio - Texto de Elemento de Radio (No Seleccionable por Usuario) | El contenedor para el texto de cada elemento de radio cuando no es seleccionable por usuario |
| Radio - Elemento de Radio - Título | Título del elemento de radio |
| Radio - Subtítulo de Radio | El texto pequeño que aparece bajo el título |
| Control de Espacio - Control de Espacio | Controles de espacio, utilizados para espaciar contenido en un panel |
Validaciones
| Nombre de la interfaz | Descripción |
|---|---|
| Validaciones - Botones | Botones como Proceder y Cancelar |
| Validaciones - Botones - Cancelar | El botón cancelar en un elemento de validación |
| Validaciones - Botones - Proceder | El botón proceder en una validación |
| Validaciones - Confirmación | Mensajes de confirmación para eventos como Eliminar |
| Validaciones - Espacios vacíos | |
| Validaciones - Error | Resultados de validación de tipo Error |
| Validaciones - Contenedor de evento | |
| Validaciones - Excepción | Excepciones del App Builder que aparecen en la parte inferior de la pantalla |
| Validaciones - Información | Resultados de validación de tipo Información |
| Validaciones - Contenedor de acciones de validación en línea | |
| Validaciones - Contenedor de validación en línea | |
| Validaciones - Contenedor externo de validación en línea | |
| Validaciones - Validación de panel de una sola fila | Mensajes que aparecen en eventos del panel |
| Validaciones - Éxito | |
| Validaciones - Éxito - Texto | |
| Validaciones - Botón de cierre de validación | |
| Validaciones - Contenedor de validación | |
| Validaciones - Espacios de texto de mensaje de validación | |
| Validaciones - Advertencia | Resultados de validación de tipo Advertencia |
Formulario de inicio de sesión
| Nombre de la interfaz | Descripción |
|---|---|
| Logotipo de inicio de sesión - Icono en campos de formulario | |
| Logotipo de inicio de sesión - Icono en campos de formulario - Contraseña (Antes) | |
| Logotipo de inicio de sesión - Icono en campos de formulario - Usuario (Antes) | |
| Logotipo de inicio de sesión - Logotipo de inicio de sesión de Jitterbit | |
| Logotipo de inicio de sesión - Contenedor de botones del formulario de inicio de sesión | |
| Logotipo de inicio de sesión - Contenedor del formulario de inicio de sesión | |
| Logotipo de inicio de sesión - Encabezado del formulario de inicio de sesión | |
| Logotipo de inicio de sesión - Título del encabezado del formulario de inicio de sesión | |
| Logotipo de inicio de sesión - Título del encabezado del formulario de inicio de sesión (Después) | |
| Logotipo de inicio de sesión - Título del encabezado del formulario de inicio de sesión (Después, proveedor único) | |
| Logotipo de inicio de sesión - Título del encabezado del formulario de inicio de sesión (Después, cuando se expande) | |
| Logotipo de inicio de sesión - Título del encabezado del formulario de inicio de sesión (Cuando se expande) | |
| Logotipo de inicio de sesión - Encabezado del formulario de inicio de sesión (Cuando se expande) | |
| Logotipo de inicio de sesión - Logotipo de inicio de sesión | El logotipo que aparece en la página de inicio de sesión; usa imagen de fondo |
| Logotipo de inicio de sesión - Contenedor del proveedor de inicio de sesión | |
| Logotipo de inicio de sesión - Contenedor del proveedor de inicio de sesión (Cuando se expande) |
Referencia de tipo de estilo (tipo de valor)
| Nombre del tipo de valor | Descripción de entrada | Texto de ayuda |
|---|---|---|
| Estilos avanzados | Define valores CSS más avanzados para posición, contenido e índice z | |
| Alineación | Define la alineación para diferentes elementos en un área especificada | El valor 1 especifica la alineación vertical de un contenedor en línea, por ejemplo: middle. El valor 2 se utiliza para establecer la alineación horizontal del texto, por ejemplo: center. |
| Animación | Especifica animaciones o estilos de transición | |
| Fondo avanzado | Define valores para todas las opciones relacionadas con el fondo | El valor 1 representa la propiedad de fondo abreviada. Con esto puedes especificar todas las opciones de fondo a la vez. El valor 2 es la propiedad de tamaño de fondo. |
| Color de fondo | Define el color de fondo para elementos especificando información de valor de color | El valor 1 se utiliza para el color de fondo. Puede ser un código HTML o usar {PrimaryColor} por ejemplo para utilizar el color del tema. |
| Gradiente de fondo | Define información de gradiente de fondo para un elemento especificando un color de inicio, un color final y un color de borde | Los valores 1 y 2 se utilizan para los colores Para y Desde. El valor 3 es para el color del borde. |
| Imagen de fondo | Especifica una imagen de fondo para mostrar como fondo de un elemento y define información de tamaño para la imagen | El valor 1 es una URL o una imagen codificada en Base64. Haz clic derecho en cualquier imagen del App Builder y Copiar URL para utilizar imágenes alojadas en App Builder. El valor 2 se utiliza para estirar o repetir la imagen. Para estirar escribe cover, de lo contrario déjalo en blanco para repetir (mosaico) la imagen. |
| Borde | Especifica información para el borde de un elemento, como código de color, valor de color nombrado, estilo y ancho | |
| Radio de borde | Especifica el valor de curvatura del borde de un elemento | El valor 1 se utiliza para redondear las esquinas de un elemento. |
| Sombra de caja | Especifica un efecto de sombra en un elemento de caja | El valor 1 representa los valores de sombra de caja, mientras que el valor 2 se utiliza para el color de la sombra. |
| Visualización | Define propiedades que afectan si se muestra el elemento | |
| Propiedades avanzadas de Flex | Define opciones adicionales de cuadro flexible | |
| Propiedades de Flex | Define opciones de cuadro flexible | |
| Fuente | Especifica información de estilo de fuente diversa, como tipo de fuente, tamaño y grosor (negrita) de los caracteres mostrados | El valor 1 se utiliza para especificar el tipo de fuente de un elemento. Usa una lista separada por comas. Por ejemplo: Calibri, Arial, sans-serif. El valor 2 se utiliza para establecer Tamaño de fuente. Las opciones de Tamaño de fuente van desde xx-small hasta xx-large. Por ejemplo: small. El valor 3 se utiliza para establecer Grosor de fuente, u qué tan grueso o delgado aparecen los caracteres de fuente en la página. Las opciones de Grosor de fuente van desde normal hasta bolder. Un Grosor de fuente de 400 es lo mismo que normal, 700 es lo mismo que bold. Por ejemplo: bold. |
| Color de fuente | Especifica un valor de color para la fuente que aparece en un elemento | El valor 1 se utiliza para el color de fuente. El valor 2 debe estar en un formato específico: 0 1px 1px #222. Cambia el código de color para afectar el color real. |
| Propiedades CSS de forma libre | Ingresa propiedades CSS de forma libre sin procesar | |
| Propiedades avanzadas de Grid | Define opciones de cuadrícula adicionales | |
| Alto y ancho | Define el alto y ancho de los elementos | |
| Icono - Glifo | Especifica un icono de glifo para mostrar mediante un valor de código Glyphicon | El valor 1 se utiliza para el código Glyphicon. |
| Alto y ancho mín./máx. | Define el alto y ancho mínimo y máximo de los elementos | |
| Posiciones | Define la posición del elemento, afectando dónde se coloca en relación con el valor de posición | |
| Espaciado | Especifica valores de espaciado para contenido que aparece en un contenedor | |
| Espaciado - Margen | Especifica valores de margen para contenido que aparece en un contenedor | |
| Texto avanzado | Define valores CSS más avanzados para texto, para definir propiedades text-decoration, text-transform y font-style |
El valor 1 establece text-decoration, utilizado para agregar subrayado y otras propiedades. El valor 2 establece text-transform, utilizado para texto en mayúsculas. El valor 3 establece font-style, utilizado para cursivas. |