Construcciones de estilo para formularios adaptables

Requisitos previos

Conocimiento de CSS y del marco LESS.

Qué se puede personalizar

El artículo enumera las clases css disponibles públicamente de formularios adaptables. Puede aprovechar estas clases para aplicar estilo a varios componentes de un formulario adaptable. El estilo de los componentes de creación, como los cuadros de diálogo y las barras de estado que muestran advertencias, excede el ámbito de este artículo. Utilice estas construcciones de estilo para crear estilos (con CSS o Less) solo cuando no pueda aplicar estilo a los componentes mediante editor de temas.

Personalización de estilos en formularios adaptables

El marco LESS simplifica el caso de uso para personalizar estilos en formularios adaptables. El marco permite definir estilos utilizando un conjunto de variables y funciones (mezclas). El marco LESS ayuda a reducir el tamaño del código agrupado y aumenta su reutilización.

Puede personalizar los estilos de formulario adaptables de las siguientes maneras:

  • Cambiar el tema
  • Cambiar el estilo del componente

Cambio del tema

Puede cambiar el tema de un formulario adaptable para asegurarse de que su aspecto sea coherente con las páginas web en las que está incrustado el formulario adaptable.

Los cambios en el aspecto general del formulario adaptable que utiliza propiedades CSS suelen formar parte de los cambios de tema. Los principales cambios en la apariencia "adecuada" del formulario adaptable, como los cambios en el diseño y la ubicación de los componentes, no se consideran cambios de tema.

En función del arranque, el siguiente conjunto de propiedades CSS define el tema de una página web:

  • Color de fondo
  • Borde (tipo, color, grosor)
  • Color de fuente
  • Espacio
  • imagen
  • Tamaño de fuente
  • LineHeight

Actualmente, las variables LESS se definen solo para estas propiedades de los distintos elementos de una forma adaptativa.

Cambio del estilo de componente

Puede realizar cambios en el aspecto, el diseño, el posicionamiento y la visibilidad de los elementos. Para realizar esta tarea, cree o actualice los archivos .css personalizados para incluir las construcciones de estilo que se enumeran en este artículo.

Para aplicar un estilo a un formulario adaptable, abra el formulario adaptable en para editarlo, abra las propiedades del contenedor de formularios adaptables y especifique la ruta del archivo CSS personalizado en la pestaña basic . Las construcciones de estilo predeterminadas del formulario adaptable se anulan con las construcciones enumeradas en el archivo .css personalizado.

Componentes

Los componentes mencionados en este artículo tienen sus clases CSS predefinidas. Puede editar las variables para modificar los estilos en las clases CSS. Como alternativa, puede reescribir toda la clase. En esta sección se describen las clases dentro de los componentes y los estilos que se pueden modificar mediante variables.

Estilo de contenedor

Un contenedor es el componente de nivel superior. Otros paneles y campos se encuentran debajo del componente contenedor.

Clase de CSS

guideContainerNode

Descripción de las variables

Descripción de las variables

container-bgColor

Color de fondo del contenedor

container-padding

Relleno para el contenedor

container-margin

Margen del contenedor

container-fontColor

Color de fuente del contenedor

Estilo de campo

Los formularios adaptables incluyen varios tipos de campos. Cada campo tiene un nombre de clase único, que es el nombre del campo. El campo también tiene un nombre de clase común guideFieldNode.

Los campos incluyen etiquetas, utilidades, descripción de la ayuda (tanto descripciones largas como cortas) e iconos de ayuda de campos (signo de interrogación).

Clase de CSS

guideFieldNode

Variables

Descripción

field-padding

Relleno para el campo

field-error-font-color

Color de fuente del mensaje de error del campo

field-error-font-size

Tamaño de fuente del mensaje de error del campo

Estilo de etiqueta

El elemento HTML label utilizado para el campo incluye las clases left o top dependiendo de si la etiqueta está en la parte superior o en la izquierda.

Clase de CSS

guideFieldLabel

Variables

Descripción

label-font-color

Color de fuente de la etiqueta de campo

label-font-size

Tamaño de fuente de la etiqueta de campo

label-line-height

 Propiedad de altura de línea CSS para la etiqueta de campo

label-font-weight

 Propiedad de ponderación de fuente CSS para la etiqueta de campo

label-margin

Margen de la etiqueta de campo

Las reglas CSS para la etiqueta se aplican utilizando la etiqueta guideFieldLabel. Si es autor, anule esta regla para que los cambios personalizados sean visibles.

Estilo de las utilidades

Según su tipo, las utilidades también incluyen clases. Normalmente, las utilidades incluyen la clase guideFieldWidget. Los widgets que se envían con HTML normalmente utilizan la entrada estándar del elemento HTML y seleccionan. El estilo se realiza según corresponda. No se puede aplicar estilo a un widget personalizado cambiando las variables.

Clase de CSS

guideFieldWidget

Variables

Descripción

widgets-bg-color

 Color de fondo de las utilidades (no funciona para la casilla de verificación y el botón de radio)

widgets-border-color

Color de borde para las utilidades

widgets-border-thickness

Tamaño de borde de las utilidades

widgets-border-radius

Radio del borde de las utilidades

widgets-border-type

Tipo de borde de las utilidades

widget-border-focus-type

Tipo de enfoque de los bordes de los widgets

widgets-border

Estilo de borde consolidado de las utilidades

widgets-font-color

Color del texto dentro del widget

widgets-font-size

Tamaño del texto dentro del widget

widgets-line-height

 Propiedad CSS lineheight para el widget

widgets-padding

Propiedad de relleno CSS para el widget

widgets-focus-border-color

Color de borde cuando el widget está enfocado

widgets-mandatory-border-color

Color de borde del widget para los campos obligatorios

widgets-mandatory-bg-color

Color de fondo del widget para los campos obligatorios

widgets-disabled-bg-color

Color de fondo del widget cuando el campo está desactivado

widgets-disabled-font-color

Color de fuente del widget cuando el campo está desactivado

widgets-disabled-border-color

Color de borde del widget cuando el campo está desactivado

widget-height

 Altura del widget (no funciona para la casilla de verificación y el botón de radio)

checkbutton-height

Altura de la casilla de verificación y el botón de radio.

listboxwidget-height

Altura máxima de un menú desplegable de selección múltiple

Limitaciones en el estilo del widget

El estilo de los campos centrados, obligatorios y desactivados está restringido mediante variables. Sin embargo, puede cambiarlo anulando los estilos. La restricción mediante variables se proporciona principalmente para mantener bajo control el número de variables. La restricción se puede relajar si el aspecto de un campo cambia drásticamente porque está en cualquiera de los estados mencionados anteriormente.

Descripción de la ayuda

Un autor puede especificar el contenido de la Ayuda en los campos mediante los componentes de descripción corta y larga . Ambos componentes tienen una clase común .guideHelpDescription y otra clase .long/ .short, según el tipo de descripción. El contenido de la Ayuda se adjunta en un elemento de párrafo para anular el estilo de la descripción. La descripción de la Ayuda (tanto larga como corta) se modifica mediante variables que comienzan por widgetshelp, como se indica en la siguiente tabla:

Variables

Descripción

widgets-help-long-bg-color

Color de fondo de la ayuda larga de los widgets

widgets-help-long-border-color

Color de borde de la ayuda larga de los widgets

widgets-help-long-border-indicator-color

Color del borde del indicador izquierdo de la ayuda larga de los widgets

widgets-help-short-bg-color

Color de fondo de la ayuda breve de las utilidades

widgets-help-short-color

Color de fuente de la ayuda breve de las utilidades

widgets-help-short-tooltip-bg-color

Color de fondo de la ayuda de información breve del objeto de las utilidades

widgets-help-short-tooltip-color

Color de fuente de la información de objeto corta de los widgets Ayuda

Términos y condiciones

La utilidad Términos y condiciones (TnC ) permite especificar términos y condiciones. Puede personalizar la utilidad mediante las variables que se describen en la tabla siguiente.

Variables

Descripción
tnc-unvisited Color de fuente del vínculo tnc no visitado.
tnc-visited Color de fuente del vínculo tnc visitado.

Botón

Los botones también son widgets. Sin embargo, su estilo es ligeramente diferente del de los widgets. En los formularios adaptables, cualquiera de las siguientes opciones constituye un botón:

  • input[type = text]
  • botón
  • elemento con clase .button

Código HTML para el botón :

<button type="button" >

<span class="iconButtonicon"></

span>

<span class="iconButtonlabel"></

span>

</button>

Clase de CSS

Descripción

iconButton-icon

Proporciona iconos para el botón

iconButton-label

Etiqueta/rótulo del botón Estilos

Variables

Descripción

button-border-size

Tamaño del borde de los botones

button-border-type

Tipo de borde

button-padding

Propiedad de relleno CSS para el botón

button-font-size

Tamaño de fuente del botón

button-background-color

Color de fondo del botón

button-font-color

Color de fuente del botón

button-border-color

Color del borde del botón

button-large-padding

Relleno para botones grandes (botones con clase .buttonlarge)

button-large-font-size

Tamaño de fuente para botones grandes

button-small-padding

Relleno para los botones pequeños (botones con clase .buttonsmall)

button-small-font-size

Tamaño de fuente para botones pequeños

button-info-background-color

Color de fondo para botones informativos (botones con clase .buttoninformative)

button-info-font-color

Color de fuente para botones informativos

button-info-border-color

Color del borde de los botones informativos

button-warning-background-color

Color de fondo para botones con estilo de advertencia (botones con clase .buttonwarning)

button-warning-font-color

Color de fuente para botones con estilo de advertencia

button-warning-border-color

Color del borde de los botones con estilo de advertencia

button-alert-background-color

Color de fondo para botones de alerta (botones con clase .buttonalert)

button-alert-font-color

Color de fuente para botones de alerta

button-alert-border-color

Color de borde para botones de alerta

Signo de interrogación

Para las utilidades, se muestra un signo de interrogación cuando un autor añade una descripción larga al contenido de la Ayuda. Se utiliza el icono predeterminado proporcionado en bootstrap. Para utilizar un icono personalizado, puede personalizar los iconos de arranque.

Clase de CSS

guideHelpQuestionMark

Variables

Descripción

questionmark-font-color

Color del icono

questionmark-hover-font-color

Color del icono cuando se pasa el ratón sobre él

Tabla

Puede cambiar el tema de color para el encabezado y las filas de trabajo de una tabla mediante las siguientes variables.

Variables

Descripción

table-header-bg-color

Color de fondo para la fila de encabezado. El valor predeterminado es #333.

table-odd-row-bg-color

Color de fondo para la fila de trabajo impar. El valor predeterminado es rgb(255, 255, 255).

table-even-row-bg-color

Color de fondo para la fila de trabajo par. El valor predeterminado es #eee.

Archivo adjunto

El widget Archivo adjunto de los formularios adaptables permite cargar archivos. También puede personalizar la utilidad mediante las variables .

Variables

Descripción

fileItemPadding

Relleno para los archivos mostrados en el widget

fileItemBackground

Color de fondo para el elemento de archivo

fileItemBorderColor

Color de borde para el borde superior

fileItemColor

Color de fuente para el elemento de archivo

filePreviewIconColor

Color del icono Vista previa (icono de Bootstrap) del widget

fileItemCommentHeight

Altura del comentario para el elemento de archivo

Existen cuatro tipos de pestañas del navegador. Estas incluyen pestañas a la izquierda, arriba, en el asistente y acordeón. Cada navegador tiene una clase diferente.

Navegador

Clase de CSS

Accordion

.acordion-navigators

tabs on the left

.tab-navigators-vertical

tabs on the top

.tab-navigators

Wizard

.wizard-navigators

El siguiente es el código HTML para el elemento del navegador de pestañas (similar a las pestañas de arranque):

<li>

tab title

</li>

Accordion navigator is an exception, it has following barebone

structure:

<div class="accordion.navigators">

<div>

<div class = "guideHeader">

<a>

<span class = "guideSummary" ></span>

........................... repeatable buttons, if the repeatable configuration is set ................................

<div class = "repeatableButtons">

<button name="Add" class="Add"/>

<button name="Remove" class="Remove"/>

</div>

</a>

</div>

................................ panel content ..................................

</div>

</div>

Puede cambiar el estilo del navegador mediante reglas CSS que seleccionen los elementos con selectores descenant. Por ejemplo, para añadir un estilo de decoración de texto a la etiqueta de anclaje:

Navegador de pestañas en la parte superior:

.tab-navigators

li a {

text-decoration:

underline;

}

Tab navigator on left:

.tab-navigators-vertical

li a {

text-decoration:

underline;

}

Accordion navigator:

.accordion-navigators .guideHeader a .guideSummary {

text-decoration:

underline;

}

Wizard navigator:

.wizard-navigators

li a {

text-decoration:

underline;

}

Además, hay clases para aplicar estilo a los navegadores de pestañas (tanto izquierda como superior) en función de si tienen anidados/secundarios/subnavegadores.

Clase de CSS

Descripción

nested_true

Navegadores de pestañas (izquierda y arriba) que tienen anidados/secundarios/subnavegadores

nested_false

Navegadores de pestañas (izquierda y superior) que no tienen anidados/secundarios/subnavegadores

La clase guidenavIcon proporciona un icono predeterminado para los navegadores de pestañas (izquierda y superior) y los navegadores del asistente.

Clase de CSS

guideNavIcon
NOTA

Puede cambiar el icono de un navegador concreto proporcionando una clase CSS en el panel de creación, como por ejemplo <CLASS_NAME>. Agregue un <CLASS_NAME>_nav para el icono del navegador.

Variables

Descripción

Navegadores de pestañas

navigator-bg-color

Color de fondo para todo el navegador de pestañas

tabs-bg-color

Color de fondo de la ficha

tabs-font-color

Color de fuente de la ficha

tabs-hover-bg-color

Color de fondo de la ficha al pasar el ratón por encima

tabs-hover-font-color

Color de fuente para la ficha al pasar el ratón por encima

tabs-active-bg-color

Color de fondo cuando el panel está enfocado (activo)

tabs-active-font-color

Color de fuente cuando el panel está enfocado

tabs-completed-bg-color

Color de fondo cuando la expresión de finalización del panel devuelve verdadero

tabs-completed-font-color

Color de fuente cuando la expresión de finalización del panel devuelve verdadero

tabs-stepped-bg-color

 Color de fondo cuando el panel ha estado enfocado una vez, pero la expresión de finalización devuelve el valor false

tabs-stepped-font-color

 Color de fuente cuando el panel ha estado seleccionado una vez, pero la expresión de finalización devuelve el valor false

tabs-border-color

Color de borde de la pestaña

tabs-font-size

Tamaño de fuente de la ficha

tabs-padding

Relleno para la pestaña

tabs-margin

Margen para la pestaña

tabs-vertical-margin

Margen de las pestañas verticales

tabs-border-thickness

Tamaño del borde de las pestañas

tabs-min-height

Altura mínima de las pestañas

heirarichal-indent

Sangría para las pestañas anidadas

Navegadores de asistente

wizard-navigator-bg-color

 Color de fondo para todo el navegador del asistente

wizard-tabs-bg-color

Color de fondo del asistente

wizard-tabs-font-color

Color de fuente para el asistente

wizard-tabs-active-bg-color

Color de fondo cuando el panel está enfocado (activo)

wizard-tabs-active-font-color

Color de fuente cuando el panel está enfocado (centrado)

wizard-tabs-completed-bg-color

Color de fondo cuando la expresión de finalización del panel devuelve verdadero

wizard-tabs-completed-font-color

Color de fuente cuando la expresión de finalización del panel devuelve verdadero

wizard-tabs-stepped-bg-color

 Color de fondo cuando el panel ha estado enfocado una vez, pero la expresión de finalización devuelve el valor false

wizard-tabs-stepped-font-color

Color de fuente cuando el panel se ha centrado una vez, pero la expresión de finalización devuelve false

wizard-tabs-border-color

Color del asistente

wizard-tabs-font-size

Tamaño de fuente del asistente

wizard-tabs-padding

Relleno para el asistente

wizard-tabs-border-thickness

Tamaño del borde del asistente

wizard-nav-bullet-border

Color del borde de la viñeta del navegador del asistente (prefiriendo el rótulo/etiqueta)

wizard-progress-bg-color

Color de fondo de la barra de progreso del navegador del asistente

wizard-progress-color

Color de relleno para la barra de progreso

Navegadores de acordeón

accordion-tabs-padding

Relleno para acordeón

Estilo de panel

Un panel incluye una barra de herramientas opcional y su contenido.

Clase de CSS

guidePanelNode

Variables

Descripción

panel-background-color

Color de fondo del panel

panel-font-size

Tamaño de fuente del texto del panel

panel-font-color

Color de fuente para el texto del panel

panel-padding

Relleno dentro del panel

panel-description-font-size

Tamaño de fuente de la descripción del panel

panel-description-padding

Relleno de la descripción del panel

panel-help-bg-color

Color de fondo para la ayuda del panel

panel-help-border-indicator-color

Color del borde indicador para la ayuda del panel

El nodo del panel se divide en navegadores y contenido. No existe un componente de estilo independiente para el contenido. Las variables descritas se aplican tanto en el navegador como en el contenido.

*El panel superior (RootPanel) no tiene esta clase.

Estilo móvil

Barra de encabezado

Estas variables influyen en la barra de encabezado que es visible en un dispositivo móvil o en dispositivos de pantalla pequeña que contienen título de panel y navegadores siguientes y posteriores.

Clase de CSS

guide-header-bar

Variables

Descripción

headerbar-background-color

Color de fondo de la barra de encabezado

headerbar-font-color

Color de fuente para el texto dentro de la barra de encabezado

headerbar-padding

Relleno para barra de encabezado

Indicador de desplazamiento

Estas variables influyen en el indicador de desplazamiento, que es una flecha naranja que aparece en un dispositivo móvil o en dispositivos de pantalla pequeña. Un indicador de desplazamiento indica que hay contenido más allá de la parte visible de la pantalla. Puede desplazarse hacia abajo para verlo. Cuando llega al final del contenido, la flecha desaparece.

Clase de CSS

mobileScrollIndicator

Variables

Descripción

scrollIndicatorBottom

Posición fija del indicador de desplazamiento desde la parte inferior

scrollIndicatorRight

Posición fija del indicador de desplazamiento desde la derecha

scrollIndicatorWidth

Anchura del indicador de desplazamiento

scrollIndicatorHeight

Altura del indicador de desplazamiento

Variables específicas del diseño de la barra de herramientas fija y móvil

Estas variables de la siguiente tabla influyen en el diseño de la barra de herramientas fija móvil.

Clase de CSS

mobileToolbar

Variables

Descripción

mobileToolbarBottom

Posición fija de la barra de herramientas, en el dispositivo móvil, desde la parte inferior

mobileToolbarTop

Posición fija de la barra de herramientas, en el dispositivo móvil, desde la parte superior

mobileToolbarLeft

Posición fija de la barra de herramientas, en el dispositivo móvil, desde la izquierda

mobileToolbarRight

Posición fija de la barra de herramientas, en el dispositivo móvil, desde la derecha

mobileButtonIconTopMargin

Posición fija del icono de botones de la barra de herramientas, desde la parte superior

mobileButtonIconWidth

Anchura del icono de botones de la barra de herramientas en el dispositivo móvil

mobileButtonIconHeight

Altura del icono de botones de la barra de herramientas en el dispositivo móvil

mobilefixedtoolbarbgcolor

Color de fondo de la barra de herramientas en dispositivos móviles

En esta página